İpucu Balonu Tarzında Sosyal Butonlar

Ziyaretçilerinizin, blogunuzu sürekli takip etmelerini sağlaacak sosyal takip butonlarına çok önem veriyorum.Her kesin zevki ve blog tasarımı da farklı olduğu için değişik türlerde ve ytarzlarda sosyal takip butonlarını sizlerle paylaşıyorum.Bugüne kadar paylaştığım sosyal takip butonları eklentilerini hatırlatayım:

• Blogunuz için Şık Bir Abonelik Widget'ı
• Blogunuza Sosyal Takip Butonları Ekleyin
• CSS3 İle Oluşturulmuş, Hover Efektli Sosyal Takip Eklentisi
• Sabit Abonelik Butonları

 

Sosyal takip butonlara bir yenisini daha ekleyiyorum.Bu eklenti, başlıkta da belirttiğim gibi ipucu balonlarını andıran tarzda ikonlar kullanılarak yapılmış ve CSS zoom tekniği kullanılarak ikonların üzerine gelince büyütme efekti verilmiş.

Hover efektini görmek için videoyu izleyebilirsiniz.

 

 

Eklentiyi blogunuza eklemek Blogger kumanda paneline giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/JavaScript yolunu izleikten sonra aşağıdaki kodları ekleyin.

<style>
/* İpucu Balonu Tarzında Sosyal Butonlar  */
.ipucubalonu{
list-style-type:none;
margin:0;
padding:0;
}
.ipucubalonu li{
display:inline;
width: 60px;
height:60px;
}
.ipucubalonu li img{
width: 50px;
height: 50px;
border:0;
margin-right: 4px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.ipucubalonu li img:hover{
-moz-transform:scale(1.8);
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>

<ul class="ipucubalonu">

<li><a href="http://feeds.feedburner.com/bloghocam" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJT5EJMmFsMorZ_PcSJtUbuhW9cMUfAnCtT19BleQHVMEz5wnD3D9eqJBgc_CdabFnXyty7XE6BZ_ZNXlO_eN-5aBWH4xLgl6a6uZqK_vi4xmTT7xKOIPd_hr_8j0WQWc5DrXImb2DGnjc/s64/ipucubalonu-rss.png" title="Add RSS Feed" /></a></li>

<li><a href="http://www.facebook.com/bloghocam" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwkOhd20y1p_Pxj2f8y4Ulvo4r8iMXQ_ze9kZVgnFVDcQpps3ql-wPnRhTsOgdumapYnbOo6Aa6-YuTe83n81nYLO18aAC0kLxeCEswOoLECLCTcflDSF-mD9jBzedIwl87rDaNaoStRfo/s72/ipucubalonu-facebook.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.twitter.com/bloghocam" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaTlUxgilXAjx6InKlSAyjmdq7dHB21K_kEBah_ELNNU5c0176EZTOYPk9d1pjBebhoNDE-P12R1gVleNncg_6sANXEqMOAbhzEXP2sGfnKUiktvx6XCr_u6oPXydJYotTCBVcVpojsE4W/s64/ipucubalonu-twitter.png" title="Add to Twitter" /></a></li>

<li><a href="https://plus.google.com/108761595756468128383" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitc7R-ouKW9BQKlsXiilFmpMkpzp4WCRY8xXSRXLOWtrsCthOMSwm2EVj7otk-1yWFx6c8SvKeAuBOkvJnuq3Pm6BbJpb4dpXXKOMWRgbz1ZaBKNgyUbrmsjbm4BqSRR-dloqdfPjCqQZT/s64/ipucubalonu-google.png" title="Add to Facebook" /></a></li>

</ul>

 

Değiştirmeniz gereken yerleri beyaz vurguyla gösterdim.Oralara kendi FeedBurner, Facebook, Twitter ve Google+ hesaplarınızın adreslerini yazın.