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/AVvXsEjUNN0yvCzHgWORtJXptBryjE9FZ4JCHAX-G-7Q7yey7Aqisn54YHdVps24xN1wMa1yXK2s8IiXltWSti7Fa4H9LALKdSWPz4SgWLhm93rG7HwC1B3QUH01QYuwQH2-mfRELMatHAnK_6sI/s1600/btrix-facebook-icon.png);

}

ul.social_btrix li.abtwitter {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_F-2swAcDO_zUm9a0veXCuTriQHxAslIZqOxPZao0BP_YXbpy_OxbRPEbO5Qyhtp25CHiSGJ8UlRTMZka_mkJWik4k8YmZdFRUKUQTqXl0_kas8NGPKI9_9v-jD4HCO0BArXyoZW5t0ii/s1600/btrix-twitter-icon.png);

}

ul.social_btrix li.abgoogleplus {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpA6iCHT9L6to8ipUXe-d-LLK5mbDob7kmbMNB84AqHHaFBm0eFcq5rNNCXfLPysnwfEfC6fdEFYY8KUBj2WlNyjc16fpZ6ku8Ib0Px5kBa-8mMQxEG0wdFbcyLalfQyNFEVrxjuyS-aqH/s1600/btrix-google-icon.png);

}

ul li.abpinterest {

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

}

ul.social_btrix li.ablinkedin {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQCHFy1Ylor8jEVOVsJHjK0Z1hwMWvsfFSu0JHVRwvJ0rOb47TXwVqMemVKlM7WDcT0z6Ruj6wRLlGTY4fu3XxCsb8KgXMhdigIQ5GyBWCXzrkIhoiwxAEg20byfn-X9F5qUnFiVGZkggi/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.

0/Yorum Yapabilirsiniz/Yorumlar

1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın. (Hemen silinir!)
3. Yazım ve dil bilgisi kurallarına uymaya çalışın lütfen.

Daha yeni Daha eski