Hover Efektli Sosyal Takip Eklentisi

CSS3 İle Oluşturulmuş, Hover Efektli
CSS3 İle Oluşturulmuş, Hover Efektli Sosyal Takip Eklentisi
Sosyal medya hesaplarınızdaki takipçi sayınızı arttırmak istiyorsanız, ziyaretçilerinizin dikkatini çeken sosyal widgetlar kullanmanız gerekir.Ancak dikkat çekici ve görsel açıdan zengin widgetlar genellikle script kullanarak yapıldığından blog hızını olumsuz yönde etkiliyor.Bu yazıda paylaşacağım sosyal takip eklentisi, Jquery ve Java Script kullanılmamasına rağmen görsellik katan hover efekti ile ziyaretçilerin ilgisini çekecek bir widget.
Eklentiyi blogunuza ekemek için Blogger kumanda paneline giriş yaptıktan sonra 
Yerleşim > Gadget Ekle > HTML/JavaScript yolunu izleyerek aşağıdaki kodları 
yapıştırın. Kodların son bölümündeki sosyal medya hesaplarıma ait adresleri kendi hesabınıza ait adreslerle değiştirin.Bunun dışında bir değişiklik yapmanıza gerek yok.

<style> 
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} 
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} 
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} 
#tbisose .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://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.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;} 
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;} 
#tbisose .icon{overflow:hidden; color:#fafafa;} 
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} 
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} 
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} 
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} 
#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} 
#tbisose li:hover .icon, 
.touch #tbisose li .icon{width:210px;} 
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);} 
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);} 
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);} 
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);} 
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);} 
</style>
<ul id="tbisose"> 
<li data-alt="Fcebook'ta takip et"><a class="icon facebook" href="http://facebook.com/294588730555275"  target="_blank">Facebook'ta Takip Et</a></li> 
<li data-alt="Twitter'da takip et"><a class="icon twitter" href="http://twitter.com/guney59"  target="_blank">Twitter'da Takip Et</a></li> 
<li data-alt="Google+'da takip et"><a class="icon googleplus" href="http://plus.google.com/114021536527450214647"  target="_blank">Google+'da Takip Et</a></li> 
<li data-alt="Pinterest'te takip et"><a class="icon pinterest" href="http://pinterest.com/guney59"  target="_blank">Pinterest'te Takip Et</a></li> 
<li data-alt="RSS İle Takip Et"><a class="icon rss" href="http://feeds.feedburner.com/guney59"  target="_blank">RSS İle Takip Et</a></li> 
</ul>

Bu blogdaki popüler yayınlar

Youtube Video Önizleme Küçük Resmi Nasıl Değiştirilir

YouTube Kanalına Yönlendiren Özel URL Alma

Friend Connect Blogger İzleyiciler Gadgeti Emekli Çözüm

WordPress Facebook Google Plus Disqus Yorum Eklentileri

Windows 10 Rezervasyon Bildirimi Çıkmıyor mu Çözüm

Blogger Üst Menüye Kategori Ekleme (Videolu Anlatım)

Attribution Gadgetini Etkinleştir (Videolu Anlatım)

Wix Ücretsiz Sitenize Yorum Kutusu Ekleme

Son Yazılar Eklentisi (Animisyonlu)