Blogger Sosyal Medya Profil Butonları v3

Sosyal medyada aktif olmak bloggerlar için büyük önem taşır.Bu yüzden her blog sitesinde muhakkak facebook ve twitter adresi bulunmaktadır.Peki, bu sosyal medya adreslerimizi estetik açıdan daha güzel yayınlasaydık güzel olmaz mıydı ?



Olurdu elbet :) Bu yüzden sizlere yine CSS ile oluşturulmuş güzel butonlar sunacağım.Daha önce,

• Blogger Sosyal Medya Profil Butonları
• Blogger Sosyal Medya Profil Butonları v2

sizlere yukarıdaki yazılarımda buna benzer butonların nasıl ekleneceğini anlatmıştım.Sizleri daha fazla bekletmeden hemen anlatıma geçeyim.

]]><b:skin>

Yukarıdaki kodumuzu bulun ve hemen üzerine aşağıdaki CSS kodlarımızı ekleyin.

.social a {
display: block; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrYE9ynTvObmib7Cdyy_gsbCVX-B3nZeivYziQnWtNVm4uZJcCLmXQCe4enN_NTEfRjClOFYK-dmTQHlLV8cbYl_7MTP_KODEj0kIUijwKZLbcaMadBTIZBtF6R0GVby4853LdoNTgIDDP/s277/social-icons.png);
background-repeat:  no-repeat;
width: 56px;
height: 58px;
float: left;
margin: 0 22px 15px 0
}
.social-face {background-position: 0 -70px;}
.social-face:hover {background-position: 0 0;}
.social-twit {background-position: -74px -70px;}
.social-twit:hover {background-position: -74px 0;}
.social-plus {background-position: -221px -70px;}
.social-plus:hover {background-position: -221px 0;}
.social-rss {background-position: -148px -70px;}
.social-rss:hover {background-position: -148px 0;}

Önizleme yapın hata almıyorsanız şablonu kayıt edin.

Sayfa Öğeleri > Gadget Ekle > HTML/JavaScript gadgetına aşağıdaki kodları ekleyin.

<div class='social'>
<a class='social-face' href='#'></a>
<a class='social-twit' href='#'></a>
<a class='social-plus' href='#'></a>
<a class='social-rss' #' style='margin-right: 0;'></a>

Yukarıdaki kodlarda bulunan # yerine kendi sosyal profil adreslerinizi yazınız.Bir sonraki yazımda görüşmek üzere.İyi bloglamalar