Hover Efektli Sosyal Takip Eklentisi

CSS3 ile 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 ziyaretinde görsel açıdan zengin widgetler genellikle komut dosyası kullanarak hazırlandığından, blogun hızını olumsuz yönde etkiliyor. Bu yazıda paylaşacağım sosyal takip eklentisi, jQuery, Java Script kullanılmamasına rağmen görsellik katan hover efekti ile ziyaretçilerin ilgisini çekecek bir widget.

DEMO 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 olduğu bölümündeki sosyal medya hesaplarıma ait adresleri kendi hesabınıza ait adreslerle değiştirin. Bunun dışında bir degisiklik yapmanıza gerek yoktur.

Sosyal takip eklenti kodları :
<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="Facebook'ta takip et"><a class="icon facebook" href="https://facebook.com/guney59paylasim"  target="_blank">Facebook'ta Takip Et</a></li> 
<li data-alt="Twitter'da takip et"><a class="icon twitter" href="https://twitter.com/guney59"  target="_blank">Twitter'da Takip Et</a></li> 
<li data-alt="Google+'da takip et"><a class="icon googleplus" href="https://plus.google.com/114021536527450214647"  target="_blank">Google+'da Takip Et</a></li> 
<li data-alt="Pinterest'te takip et"><a class="icon pinterest" href="https://pinterest.com/adnanguney"  target="_blank">Pinterest'te Takip Et</a></li> 
<li data-alt="RSS İle Takip Et"><a class="icon rss" href="http://feedburner.google.com/fb/a/mailverify?uri=guney59&loc=en_US"  target="_blank">RSS İle Takip Et</a></li> 
</ul>
<div style="font-size:9px;text-align: center;">By <a href="https://guney59.blogspot.com.tr/2016/02/blogger-yaz-etiketleri-ile-onerilen.html"target="_blank"> Adnan Güney Gadgeti Al</a></div>


Kategoriler ➤

Daha fazla göster

Bu blogdaki popüler yayınlar

Paint Net ile Resim arka plan Görüntüyü Şeffaf Yapma

Windows 10 Denetim Masası Komutlarına Kısa Yoldan Ulaşma

Windows İşletim Sistemi 32 Bit ve 64 Bit Arasındaki Fark

Blogger Açılır Menü Oluşturma

Facebook Candy Crush Saga Oyunu Çalışmıyor Çözüm

Paint ile Resim Boyutlandırma Seo

Windows 10 ve 8.1’de Oturum Parolasını Kaldırma

Aynur Nur - Acı Kaybımız

Windows Update 80240016 Hatasını Düzeltme

D-Smart Web İnternet Bağlantı Sorun ve Çözüm Ayarları