Gokhaninguncesi » Kişisel Blog

Blogger İçin CSS ile Tasarlanmış Sosyal Medya Butonları

Blogger'a her geçen gün yeni bir tasarım ve yeni bir eklenti daha tasarlanıyor. Onlardan bir tanesi de Css ile tasarlanmış yeni sosyal medya butonları. Bir blogcu için vazgeçilmezlerinden biri blog yazmak ve bir diğeri ise sosyal medya ağları. Bu sitelerin bloga uygun hale getirmek için tasarlanan kodlar ile kullanıcılarında zevkine göre kullanılmasını arttırıyor.

Bu tasarım da Twitter, Facebook, Google +1 ve Rss içeriği mevcut. Yukarıdaki resimde görüldüğü gibi kullanılan tasarım birçok site teması için uygun olduğunu düşünüyorum.
Şimdi bu eklentiyi blogumuzda nasıl uygulayabiliriz ? Ona gelelim...

    Kumanda Paneli
    Şablon
    HTML'yi Düzenle
    Widget Genişlet yolunu izleyerek aşağıdaki kodu bulun;

]]></b:skin>

Bulduğunuz kodun hemen üzerine gelecek şekilde aşağıdaki kodu ekleyin;

ul#m-soc2{
margin: 18px 0 0 10px;padding: 0;width: 220px;height:50px;}
ul#m-soc2 li{
list-style: none;margin: 7px;padding: 0;float:left;border: none;}
ul#m-soc2 li a{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWkmnKaKXISJvaMTme2s7R9Mf3slxzeiYaD3wn-tZwztx4gNlA4i1wfkhwgEYWIAhfMzUnSIoVJTrHNA52U9xhP1sIZ9-_Pt8-3MCzzHIhMhG5461y5XPkkR0SAeZMfOy38vJMcQPZp7g/s1600/blogger-icin-sosyal-medya-butonlari-css-tasarimi-ile-eklenti.png) no-repeat 0 0;
margin:0;padding:0;display: block;position:relative;
width: 33px;
height: 33px;
overflow: visible;
}
ul#m-soc2 li a.twitter{
background-position: 0 0;
}
ul#m-soc2 li a.facebook{
background-position: -33px 0;
}
ul#m-soc2 li a.google{
background-position: -66px 0;
}
ul#m-soc2 li a.rss{
background-position: -99px 0;
}
ul#m-soc2 li a.twitter:hover{
background-position: 0 -33px;
}
ul#m-soc2 li a.facebook:hover{
background-position: -33px -33px;
}
ul#m-soc2 li a.google:hover {
background-position:-66px -33px;
}
ul#m-soc2 li a.rss:hover{
background-position:-99px -33px;
}
ul#m-soc2 li a span{
background: #555;position:absolute;
top:-10px;left:-10px;width:auto;height:auto;opacity:0;
padding:3px;text-align:left;
color:#fff;filter:alpha(opacity=0);
white-space:nowrap;border-radius:3px;font-size:12px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;} ul#m-soc2 li a:hover{text-decoration:none}
ul#m-soc2 li a:hover span{
opacity:.7;
filter:alpha(opacity=70);
top:-23px}
#bloglamazamani {
margin-bottom:20px;}

Yukarıdaki kodu yapıştırdıktan sonra şablonu kaydedip çıkın. Daha sonra
Kumanda Paneli
Yerleşim
Gadget Ekle seçeneği ile
HTML/Javascript ekleyin ve açılan kutuya aşağıdaki kodları yapıştırın.