Blogger Yazı Altına Paylaş Butonları Ekleme

Blogger yazı içine sosyal medya paylaşım butonu ekleme, yazı altına paylaş eklentisi, yazı içi paylaşım kodları, css ile yazı içi paylaş eklentisi

Yazı altına ekleyeceğiniz paylaş butonlarının öneminden bahsetmeme gerek yok sanırım. Blogger hitinin çoğunu sosyal medyadan karşılamaktadır diyebiliriz. Bu biz bloggerların bakış açısı tabiki.

Bir okuyucu olarak bakacak olursak beğendiği veya arkadaşının işine yarayacağını düşündüğü bir yazıyı paylaşmak isteyecektir. İşte tam burada vereceğim kodlar ile ekleyeceğiniz paylaş butonları sayesinde bu ihtiyacı gidereceksiniz.

Ee ne de olsa bu yazıyı hazırlamak marifet değildir, bunu ne kadar çok kişiye ulaştırdığın ne kadar çok kişinin işine yaramasını sağladığın marifettir.

Gel gelelim eklentimizi nasıl yapacağımıza:

Öncelikle ]]></b:skin> kodunu bulalım ve hemen üstüne

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglZ7RgRProufohGs5FvDdtE6rhpLX15nysq_5w04BXzB8kMPpWSxalqdej2reudfh6aSrvOR7te1M0BOcRimdfICq0jErX2pUkiB9-yqDrVOsytR_HWzjyJjVVY00e3UNEZ0HRYIg74ine/s1600/btrix-facebook-icon.png);

}

ul.social_btrix li.abtwitter {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMIspKXciIfiAx3GXRpX2SPcflzCW8sWz58OpJuox6T_beU5Py3zUrwYg5aWBtF8rsGs2g4K0zu3Xfft0QhgDr5PUrptn1sM1K2O9sPjFsyJYlIg-SKFiO3-URwfAzAJ0zYIVir-oTtsz4/s1600/btrix-twitter-icon.png);

}

ul.social_btrix li.abgoogleplus {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9_RgBPY2d6SozlSaL3ejSr_LX0ZhDgP0nyenmRt7a3PzTq1Xw-j2R0Zxq9kwWYP_FUv7EjtVuVvsoTDqG8rdSe5marr-FZnU_4LSKjlFUkw1gCV7Yw8zLlM7UH8POnK89_0k0GDaLcGG/s1600/btrix-google-icon.png);

}

ul li.abpinterest {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpAm4LTT6ZmwJVLDKyThrCO5doyym-v75xHw4YgJ6XhVGjmie4VjT5meHEl4kqwMB65GI9e7BSn9SIKHUs5_z2pGJvze5xiMH5YK2yWPWy16bkvynAVlIpy6zNdwzQtAOHb7wIIpy6PKjc/s1600/btrix-Pinterest-icon.png);

}

ul.social_btrix li.ablinkedin {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrlRNu1pr2H0sdoneMZ0fwbgP1la217eoKFrn_WaZ3shD0zbt-71vSzQQDmtMmR1giPa59Zs05Qn230y2dyVxmOOUMM0AyGfzD5q2rvX04DSrEVCO9je0pwFcPNlwvi8QIok8ol5VAf-Ot/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;

}

Ardından <data:post.body/> kodunu aratalım ve hemen altına şu kodları ekleyip kaydedelim. 

NOT: <data:post.body/> kodu blogunuzda 1'den fazla olabilir olmaz ise diğerlerini de denemeyi unutmayın.

<center><br/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='font-size: 22px;'><b>Bu yazımı arkadaşlarınızla paylaşın</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>

</ul>

</b:if>

</center>

Eklenti ortalanmış durumdadır. Eğer sola yaslamak istiyorsanız kodun başındaki <center> ve sonundaki </center> kodlarını silin.

Bu yazı Seo Haber tarafından yazılmıştır.