Cara Membuat Share FB Widget Keren

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

Sreenshot :

1. Log in ke blogger
2. Klik Rancangan
3. Edit HTML
4. 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'/>.sesuaikan saja dengan keinginan sobat.

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/AVvXsEhLGIvh_85q6g8WxNCNrF4_8_a6znDfOGG9Ct93KDNNx9zVeejvFnGGcq480iVouDH90BCklAvh-qsaD5E-3FawM4SdL6fuBPKxXVtnUND1QowZMLdQmVdMfwhp2Hx6-SwhXc1OFBozOG4/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 Berhasil Sob...