Animasyonlu Sosyal Paylaşım Butonları

Blogger Animasyonlu Sosyal Paylaşım Butonları - Blog sitenizin bir çok menüsünde kullanabileceğiniz ve ayrıca blogunuzun boby yani içerik kısmında da kullanabileceğiniz muhteşem bir hareketli butonlar.

Ziyaretçilerinizin sayfanızı ziyarettiğinde, ziyaretçilerin dikkatini çekmesi ve tıklamaya teşik edici görünümü ile çok kullanılması sayesinde en çok tercih edilen butonlardandır.

Blog Sitesine Sosyal Paylaşım Butonlarını Ekleme

1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Burada ilk yapmanız gereken, aşağıdaki CSS kodlarını blogunuzun şablon kodları arasında bulunan </head> kodunun hemen bir satır üzerine ekleyin.

<style type='text/css'>
@import url(http://weloveiconfonts.com/api/?family=entypo);a[class*="entypo-"]:before,span[class*="entypo-"]:before{font-family:'entypo',sans-serif;color:#fff}
.clearfix{*zoom:1}
.clearfix:before,.clearfix:after{content:"";display:table}
.clearfix:after{clear:both}
#shares-btn-be {text-align: center;}
#shares-btn-be ul{margin: 0 0 0 8px;}
#shares-btn-be li{list-style-type:none;}
#shares-btn-be .button{margin-left: 0;border-radius:8px;color:#fff;display:block;font-size:24px;height:64px;line-height:64px;text-align:center;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;-ms-transition:-ms-transform .2s;-o-transition:-o-transform .2s;transition:all .2s;-webkit-transform:translateZ(1);width:64px}
#shares-btn-be .button:hover{-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-ms-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05)}
#shares-btn-be .share{background:#444;box-shadow:0 4px 0 #2a2a2a;width:300px}
.twitter{background:#00acee;box-shadow:0 4px 0 #0080b1}
.facebook{background:#3B5998;box-shadow:0 4px 0 #2a447b}
.google{background:#CC3732;box-shadow:0 4px 0 #9c2824}
.be-btn-share{display:inline-block;position:relative}
.be-btn-share li{float:left;margin:0}
.be-btn-share li:first-child{margin-left:0;position:absolute}
.be-btn-share li:nth-child(2){margin:0 0 0 80px}
</style>

2- Aşağıdaki jQuery kodunu blogunuzun şablon kodları içerisinde bulunan </body> kodunun hemen bir satır üzerine ekleyin ve şablonu kaydedin.

<script type='text/javascript'>
//<![CDATA[
(function() {

 $('.share').on('click', function(e) {

  e.preventDefault();

  var $this = $(this);

  $this.animate({
   'width': $this.width() == 300 ? '64px' : '300px'
  }, 300, 'swing');

 });

} () );
//]]>
</script>

3- Sosyal paylaşım butonlarının nerede görünmesini istiyorsanız aşağıdaki HTML kodları oraya ekleyin. Blogunuzun sidebar, footer veya body içerisinde kullanabilirsiniz. HTML kod içerisinde bulunan # yerine sosyal medya hesaplarınızın URL'sini ekleyin.

<div id='shares-btn-be'>
<ul class="be-btn-share clearfix">
<li><a href="#" class="button share entypo-share"></a></li>
<li><a href="#" class="button twitter entypo-twitter" target="_blank"></a></li>
<li><a href="#" class="button facebook entypo-facebook" target="_blank"></a></li>
<li><a href="#" class="button google entypo-gplus" target="_blank"></a></li>
</ul>
</div>

4- Sosyal paylaşım butonlarını blog ve blog yayınlarınızı paylaşmak için aşağıdaki HTML kodları kullanın. Aşağıdaki HTML kodları blogunuza entegre etmek için, blogunuzun şablon kodları arasında bulunan <data:post.body/> kodunuzun alt tarafına entegre etmeye çalışın. Bu konuda net bir yer söylemek mümkün değil, sebebi ise çok farklı blog temaları olduğu için bu kodların yerleri bir iki satır farklılık göstermektedir. Bu nedenle siz en doğru yeri bularak entegre etmeye çalışın.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='shares-btn-be'>
<ul class="be-btn-share clearfix">
<li><a href="#" class="button share entypo-share"></a></li>
<li><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter ile paylaş' class="button twitter entypo-twitter" target="_blank"></a></li>
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Facebook ile paylaş' class="button facebook entypo-facebook" target="_blank"></a></li>
<li><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Google Plus ile paylaş' class="button google entypo-gplus" target="_blank"></a></li>
</ul>
</div>
</b:if>

Eğer yukarıdaki kodu blogunuza entegre edemediğiniz durumlarda yada farklı bir sorun ile karşılaşmanız durumunda yorum sistemini kullanarak bize ulaşabilirsiniz. Butonların demo görünümü aşağıdaki gibidir.