Blogger Yazı Sonunda Şık Duran Sosyal Paylaşım Butonları Ekleme

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 otomatikmen 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.

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/share
Article?mini=true&amp;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://teknoowin.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
('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI
/AAAAAAAACbg/8dz4LkDIHYY/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}}

Ş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. Takipte kalın

Demo Görmek İçin Tıklayınız