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 








Posting Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top