Cara Membuat Share Widget Keren

By Unknown

Jumat, 24 Agustus 2012

Intinya share widget ini sama dengan lainnya, hanya tampilannya saja yang berbeda. Sekarang mari kita kupas cara membuat widget share keren. Ikuti langkah berikut.

Log in ke blogger
Klik Rancangan
Edit HTML
Centang Expand Template Widget
Masukkan kode berikut di bawah kode <div class='post-footer-line post-footer-line-1'/>
Kalau tidak cocok, masukkan di bawah kode <div class='post-footer-line post-footer-line-3'/>. sesuaokan saja dengan keinginan saudara. Berikut kode yang harus dipasang.

<b:if cond='data:blog.pageType == "item"'>
<style>
.promote_post_bg{height:103px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDB6Iv0dQK9wsAZphHhATco9QTGV4uLZGBRAzotqQabTH1g5aICNx_wOQSbMsuIE4Njh99levcQh7lNiR4dwXWVZTOEpO1SwrCMhs9UCz-hPuwRcTR_sALGyqesSWl9B249Wa0TBG2QRs/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>

Selanjutnya Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Share :

Facebook Twitter Google+