Blogger Sosyal Medya Profil Butonları v2

Daha önce sizlere bu yazımda Blogger Sosyal Medya Profil Butonları CSS3 ile oluşturulmuş ve hover efekti verilmiş kodlar sunmuştum.Şimdi ki kodlarımız ise biraz daha gelişmiş ve daha renkli.
Butonlarımız her zamanki gibi CSS3 ile oluşturulmuş ve hover efekti verilmiştir.Butonlarımızın güzelliğine sizin karar verebilmeniz için birde demo ekledim.


DEMO

]]></b:skin>

Yukarıdaki kodumuzu şablonunuzda CTRL+F yardımı ile bulun.Daha sonra hemen üstüne aşağıdaki CSS kodlarımızı ekleyin.

#social {
margin: 15px 0 5px -15px;
width: 300px;
height: 40px;
text-align: center;
}

#social img {
margin-left: 3px;
margin-right: 3px;
}

#social img:hover {
opacity: 0.6;
}

Tasarım > Sayfa Öğeleri > Gadget Ekle diyerek aşağıdaki kodlarımızı gadgetımıza ekleyelim.

<div id="social">
<a href="http://www.twitter.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYZbIoErq75hOO4P0UqBIHLpkyTTYAWazJ7eA1RebLwceRXFSDGGYW932yqwNiGndR3DvGDGSHV4-U0ssDc7UhqVjHOSohneQaT37zL7W6aAd0xjBuE17hrG2Nh5RYIg1oU9GXewxy-WE/s0/twitter.png" title="Twitter" /></a>
<a href="http://feeds.feedburner.com/" target="_blank"><img alt="Feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1TJCkLf2ttSu5WSFoyv7QDtNSSZl4BWEWr_o_i2Kwm8qO2x5D4kUMx2Wsu10LNGj67uBwATV2aGFTcXq7xNgY4SiVpjU3fHB3T4AfmfJd7-q_X_JNA6ampojfD7NDhpFSHFqdtIdroIc/s0/rss.png" title="RSS" /></a>
<a href="http://www.facebook.com/" target="_blank"><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvL_GsyImFbNkUejXGxwgkEZ99nctz4gR54OxWVsSY0J2elFOFm7rCxrq7OOhVcnVx8REQXVlZcA6-CSBaWDGWft-MM_ndA1nLyFODBQiIuXtq-eE2BeFyxEkynEo9nwPvuuanSCbFYm8/s0/facebook.png" title="Facebook" /></a>
<a href="http://plus.google.com/" target="_blank"><img alt="Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDUCR1sGVx0bBt2i1Cnkz075XXPlugQyll13ctUeHW3PZX0LXFd5We8oCPAe00sps21n5PJIEt3itg_9LsFnRRik5cRs8oqZq2X8GdPobvEd_92nfBLxbzmoBFv3MkdlSLCpb82EIN6zE/s0/google%252525252b.png" title="Google Plus" /></a>
<a href="http://www.youtube.com/" target="_blank"><img alt="Youtube" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfxxXCVjV5iRdxHWFqX-GrjeS0Rov9uavkzwWDuRftGHuOv3FWL4ZOnWNY5NWNcseXMaFqKIZvwQ-hWET-kmPecn907-SeNacJPPovFrpC6MBx2eslswJEKB52czuBimdlsn6P6WShxmA/s0/you_tube.png" title="Youtube" /></a></div>

İkinci kodumuzda bulunan kırmızı ile işaretlenen bölüme kullanıcı adlarınızı yazmanız yeterli olacaktır.


İyi bloglamalar...