Yazı Sonunda Şık Duran Sosyal Paylaşım Butonları Yapma

Blogger bloğunuzda yayınladığınız yazılarınızın sosyal medya ağlarında paylaşılması bloğunuza ziyaretçi çekeceği için yararlı kabul edilir. Aynı zamanda blog ziyaretçilerinizin hoşlarına giden bir yazınızı paylaşmalarında kolaylık sağlaması açısından sosyal paylaşım butonları bloglar için vazgeçilmez eklentilerden biridir.

Yazı altına sosyal paylaşım butonları nasıl eklenir, Facebook. Twitter, Google Plus, Linkedin butonları/düğmeleri nasıl yapılır gibi sorularınızı bu yazımda cevaplandıracağım.

Şimdi anlatacağım sosyal paylaşım düğmeleri yazdığınız her yazının sonuna otomatikman eklenecektir. Gayet hoş durduğu ve kolaylık sağladığı için aynı düğmeleri bende kullanıyorum. Bu yazının sonuna geldiğinizde canlı örneğini göreceksiniz. 

Üstteki görselde de göründüğü gibi butonlarımızda Facebook, Twitter, Google Plus ve Linkedin sosyal paylaşım düğmeleri var. Şimdi anlatıma geçelim.

1. Blogger panelimizden Şablon-HTML'yi Düzenle giriş yapın ve <data:post.body/> kodunu bulun. Bu kodun alt satırına gelecek şekilde aşağıdaki HTML kodlarını kopyalayıp yapıştırın.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-arlina'>
<div class='tombol-berbagi-arlina-fb'>
<a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Paylaş Facebook</a>
</div>
<div class='tombol-berbagi-arlina-tw'>
<a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Paylaş Twitter</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Paylaş Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Paylaş LinkedIn</a>
</div>
</div>
</b:if>

2. Şimdi ]]></b:skin> kodunu bulun ve üst satına aşağıdaki CSS kodlarını yapıştırın.

/* https://blogbakkali.blogspot.com Paylaş Butonları */
.tombol-berbagi-arlina{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwBDk4knATC5LhooS-MsNCt6cJKbNhk-DLjnGf3dfebOyRKVQUQttwPA3KsbLdccIDWPNjov0FGZb-j1hj0an8xpz__R9RznPVvP7HZTA6hr_KZM1cI4h3n5UuN0KrEYNhuOVCrXPTDlPn/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.tombol-berbagi-tw{background-position:0 -43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0 -129px}
.tombol-berbagi-arlina a{color:#999;transition:all .3s;}
.tombol-berbagi-arlina a:hover{color:#7cb0ed}

@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}

3. Şablonu kaydedin ve sonuçlarını görmek için bloğunuza bakın :)

Gördüğünüz üzere blogger bloğunuza yazı altında gösterilen facebook twitter gibi sosyal paylaşım butonlarını eklemek bu kadar basit. 

Butonlarla ilgili sorunuz varsa aşağıdaki yorum formunu kullanarak bana sorabilirsiniz. İyi bloglamalar. Takipte kalın :)

Paylaş Facebook

Paylaş Twitter

Paylaş Google+

Paylaş LinkedIn