Blog Yazılarına Sosyal Paylaşım Butonları Ekleme

Blog Yazılarına Sosyal Paylaşım Butonları Ekleme - Blogunuzda yayınladığınız yazıları sosyal paylaşım sitelerinde paylaşmak blogunuz için en önemli unsurlardan biridir. Blogunuz diğer bloglardan ne kadar farklı olursa yani blog ziyaretçilerinin rahatça blogda dolaşması ve içeriklere daha hızlı ulaşması açısından bunlar çok önemlidir. Siz de blogunuzun görünümünde biraz değişiklik yapabilirsiniz.

Şimdi blogunuzda sosyal paylaşım butonlarını daha ilgi çekici hale getirelim. Eklediğiniz bir çok butonlar sitenizde tamda istediğiniz gibi durmuyor. Şimdi sizlerle paylaşacağım eklenti hem blogunuzun görünümünü değiştirecek hem de yayınlarınızı paylaşım oranını biraz daha artıracak. Butonların nasıl durduğu yazımızın hemen altında sayfamızda uygulanmaktadır.

Blogger Blogspot Sosyal Paylaşım Butonları

1- Blogger kumanda panelinden Şablon-HTML'yi Düzenle ve CTRL+F Tuşları yardımıyla kodunu aratın. Bu kodun hemen 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-btn'>
<div class='tombol-berbagi-btn-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-btn-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- Yine CTRL+F tuşları yardımı ile ]]></b:skin> yada </style> kodunu aratın ve bu kodun hemen üst satırına aşağıdaki CSS kodlarını yapıştırın.

.tombol-berbagi-btn{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-btn-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-btn-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-btn a{color:#999;transition:all .3s;}
.tombol-berbagi-btn a:hover{color:#7cb0ed}
@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-btn-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-btn-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}

Ön İzleme

Kodları ekledikten sonra şablanu keydedin blogunuzdaki değişiklili fark edin. Bizi takip etmeye devam edin ve yenilikleri kaçırmayın...