Yazılarınıza Paylaş Butonu Ekleyin - 2

Blog tasarımımızda olması gereken en önemli kısımlardan birisi okuyucularınızın yazılarınızı paylaşacak butonları sitenizde olmasıdır.Bunun için bizler de yazı sonlarına ya da yazı başlığının altında facebook , twitter ve google plus paylaşım butonları ekliyoruz.İnternette araştırma yaparsanız bu butonların farklı versiyonlarını bulacaksınız.Değişik tipte olanları sitemde zaten paylaşmıştım.Bu yazımda ise resimde göreceğiniz üzere yine farklı tip paylaş butonlarını sitemize nasıl ekleriz onu paylaşacağım.

Paylaş butonlarını her zaman olduğu gibi iki adımda yükleyeceğiz.İlk olarak butonların özelliklerini CSS olarak ekleyece ve sonra blogdaki yerini göstereceğiz.O zaman hemen başlayalım:

paylas-buton

>>Yazı Başlığının Altına Sosyal Paylaşım Butonları Ekleyin

>>Kayan Sosyal Paylaşım Butonları Ekleyin

Blogger hesabınıza giriş yapın ve Şablon  Html Düzenleme sayfasına gelin.

Aşağıdaki kodları ]]></b:skin> kodunun üstüne kopyalayın.

.share-buttons li { list-style: none; float: left; padding-right: 20px; padding-bottom: 10px; } .sharetitle { float: left; font-size: 51px; font-weight: 900; text-transform: uppercase; line-height: 60px; padding-right: 10px; color: #2aa4cf; } .sharetitle2 { float: left; margin-left: -112px; margin-top: 50px; font-size: 20px; text-transform: uppercase; font-weight: 900; Color: #8a8c8e; } .sharetitle3 img { float: left; padding-right: 20px; padding-left: 10px; padding-top: 5px; } .share-buttons { padding-top: 20px; }
.like-cm{margin-top:15px;width:10px;height:10px;background:url(http://lh6.ggpht.com/-smRIL9DaITs/UM9cIp-I8bI/AAAAAAAABeM/wAw1Z1sgj78/s10/like.png) no-repeat}
#social img:hover {opacity: 0.6;}

Daha sonra bu kodları nereye ekleyeceğinize göre aşağıdaki kodları farklı yere ekleyebilirsiniz.Örneğin yazı sonuna eklemek istiyorsanız

<div class='post-footer-line post-footer-line-3'>

Kodunu bulun ve hemen altına aşağıdaki kodu ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-buttons'>
<div class='sharetitle'>Beğen</div> <div class='sharetitle2'>Paylaş</div><div class='sharetitle3'><img src='http://2.bp.blogspot.com/-4ApGF_JO_qk/UTnLsoO4CaI/AAAAAAAAAl0/P6iiO0wsj6o/s1600/racka1.png'/>

</div>
<li><a class='twitter-share-button' data-count='vertical' data-related='' data-via='mtrucosblogger' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a></li>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<li><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;

width=55&amp;action=like&amp;font=arial&amp;

colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:70px; height:62px;'/></li>
<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone expr:href='data:post.url' size='tall'/> </li>
  </div>
</b:if>

Sarı renkli kısımı kendinize göre değiştirebilirsiniz.Eğer yazı başlığının altına yerleştirmek istiyorsanız da

<div class='post-header-line-1'/>

kodunun altına ekleyebilirsiniz.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

9 yorum:

  1. Özellikle sosyal paylaşım butonları güzel olmuş.

    YanıtlaSil
  2. dostum bende calısmadı aynen dedıklerını uyguladım ama

    http://doctorsilent.blogspot.com/

    YanıtlaSil
    Yanıtlar
    1. Hiç bir şey görüntülenmedi mi?Herhangi bir hata aldınız mı ?

      Sil
  3. Merhabalar,
    Ben hazır blogger teması indirmiştim ve hazır olarak postların üzerinde Tweet ve FB Like butonu bulunmakta. Fakat anlamadığım şey, insanlar like yaptığında fb'taki hayran sayfamdaki ilgili postta o like'lar görünmüyor. Nasıl bağlantı kurabilirim yardımcı olabilir misiniz?
    neylenegider.blogspot.com

    YanıtlaSil
    Yanıtlar
    1. Merhaba
      Biri yazınız diğeri ise facebook paylaşımınız.Yani farklı olduğu için ikisindeki toplam beğeni sayısı görünmeyecektir.Mesela ben yazınızı facebook da paylaşsam bende görünmesi lazım ama facebook bunları toplayamıyor

      Sil
    2. Çok teşekkürler cevapladığınız için. Yani bloğumdaki post u beğenilmesi yalnızca popülerliğini arttırıyor. Facebook için büyük bir teknik açık aslında.
      Zevkli bloglamalar! :)

      Sil
  4. Sayın poyraz bey burda verdikleriniz yazıyı paylaştırmıyor sadece diyer sosyal alandaki sayfalarınızı beyğndiriyor yani ziyaretcinin sizi takip etmesini sağlıyor ,ben özellikle yazımın diğer sosyal paylaşım sitelerinde paylaşılmasını istiyorum bu konuda yardımcı ola bilirmisiniz.Teşekkürler.

    verdiğiniz faydalı bilgiler için teşekkür ederim sizler sayesinde kurduğum siteler

    http://kekborektarifleri.blogspot.com.tr/

    www.dostmutfakyemektarifleri.com

    http://yasamdankucukhikayeler.blogspot.com/

    YanıtlaSil
    Yanıtlar
    1. yukarıda bahsettiğim diğer linklerdeki yazıları deneyebilirsiniz.Sanırım buradaki faceook butonu paylaş değil de beğen butonu.Ondan sıkıntı çekiyorsunuz

      Sil
  5. Çok teşekkür ederim çok işime yaradı :)

    YanıtlaSil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.