YAZI ALTINA SOSYAL PAYLAŞIM BUTONLARI EKLEME

Blogger da tasarladığınız blogda her Yazı Altına Sosyal Paylaşım Butonları ekleyerek makalelerinizi daha çok ziyaretçiye ulaştırabilirsiniz. Blogunuza uğrayan ziyaretçilerinizin makalelerinizi sosyal paylaşım sitelerinde paylaşmalarını sağlayabilirsiniz.

Bu widgeti blogunuza ekleyerek facebook, twitter, googleplus, pinterest, linkedin gibi sosyal paylaşım sitelerinde sizin yazılarınız paylaşılabilir. Böylece sosyal medyadanda sitenize daha fazla ziyaretçi çekebilirsiniz.

Gelelim yazı altına sosyal paylaşım butonlarının nasıl ekleneceğine

Öncelikle her ihtimale karşı blog şablonumuzu yedekliyoruz.

• Blogger yönetim paneline giriş yapıyoruz
• Şablon html düzenle butonuna tıklıyoruz
• ]]></b:skin> kodunu CTRL+F ile aratarak buluyoruz
• Bulduğumuz kodun bir üst satırına aşağıdaki kodları ekliyoruz.

ul.social_btrix {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_btrix li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_btrix li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_btrix li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul.social_btrix li.abfacebook {
background-image:url(http://4.bp.blogspot.com/-nJMUyZUi2SM/UaXEnGYtwWI/AAAAAAAAAkM/SXrQ4Q8ASoA/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(http://4.bp.blogspot.com/-_18_qzg7sHs/UaXEnVKS3aI/AAAAAAAAAkY/UYLCvEQuOEI/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(http://2.bp.blogspot.com/-DpI_6iUH6GY/UaXEnB83lFI/AAAAAAAAAkQ/Q6QtGamgL_E/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(http://2.bp.blogspot.com/-tMeDXWRp5VY/UaXEmVQIGDI/AAAAAAAAAj0/FrLLKtGE8j0/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(http://2.bp.blogspot.com/-HaUpL3wjx3I/UaXEmf3UVSI/AAAAAAAAAj4/cHVj0FALvgk/s1600/btrix-Linkedin-icon.png);
}
#animation_btrix:hover li {
opacity:0.2;
}
#animation_btrix li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_btrix li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_btrix li:hover {
opacity:1;
}
#animation_btrix li:hover a strong {
opacity:1;
top:-10px;
}

• Daha sonrada <data:post.body/> kodunu aratıyoruz ve bu kodun hemen altınada aşağıdaki kodları yapıştırıyoruz. Eğer sosyal paylaşım butonlarının yazınıın üst kısmında bulunmasını isterseniz aşağıdaki kodları <data:post.body/> kodunun hemen üst satırına yapıştırabilirsiniz.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
    <ul class='social_btrix' id='animation_btrix'>
    <li class='abfacebook'>
    <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'><strong>Facebook</strong></a>
    </li>
    <li class='abtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='abgoogleplus'>
<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'><strong>Google+</strong></a>
    </li>
    <li class='abpinterest'>
<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'><strong>Pinterest</strong></a>
    </li>
    <li class='ablinkedin'>
    <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'><strong>LinkedIn</strong></a>
    </li>
<a href="http://ekis-ekgelir-affiliate.blogspot.com/" target="_blank">ek iş</a>
    </ul>
</b:if>

En son olarak ta kaydet butonuna tıklayarak yazı altına sosyal paylaşım butonları eklemiş olacaksınız.