Aşağıdaki kodları kopyalamak için Tema bölümüne girilir. Burda HTML düzenle düğmesi tıklanır ve aşağıdaki kodlar bulunarak o kısma yapıştırılır
</b:skin> yada </style> kodunun bir satır üzerine ekleyeceğimiz kodlar:
#be {
list-style: none;
list-style: none;
text-decoration: none;
font-size: 0.9em;
font-family: trebuchet ms, sans-serif;
}
#be
a {
text-decoration: none;
font-family: trebuchet ms, sans-serif;
}
#be
li {
position: relative;
height: 38px;
cursor: pointer;
padding: 0 !important;
}
#be
.facebook,
.googleplus,
.pinterest,
.rss,
.twitter
{
position: relative;
z-index: 5;
display: block;
float: none;
margin: 10px 0 0;
width: 210px;
height: 38px;
border-radius: 5px;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9sWTjcZxs1PyG3gKXp_HvKmz3Fr_W_yyvuI6TK2MeLPRacWRxjsF8k2zhVhqmr9QZrjvzzgJHIYmATMyRGELU0MmQ4jhXfiUr-DQJp87HMGXwLMGFljr3EBXiTcMrZXuckOdzEBvufkg/w35-h158-no/facebook+and+google%252B+.png)
no-repeat;
background-color: rgba(217, 30, 118, .42);
-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
color: #141414;
text-align: left;
text-indent: 50px;
text-shadow: #333 0 1px 0;
white-space: nowrap;
line-height: 32px;
-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-ms-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
transition: width .25s ease-in-out, background-color .25s ease-in-out;
-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
}
#be
li:after {
position: absolute;
top: 0;
left: 50px;
z-index: 2;
display: block;
height: 38px;
color: #141414;
content: attr(data-alt);
line-height: 32px;
}
#be
.icon {
overflow: hidden;
color: #fafafa;
}
#be
.facebook {
width: 32px;
height: 32px;
background-color: rgba(59, 89, 152, 0.42);
background-position: 0 0;
}
#be
.twitter {
width: 32px;
height: 32px;
background-color: rgba(64, 153, 255, 0.42);
background-position: 0 -33px;
}
#be
.googleplus {
width: 32px;
height: 32px;
background-color: rgba(228, 69, 36, 0.42);
background-position: -3px -66px;
}
#be
.pinterest {
width: 32px;
height: 32px;
background-color: rgba(174, 45, 39, 0.42);
background-position: 0 -95px;
}
#be
.rss {
width: 32px;
height: 32px;
background-color: rgba(255, 102, 0, 0.42);
background-position: -3px -126px;
}
#be
li:hover .icon,
.touch
#be li .icon {
width: 210px;
}
.touch
#be li .facebook,
#be
li:hover .facebook {
background-color: rgba(59, 89, 152, 1);
}
.touch
#be li .twitter,
#be
li:hover .twitter {
background-color: rgba(64, 153, 255, 1);
}
.touch
#be li .googleplus,
#be
li:hover .googleplus {
background-color: rgba(228, 69, 36, 1);
}
.touch
#be li .pinterest,
#be
li:hover .pinterest {
background-color: rgba(174, 45, 39, 1);
}
.touch
#be li .rss,
#be
li:hover .rss {
background-color: rgba(255, 102, 0, 1);
}
<ul id="be">
<li data-alt="Bizi Facebook'ta takip
et"><a class="icon facebook" href="#"
target="blank">Bizi Facebook'ta takip et</a>
</li>
<li data-alt="Bizi Google+'da takip
et"><a class="icon googleplus" href="#"
target="blank">Bizi Google+'da takip et</a>
</li>
<li data-alt="Bizi Twitter'da takip
et"><a class="icon twitter" href="#" target="blank">Bizi
Twitter'da takip et</a>
</li>
<li data-alt="Bizi Pinterest'te
izleyin"><a class="icon pinterest" href="#"
target="blank">Bizi Pinterest'te izleyin</a>
</li>
<li data-alt="Bizi Blogger'da
izleyin"><a class="icon rss" href="#" target="blank">Bizi
Blogger'da izleyin</a>
</li>
</ul>
Hiç yorum yok:
Yorum Gönder