Dönme Efektli Sosyal Takip Eklentisi

Google’dan sonra en önemli trafik kaynaklarından biri olan sosyal medya kanallarında yer almaya dikkat etmeliyiz. Facebook, Twitter, Google+ gibi popüler sosyal platformlarda takipçi sayımız ne kadar çok olursa, blog trafiğimiz o kadar artar. Bu yüzden blogumuza sosyal medya butonları koyarak ziyaretçilerimizi bu platformlardaki hesaplarımıza yönlendirmeliyiz. İşte blogunuzun kenar çubuğuna ekleyebileceğiniz, hover efektli şık bir sosyal takip eklentisi…

Bu resimden başlıkta bahsettiğim dönme efektini anlamanız elbette mümkün değil. Bu yüzden aşağıdaki demo videoyu izlemenizi de öneririm.

Eklentiyi blogunuzda kullanmaya karar verdiyseniz Blogger kumanda paneline girdikten sonra Yerleşim > Gadge Ekle > HTML/JavaScript Gadget yolunu izleyerek aşağıdaki kodları eklemeniz yeterli.

<!--Blog Hocam Metro Spinning Sosyal Takip Eklentisi-->

<div class="subscribe">
<ul> <li class="rss"><a href="http://feeds.feedburner.com/bloghocam" target='_blank'><span></span>RSS</a></li>
<li class="twitter"><a href="http://twitter.com/bloghocam" target='_blank'><span></span>Twitter</a></li>
<li class="gplus"><a href="https://plus.google.com/108761595756468128383" target='_blank'><span></span>Google Plus</a></li>
<li class="facebook"><a href="http://facebook.com/bloghocam" target='_blank'><span></span>Facebook</a></li> </ul>
</div> 

<style>
.subscribe li {
display: block !important;
margin-right: 0 !important;
width: auto !important;
}
.subscribe li a span {
display: block;
height: 32px;
left: 0;
position: absolute;
top: 2px;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transition-duration: 0.8s;
transition-property: all;
width: 32px;
}
.subscribe .twitter span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwZTVUpd8KQYbzyM4WnGLsK1VU389a4vmdIsexinMjzUfw_YxLWpjb9DXa0FLe_WdmG4yJHLpi4ATwbEGAtxkrOvxWYhEVqXeCwka6aZnjU6aVK5O5wPlASRCcZvQLqyS95bAnztvol4c/s1600/twitter_icon.png) no-repeat;
}
.subscribe .twitter a {
background: #91C661;
}
.subscribe li a:hover span {
transform:rotate(340deg);
-webkit-transform:rotate(340deg);   
}   
ol, ul {
list-style: none outside none;
}
.subscribe li {
display: block !important;
margin-right: 0 !important;
width: auto !important;
}
.subscribe li {
display: inline-block;
margin: 0 20px 10px 0;
position: relative;
width: 200px;
}
.subscribe .rss span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzqSbt2GYyDslXLuz2_RV5FNRcBiCGsp8Ei8BczJCPwrdUMqSUlOCjGXJbaHLpvWKqcqQozGMeLoyvUxHNhy0rHXaT7XzjgujTArDbOduIBbzU2mU2RBFj-Hx3SN8-pIm9cmr1YTcSv0Q/s1600/rss-icon.png) no-repeat;
}
.subscribe .rss a {
background: #F67F00;
}
.subscribe li a {
color: #FFFFFF;
display: block;
font-family: verdana;
font-size: 12px;
padding: 10px 10px 10px 40px;
text-decoration: none;
font-weight: bold;
}
.subscribe li a span {
display: block;
height: 32px;
left: 0;
position: absolute;
top: 2px;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
transition-property: all;
width: 32px;
}
.subscribe li a:hover span {
transform:rotate(340deg);
-webkit-transform:rotate(340deg);
} 
.subscribe .twitter span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwZTVUpd8KQYbzyM4WnGLsK1VU389a4vmdIsexinMjzUfw_YxLWpjb9DXa0FLe_WdmG4yJHLpi4ATwbEGAtxkrOvxWYhEVqXeCwka6aZnjU6aVK5O5wPlASRCcZvQLqyS95bAnztvol4c/s1600/twitter_icon.png) no-repeat;
}
.subscribe .twitter a {
background: #91C661;
}
.subscribe .gplus span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzhHQkJYAZY-tBY0AoHWYsCl7HIJvp6nT24x8oroabndGORB1E8jVCTHkOncSVtxQYQ6R75TRgIVhTAQCoaMKc7uAIfP93Evu6z0-P8gkEK8iFTsdbObhcLuo053eiGJccEpFo-paz8tA/s1600/googleplus.png) no-repeat;
}
.subscribe .gplus a {
background: #D74D2F;
}
.subscribe .facebook span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_qRNJLd5T0YnXY79PmF8YJUPFxJdMRB0Cx6CLPT_AZ5zDAV-9105kPD0G8ycsQdqUIDe70XhjXkPFMbccX_htroFHdJ6YW1-CIkEwgPlYzyz7_y70-iy0b0kvI9WEJNalNeK4Wvk4o7o/s1600/facebook-icon.png) no-repeat;
}
.subscribe .facebook a {
background: #3B5998;
}
</style>

<!--Blog Hocam Metro Spinning Sosyal Takip Eklentisi-->

Bordo renkle gösterdiğim Blog Hocam’a ait hesap adreslerinin yerine kendi adreslerinizi yazmayı unutmayın!

- Bu yazı Blog Hocam'dan alınmıştır
- Kaynak: Blog Hocam