30 Aralık 2013 Pazartesi

YAZILARINIZIN ALTINA SOSYAL PAYLAŞIM BUTONLARI EKLEYİN

sosyal medya ve sosyal paylaşım butonlarını sitene ekle
Blogunuzda yayınladığınız yazılarınızın hemen altına sosyal paylaşım butonları ekleyerek. Ziyaretçilerinizin beğendiği yazılarınızı kolayca beğenmesi ya da paylaşmasını sağlayabilirsiniz. Bunun için ise öncelikle Blog Yönetim Panelinden ŞABLON / HTML'yi DÜZENLE yazısına tıklıyoruz. HTML kodlarınızın bulunduğu sayfada CTRL+F yaparak <div class='post-footer'> kodunu arıyoruz. Genelde iki tane bulunur. Hemen altında <div class='post-footer-line post-footer-line-1'/>  kod dizilimi yer alır. Eğer blogunuzda yazılarınızın altına Adsense reklam kodu yerleştirdiyseniz yukarıda anlattıklarım size pek yabancı gelmeyecektir. Adsense kod diziliminin hemen üstüne yerleştirmelisiniz. Eğer reklam kodunun altına yerleştirirseniz bu sefer sosyal paylaşım butonları reklamın altında yer alacaktır. Sosyal Medya butonlarının hemen yazının altında yer alması yan sütunda bulunmasına oranla tıklanma yüzdesi daha yüksektir. Eğer <div class='post-footer'> HTML kodlarınızın içinde bulduysanız. aşağıdaki kod dizilimini hemen üstüne yerleştirin.


NASIL YAPACAĞIM
Aşağıdakin kod diziliminin ne anlama geldiğini kısaca anlatalım
1- background: #F1921A sosyal paylaşım butonlarının hemen arkasında yer alan şeridin rengidir. Siz bu rengi istediğiniz gibi değiştirebilirsiniz.
2- KIRMIZI alanda yer alan kod sizin twitter paylaşım butonunuzun kod dizilimi olacak Buraya tıklayarak kendi kodunuzu alabilirsiniz.
3- YEŞİL alanda yer alan kod dizilimi sizin facebook beğen ve paylaş butonunuzun html kodudur. Bu kodu FACEBOOK SOSYAL PAYLAŞIM BUTONU (LİKE BOX) ile ilgili yazımı okuyarak ekleyebilirsiniz.
4- MAVİ alan da ise sizin google plus beğeni html kodunuz yer alacaktır. Buraya tıklayarak kodunuzu alabilirsiniz. Aşağıdaki kodların yerine kendi kodlarınızı girerek Blogunuzun Html kodları içine yukarıda anlattığım gibi ekleyin.

KOD DİZİLİMİ
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div style='text-align:center;margin: 10px 5px 0 0; padding: 4px 10px; color: #fff; background: #F1921A '>

<a class='twitter-share-button' data-dnt='true' data-lang='tr' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script> 

<iframe allowTransparency='true' frameborder='10' scrolling='no' src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fgelecekinternette&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=21' style='border:none; overflow:hidden; height:21px;'/>

<div class='g-plus' data-action='share' data-annotation='bubble'/>
<script type='text/javascript'>
  window.___gcfg = {lang: &#39;tr&#39;};
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/platform.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
</b:if>

Paylaş :

Yazar:

Facebook Yorumlar

3 yorum:

  1. ben html de kodu bulamadım nasıl yapılcağını biraz anlatırmısınız

    YanıtlaSil
    Yanıtlar
    1. HTML kodlarınızın içinde iken CTRL + F yaparak yazıda belirttiğim kodu bulmanız gerekir bazen yokmuş gibi aramada çıkmaya bilir ama mutlaka vardır. Genelde iki tanedir. Siz ikincisinin üstüne yerleştirmelisiniz.

      Sil
  2. Teşekkürler açıklayıcı olmuş

    YanıtlaSil