Blogger Yazı İçine Sosyal Ağlarda Paylaş Butonu Ekleyin

Yazarımız : Adsız Tarih : 15 Temmuz 2013 Pazartesi

Blogger Yazi İçine Sosyal Ağlarda Paylaş Butonu Ekleyin

Blogger eklentileri kategorisinden tekrar devam ediyoruz. Bu yazımızda blogumuzda herhangi bir yazımıza paylaş butonları ekleyeceğiz. Bu sayede ziyaretçileriniz blogunuzda okuduğu makaleleri sosyal ağlarda paylaşabilecek. Üstelik paylaştığımız eklenti çok hoş bir görünüme sahip. İsterseniz anlatıma ve kodlara geçelim.

Aşağıdaki kodu CSS bölümüne ekliyoruz.


#bh-paylas {
width:560px;
height:30px;
}
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;
margin-right:4px;
}
ul.bh-sosyal li a {
display:block;
width:182px;
height:33px;
position:relative;
text-decoration:none;
}
ul.bh-sosyal li.bh-facebook {
background-image:url(http://1.bp.blogspot.com/-dQHwOYDM9VE/Ub4deG_tBzI/AAAAAAAABR8/FgxvbQ5xREg/s1600/facebook.png);
}
ul.bh-sosyal li.bh-twitter {
background-image:url(http://3.bp.blogspot.com/-MGGVJ0DGWjU/Ub4deARZVMI/AAAAAAAABSE/RRIPQvxlHXk/s1600/twitter.png);
}
ul.bh-sosyal li.bh-googleplus {
background-image:url(http://4.bp.blogspot.com/-LgrkzbtK1OM/Ub4deCj49sI/AAAAAAAABSA/Iy9DPbmqjgI/s1600/google+.png);
}

Daha sonra data:post.body kodunu temamızdan buluyoruz ve altına aşağıdaki kodu ekliyoruz.


<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.openundefinedthis.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.openundefinedthis.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:voidundefinedundefinedfunctionundefined)%7Bvar%20e=document.createElementundefined&apos;script&apos;);e.setAttributeundefined&apos;type&apos;,&apos;text/javascript&apos;);e.setAttributeundefined&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttributeundefined&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.randomundefined)*99999999);document.body.appendChildundefinede)%7D)undefined));' 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>