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.

 

Blog Yazıları İçin Sosyal Paylaşım Kutuları

 

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 == &quot;item&quot;'>
<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 = &quot;//platform.twitter.com/widgets.js&quot;;
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, &quot;script&quot;, &quot;twitter-wjs&quot;);
           
</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 = &#39;facebook-jssdk&#39;;
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement(&#39;script&#39;);
                            js.id = id;
                            js.async = true;
                            js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
                            d.getElementsByTagName(&#39;head&#39;)[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(&#39;script&#39;);
                    po.type = &#39;text/javascript&#39;;
                    po.async = true;
                    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
                    var s = document.getElementsByTagName(&#39;script&#39;)[0];
                    s.parentNode.insertBefore(po, s);
                })();
           
</script></div>
</div>

 

Alternatif sosyal paylaşım butonları için şu yazılarıma göz atabilirsiniz:

11 yorum:

  1. Güzel paylaşımlarınız için teşekkür ediyorum.

    YanıtlaSil
  2. Güzel yazılar faydalı eller için sağlıcakla yazın :::..

    YanıtlaSil
  3. Peki bunu ekleyınce blogun kendı paylasım butonları gidicek mi ?

    YanıtlaSil
  4. @Mesut AKTUN
    Hayır, onlar siz silmediğiniz sürece gitmez.

    YanıtlaSil
  5. AddThis yardımıyla kendi sosyal paylaşım butonlarımı hazırladım. Fikir kökü sizsiniz :)

    YanıtlaSil
  6. hocam benim bloğum
    incelemeportaali.blogspot.com
    div class='post-footer' kodunu html içerisinde bulamıyorum nedeni ne olabilir. Yardımcı olursan çok sevinecegm

    YanıtlaSil
  7. yukarıda "Widget Şablonlarını Genişlet" seceneği war onu işaretle

    YanıtlaSil
  8. güzelde seninki gibisini nereden bulcaz ?

    YanıtlaSil
  9. İş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ıtlaSil
  10. kodlarda değişiklik yapmaya gerek var mı ?

    YanıtlaSil

Blogger tarafından desteklenmektedir.