25 Temmuz 2012 Çarşamba

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

Unknown 04:55 Blogger Eklentileri Hiç yorum yok :

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/AVvXsEgxIDWJ_U6K3dw2o5ORHq6po19CXleclATLMEBA-QeYQ62CwHU3ko0nsOH0gcAdv87_Q4J1ljpfci2GRwiHGgBxgvNBNCL2wSu_Vy_84O_7hohmckLWOAuFBZ-n3FtU2NfxmxYHxxwF8FY/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>