Beautiful Social Sharing Widget

Biar gak ngehabisin durasi sekarang mari kita bahas cara Menambahkan Beautiful Social Sharing Widget Di Bawah Postingan di Blogger sobat, cekidot . . .

1. Masuk ke akun blogger sobat.

2. Pada Dasbor klick Rancangan ➨ Edit HTML ➨ CentangExpand Template Widget.

4. Selanjutnya sobat cari kode <data:post.body/> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

5. Jika sudah ketemu sekarang copy  kode berikut dan paste atau letakkan di bawah kode tadi.
NB : Jika sobat menemukan dua atau tiga kode <data:post.body/> pilih kode yang ke dua, dan letakkan di bawahnya, ok!

<b:if cond='data:blog.pageType == "item"'>


<style>
.promote_post_bg {
    height: 103px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtollQBPmcXSBZla3uI3s_L94Qd35ahH5ibvX7SoH8THBgQHUAN9tYcDm9RM1H6ojOBgeV7Rktobvl2Cz2Q3pX19KagUV7_LhyphenhyphenYfiShrQIN7avWTCLZDsn30OxAM4vKemf2vqLPrf7zdE/s1600/otowebsite-sharing-widget.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>
    <div class='promote_post_bg'>
        <div class='promote_twitter'>
            <a class='twitter-share-button' data-via='otowebsite' 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 expr:href="data:post.canonicalUrl" layout='button_count' send='false'
                show_faces='false' font="verdana" action="like" colorscheme="light"></fb:like>
            <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'></g:plusone>
            <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>
</b:if>

6. Simpan Template.

Jika sobat meletakkan di bawah kode <data:post.body/> tapi tidak muncul maka sobat cukup cari kode <div class='post-footer-line post-footer-line-1'/> dan letakkan kode pada langkah lima di atasnya.

Saya rasa cukup untuk kali ini, Semoga berhasil !