Wordpress CSS3 Hover Efektli Takip Etme Eklentisi

Wordpress kendinden barındırmalı web siteleri için, tamamen CSS3 stil kodları ile oluşturulmuş Takip Butonları üzerine maus getirildiğinde farklı bir renk gösteren “Hover” sosyal Takip Etme eklentisi. Hover efektli sosyal “Takip Et” eklenti kodları içinde web site hızını etkileyecek hiçbir jQuery, Java Script kodları bulunmamaktadır. Eklenti tamamen saf CSS3 stil kodlarından oluşmakta. Hover efektli Sosyal Takip Etme kotlarını aşağıda incelediğinizde sadece stil, ul ve li, link yapısını göreceksiniz. 

Sosyal medya hesaplarınızdaki takipçi sayınızı arttırmak ve ziyaretçilerinizin dikkatini çekmek için Hover efektli Sosyal Takip Etme eklentisini kullanabilirsiniz. Kendinden barındırmalı Wordpress sitelerinin kullanabileceği bu eklentiyi aynı zamanda, Blogger blogunuza, Yerleşim → Gadget ekle → HTML/JavaScript gadget içine bu yazıdan ekleyip kullanabileceksiniz. 

Blogger için DEMO Eklenti görünümü. 

Kendinden barındırmalı Wordpress sitenize eklemek için, metin widget’ini seçip kodları yapıştırmanız yeterli olacaktır. Hover efektli Sosyal Takip Et eklentisini, ister Sidebar da isterseniz Footer alt bilgi alanında kullanabilirsiniz. 

Kodların bulunduğu dikey çubuğu aşağıya doğru kaydırın ve renklendirilmiş bölümdeki sosyal medya hesap link'inizin id ismi ile değiştirin. 

Tüm yapmanız gereken işlem verilen kodları ilgili alana eklemek ve kaydetmekten ibaret olup sorunsuzca kullanabileceksiniz.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHDdn_PQOyP9LFlIFVOJEzK9ULpRlOGQxNZx9vk07A9stfrrLlX7cFuPgCWrkXuApHfz3nTUZycSbpzWj_NQeQIq0ax0Kd4msNHB9xvOE0yHkKjmpajo2XmyNnPlT4payr-5pffMOSrPo/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="http://wp.me/p3IEyb-1Xp"target="_blank"> Adnan Güney Gadgeti Al</a></div>