12 Haziran 2013 Çarşamba

BH Okuyucularına Özel Sosyal Paylaşım Butonları Kutusu

26 yorum

Yazılarınızın sosyal ağlarda paylaşılmsı hem ziyaretçi sayınızın artması, hem de SEO açısından çok önemli. Bunun için blog yazılarınızın altına mutlaka sosyal paylaşım butonları eklemelisiniz.

Blogger’ın kendi paylaşım butonları olmasına rağmen efektifliği ve dikkat çekiciliği tartışılır. Sosyal paylaşım butonlarınız okuyucunun ilgisini ne kadar çok çekerse yazınızın paylaşılma ihtimali o kadar artar. Bu yüzden Blog Hocam okuyucularına özel sosyal paylaşım eklentisi kodladım. Eklentiye en popüler sosyal ağlar olan Facebook, Twitter, Google+, Pinterest ve LinkedIn butonlarını ekledim.

 

Sosyal Paylaşım Butonları

 

Bu sosyal paylaşım butonlarını blogunuza eklemenin 2 aşaması var. İlk olarak Şablon > HTML’yi düzenle yolunu izleyin ve Ctrl + F tuş kombinasyonunun yardmıyla ]]></b:skin> kodunu bulun. Bu kodun üzerinde bir yere aşağıdaki stil kodlarını ekleyin.

 

/* Blog Hocam Sosyal Paylaşım Butonları Eklentisi */
#bh-paylas {
border:1px dotted #000;
padding-left:65px;
background: #ffc039;
padding-top:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

ul.bh-sosyal {
list-style:none;
display:inline-block;
margin:auto;
}
ul.bh-sosyal li {
display:inline;
float:left;
background-repeat:no-repeat;
margin:auto;
}
ul.bh-sosyal li a {
display:block;
width:50px;
height:50px;
padding-right:40px;
position:relative;
text-decoration:none;
}
ul.bh-sosyal li.bh-facebook {
background-image:url(https://lh5.googleusercontent.com/-JLfuSKykzKo/VCAE0bfHhzI/AAAAAAAALCk/S22NVeaImtA/s48/Facebook.png);
}
ul.bh-sosyal li.bh-twitter {
background-image:url(https://lh6.googleusercontent.com/-qzc9NDO1By4/VCAE0_XWIAI/AAAAAAAALCY/WvWgk1h6mW4/s48/Twitter2.png);
}
ul.bh-sosyal li.bh-googleplus {
background-image:url(https://lh4.googleusercontent.com/-ZqCBN69o3E4/VCAE0SHiZaI/AAAAAAAALCc/v5Nn_l0_ZWg/s48/Google%252B.png);
}
ul.bh-sosyal li.bh-pinterest {
background-image: url(https://lh6.googleusercontent.com/-I9KiNkQjXOE/VCAE0orP4aI/AAAAAAAALCU/zoDpDFCrn-c/s48/Pinterest.png);
}
ul.bh-sosyal li.bh-linkedin {
background-image:url(https://lh6.googleusercontent.com/-uyM4tazl7qY/VCAE0SkEB1I/AAAAAAAALCQ/b3bvQJNLeIs/s48/Linkedin.png);
}

 

!!! Resimde gördüğünüz gibi sosyal paylaşım butonlarının olduğu kutunun arka plan rengi turuncu. Bu renk her blog tasarımına uyguhn olmayabilir. Eğer değiştiirmek isterseniz #ffc039  yerine başka bir renk kodu yazabilirsiniz.

 

İkinci aşama için yine Ctrl + F tuş kombinasyonuyla açılan arama kutusunu kullanarak <div class='post-footer'> kodunu bulun ve hemen üzerine aşağıdaki HTML kodlarını ekleyin.

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bh-paylas'>
<ul class='bh-sosyal'>
<li class='bh-facebook'>
<a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'/>
</li>
<li class='bh-twitter'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'/>
</li>
<li class='bh-googleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'/>
</li>
<li class='bh-pinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'/>
</li>
<li class='bh-linkedin'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'/>
</li>
  </ul></div>
</b:if>

 

!!! <div class='post-footer'> kodunu aradığınızda birden fazla sonuç çıkar ve sadece biri doğru koddur. Eğer HTML kodlarını ekledikten sonra sosyal paylaşım butonları gözükmüyorsa yanlış yere eklemişsiniz demektir. Diğer yeri deneyin.

26 yorum:

  1. Güzel butonlar hocam. Bende yeni bir tane yaptım.
    bu resimdeki gibi
    Saydam görünüyor. Üzerine gelince netleşen bir görüntüye sahip. Blog Hocam okuyucuları denemek isterlerse kodları verebilirim. Tabi Blog Hocamında müsadesi olursa...

    YanıtlaSil
  2. Estağfurullah ne müsadesi :) Fayda sağlamak isteyene BH sayfaları açık :)

    YanıtlaSil
  3. @Caramba CArambita ben kodları almak isterim.

    YanıtlaSil
  4. Dediklerinizi yaptım bnde olmadı.'Soyut' şablon kullandığımdan mı acaba...

    YanıtlaSil
  5. Wordpress'te çalışır mı? Nasıl ekleyebilirim?

    YanıtlaSil
  6. Bloğuma uyguladım harika oldu teşekkürler.

    YanıtlaSil
  7. @Fahrettin Karabıyık
    Yazının sonunda belirttiğim uyarı dikkate alarak tekrar deneyin. Her şablonda çalışır.

    YanıtlaSil
  8. @ilker küçük kodları iletişim adresinize gönderiyorum.

    YanıtlaSil
  9. Yazılarımın başlığında h1 etiketini kullanıyorum bu yüzden baylaşınca başlığı etiketle birlikte alıyor bunun çözümü var mıdır?

    YanıtlaSil
  10. Çok güzel olmuş ellerine sağlık bloghocam

    YanıtlaSil
  11. anlatım ve paylaşımınız güzel olmuş

    YanıtlaSil
  12. merhaba :) blogunuzu çok beğenerek okuyorum sadece temanız fazla sade :) Ben nasıl bu kadar yorum ve ilgi kazandığınızı merak ediyorum. Kaç aydır blogegrdeyim en çok okunan yazım 550 kere erişildi :) (bakıldı) geri dönerseniz sevinirim :)

    YanıtlaSil
  13. Hocam bu çok iyi oldu teşekkürler :)

    YanıtlaSil
  14. Çok şık butonlar. Blog Hocam'ı takip ediyorum sürekli yararlı paylaşımlar var. Çok yardımcı oluyorsunu teşekkür ederim..

    YanıtlaSil
  15. sementit temasını kullandığım için ''bu yazıyı beğendinizmi'' eklentisi mevcut bloguma eklediğimde üst üstte gözüküyorlar. eski kodları silmeye çalıştım ancak hata verdi tam olarak nereyi silmeliyim

    YanıtlaSil
  16. div class='post-footer'> buldum temada üstüne değil altına yerleştirmişsiniz kodun.

    YanıtlaSil
  17. Serdar hocam, bu sosyal paylaşım kutularının üstüne "Bu yazıyı arkadaşlarınızla paylaşın." yazısını nasıl ekleyebilirim? Farklı renk kodlarını yazabilir misiniz? Teşekkür ederim.

    YanıtlaSil
  18. @Kelimehan Deniz
    "Bu yazıyı paylaşın" yazısını direkt <div id='bh-paylas'> satırının üzerine ekleyebilirsiniz.

    YanıtlaSil
  19. çok beğendim :) çerçeveside çok işe yaradı
    http://sakasuka.blogspot.com/

    YanıtlaSil
  20. Konu başlığı altında olsun isterseniz < div class='post-header-line-1'/> kodunun altına ekleyin. Tema da iki tane var bu koddan 2cisinin altına ekleyin.

    YanıtlaSil
  21. Sayenizde yaptim oldu. Tesekkurler

    ikigezgin.blogspot.com

    YanıtlaSil
  22. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  23. hocam b:skin eklentisini bulmuyor

    YanıtlaSil
  24. Blog hocam pinterest butonu calismiyor... Lutfen control edermisiniz?
    ikigezgin.blogspot.com

    YanıtlaSil

Picardes

LİNKLER