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

Temmuz 20, 2015
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. 


blogger-yazi-alti-paylas-butonlari

Ü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('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}}

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 :)

Altı yıldır blog işleriyle uğraşıyorum. Edindiğim tecrübeleri sizlerle paylaşıyorum.

32 Yorum
avatar

Malesef. Ama tüm resimlerinize pinterest butonu ekleyebiliriz bu da işinizi görebilir.. Buradan bakın: http://blogbakkali.blogspot.com.tr/2015/08/blogger-resimlere-pinterest-butonu-ekleme.html

Yanıtla
avatar

bloger panelinizden şablon HTML'yi Düzenle yolunu takip ederek açılan kodlar üzerinde herhangi bir yere tıklayın ve CTRL+F tuşlarına aynı anda basın arama kutusu açılacak kodu oraya yazıp ararsanız daha kolay bulabilirsiniz.

Yanıtla
avatar

kendi blogumun paylas butonlarini cekemiyorum kapat diyorum yine gozukuyorlar?

Yanıtla
avatar

kendi blogumun paylas butonlarini cekemiyorum kapat diyorum yine gozukuyorlar?

Yanıtla
avatar

blogger yerleşim blog kayıtları yolunu takip ederek kapatamazsın onları çünkü şablon kodları içerisindeler. Şablon html'yi düzenle yolunu takip ederek butonlara ait kodları bulup silmelisin.

Yanıtla
avatar

yeni bloguma tam da boyle bir şey arıyordum. Emeğinize sağlık. Takiptesiniz

Yanıtla
avatar

yeni bloguma tam da boyle bir şey arıyordum. Emeğinize sağlık. Takiptesiniz

Yanıtla
avatar

Teşekkür ederim ziyaretiniz için :)

Yanıtla
avatar

bunu eklersek yazının sonunda gözükecek mi
www.hadisevi.blogspot.com

Yanıtla
avatar

anlatım icin tşkler
uygulamayı sorunsuz şekilde gercekleştirdim
ama sorun var malaasef paylaş alt sıralı ve logolar gözükmüyor bunun bir cözümü varmı acaba?

http://i.hizliresim.com/m6NOV1.jpg

Yanıtla
avatar

sorunsuz çalışıyor canlı örneği bende. Bir yerde yanlışlık yapıyor olmalısınız tekrar deneyin.

Yanıtla
avatar

Denedim , yapamadım. Yardımcı olabilir misiniz acaba?

Yanıtla
avatar

yapamadığınız yer tam olarak neresi ?

Yanıtla
avatar

ctrl f ile aradım aradım body var da "post body" çıkmıyor :(
zaten "bunları da okumak ister misiniz i de yapamadım ;(
thegoodwish.blogspot.com.tr

Yanıtla
avatar

yaptım gayet güzel oldu, ancak sadece "kayıtlar"daki sayfaların altında görünüyor. Ben "sayfalar" olarak yayınladığım yazılarımın altında da görünmesini istiyorum. nasıl yapabilirim?

Yanıtla
avatar

Anlattıklarınızı harfiyen yaptım ancak olmuyor görünmüyor paylaşımlar yardımcı olabilir misiniz?

Yanıtla
avatar

Mükemmel paylaşım olmuş. Bloğunuzu takip ediyorum.

Yanıtla
avatar

sosyal paylasımların seo konusunda etkisi cok önemli birde bunun yanında emoji ile oylama kodu var paylaşabilirmisin admin..

Yanıtla
avatar

birde emoji ile tepki verme kodu paylaşırsan çok sevinicem, takipteyim..

Yanıtla
avatar

ekledim çalışıyor teşekkürler admin.. bakkal amca:)

Yanıtla
avatar

Merhaba ben kodları ilgili yere ekledim ancak halen blogger'ın varsayılan paylaş butonları gözükmeye devam ediyor.

Yanıtla
avatar

Öncelikle blogger-yerleşim-blog kayıtlarını düzenle yolunu takip edin ve paylaşım düğmelerini kapatın. Sonrasında uygulayın olacaktır.

Yanıtla

Yorumlarda Kod vs. Kullanmak İÇİN
  • Lütfen sadece bu konuyla ilgili yorumlarınızı bırakınız.
  • Yoruma kod eklemek için <i rel="code"> kodu bunun yerine yazın </i>
  • Daha uzun kod eklemek için <i rel="pre"> kodu bunun yerine yazın </i>
  • Tırnak işareti kullanmak için <i rel="quote"> yorumu bunun yerine yazın </i>
  • Resim eklemek için <i rel="image"> resim url </i>
  • Video eklemek için [iframe] URL embed kodunu buraya yapıştırın [/iframe]
  • Sonra aşağıdaki butona basın ve kodları dönüştürün.
  • © 2015 Blog Bakkalı ✔