Menambahkan Beautiful Social Sharing Widget Di Bawah Postingan

Blog Oto Website kembali update postingan masih dengan admin yang sama, hehehe . . .
Sebelumnya saya mengucapkan selamat datang kepada para Sahabat O.W yang sudah berkunjung saya ucapkan selamat membaca, mempraktekkan dan jangan lupa untuk komentarnya agar blog ini semakin semangat untuk share setiap hari.

Nah kali ini saya akan update postingan di Blog Oto Website yang bertema atau berjudul Menambahkan Beautiful Social Sharing Widget Di Bawah Postingan, mungkin sobat sering ngelihat tombol berbagi seperti itu-itu aja, dan mungkin blog lain belum pernah share atau membahas tentang yang akan saya share kali ini.

Untuk melihat demonya sobat bisa lihat di bagian bawah postingan ini !

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/AVvXsEj4-pzXcS6iKO9EbZpaNvKQC77jTxKGOcGE5ETWO01tJFgxJCr9zbNAR7cTc2Eg-hOJAfnFWE0CTpf6r_bMy-1SyU4GHzqqwywAPSYWCL2Zcdf6uhvEt01Tm6Ymx3__yxB-vMUUMobJeU8/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 !
Jangan lupa untuk meninggalkan komentarnya yuaaaaa!

Demo ▼

Tweet