Blog Yazıları İçin Sosyal Paylaşım Kutuları
Burada paylaşacağım eklentide Twitter, Facebook ve Google’a ait paylaşım düğmelerini CSS srprite özelliğinden faydalanarak ayrı ayrı kutulara koyarak blog yazılarımızın sonuna yerleştireceğiz.Oldukça şık ve dikkat çekici olduğunu düşündüğüm bu sosyal paylaşım kutularını yazılarınızın sosyal medyada paylaşım sayısını arttıracaktır.
Eklentiyi blogunuza eklemek için şablonunuzdan <div class='post-footer'> kodunu bulun ve hemen altına aşağıdaki kodları ekleyin.
<b:if cond='data:blog.pageType == "item"'>
<style>
.promote_post_bg {
height: 103px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSABUYiAul29Nt6_IUe16BjT18aHOowdsuKtBzVUo4zotAapnWPTu5gjEzIEO0vSGvq0utj209ktLlt6GfWPPzoAcEcSGyiYlOuJejKVY6R77WdcQ52BK7HtqrrR86531feOcY-rTMncw/s516/paylas.png) 0 -7px no-repeat;
width: 500px;
margin-left: 65px;}
.promote_twitter {
width: 130px;
height: 38px;
float: left;
margin: 0 39px 0 0;
padding: 65px 0 0 13px;
text-align: center;}
.promote_facebook {
width: 115px;
height: 40px;
float: left;
margin: 0 39px 0 0;
padding: 63px 0 0 28px;
text-align: center;}
.promote_google {
width: 65px;
height: 40px;
float: left;
margin: 0 39px 0 0;
padding: 65px 0 0 28px;
text-align: center;
}
</style>
</b:if>
<div class='promote_post_bg'>
<div class='promote_twitter'>
<a class='twitter-share-button' data-via='helperblogger' href='https://twitter.com/share'>Tweet</a>
<script>
!
function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = "//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script></div>
<div class='promote_facebook'>
<fb:like action='like' colorscheme='light' expr:href='data:post.canonicalUrl' font='verdana' layout='button_count' send='false' show_faces='false'/>
<div>
<b:if cond='data:post.isFirstPost'>
<script>
(function (d) {
var js, id = 'facebook-jssdk';
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</b:if></div>
</div>
<div class='promote_google'>
<g:plusone annotation='none' size='medium'/>
<script type='text/javascript'>
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script></div>
</div>
Alternatif sosyal paylaşım butonları için şu yazılarıma göz atabilirsiniz:
Güzel paylaşımlarınız için teşekkür ediyorum.
YanıtlaSilGüzel yazılar faydalı eller için sağlıcakla yazın :::..
YanıtlaSilPeki bunu ekleyınce blogun kendı paylasım butonları gidicek mi ?
YanıtlaSil@Mesut AKTUN
YanıtlaSilHayır, onlar siz silmediğiniz sürece gitmez.
AddThis yardımıyla kendi sosyal paylaşım butonlarımı hazırladım. Fikir kökü sizsiniz :)
YanıtlaSilçok tşkler
YanıtlaSilhocam benim bloğum
YanıtlaSilincelemeportaali.blogspot.com
div class='post-footer' kodunu html içerisinde bulamıyorum nedeni ne olabilir. Yardımcı olursan çok sevinecegm
yukarıda "Widget Şablonlarını Genişlet" seceneği war onu işaretle
YanıtlaSilgüzelde seninki gibisini nereden bulcaz ?
YanıtlaSilİşte bende bunu arıyordum, süper fakat ben şu HTML kodlarının içine girmeye korkuyorum, her seferinde yapıyorum ama yinede korkuyorum :)
YanıtlaSilkodlarda değişiklik yapmaya gerek var mı ?
YanıtlaSil