0 Cara Tambahkan Widget Sharing Keren dibawah halaman posting Blogger

 

Widget bookmark sosial adalah cara paling mudah buat meningkatkan lalu lintas di blog Anda. Hari ini kita berbagi berbagai macam widget bookmark sosial tetapi yang satu ini sedikit berbeda dari yang lainnya, karena masing-masing tombol memiliki tombol yang berbeda background. Ini berisi tombol tweet twitter, seperti tombol facebook dan tombol google +1. Anda hanya perlu menambahkan beberapa potongan kode di template Anda. Coba lihat dari widget ini gulir ke bawah, Anda akan temukan demo di bagian bawah posting, juga tidak lupa untuk menggunakannya :) Sekarang tanpa menunggu lagi mari kita lihat bagaimana untuk menambahkannya ke blog kita.

1. Pergi ke Blogger Dashboard> Template
2. Mengambil cadangan dari template Anda
3. Klik Edit HTML
4. Tekan tombol Lanjutkan
5. Periksa kotak centang Perluas Widget Template.
6. Cari kode di bawah ini dalam template Anda,

<div class='post-footer-line post-footer-line-1'/>

tambahkan potongan kode dibawah tepat di atas itu,

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

<style>

.promote_post_bg {

    height: 103px;

    background: url(https://lh3.googleusercontent.com/-AK_TNwyWxJw/T8XDa2Q6TpI/AAAAAAAAB04/UCczorSYj0s/s1600/helperblogger.com-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='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 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>

Sekarang simpan template Anda dan selesai.

Saya harap kalian semua pasti akan berhasil seperti ini .Enjoy :)  Have a nice day .... 

Demo ▼