Media sosial merupakan peran yang sangat penting bagi setiap blog atau website. Dengan bantuan media sosial, itu bisa mendapatkan lebih banyak traffic, pengunjung dan pembaca ke blog atau website kalian. Setiap media sosial memiliki tombol share yang unik yang dirancang oleh pengembang mereka. Oleh karena itu, kita perlu menambahkan tombol berbagi sosial di blog atau website kita untuk mendapatkan lebih banyak traffic, pengunjung dan pembaca. Hari ini, saya akan berbagi kepada kalian gaya yang lain. Hal ini berbeda dari yang lainnya karena tombol masing-masing memiliki latar belakang yang berbeda. Kalian ingin menambahkan widget ini di bawah posting blog kalian blogger, maka cukup ikuti langkah-langkah yang diberikan di bawah ini.
Langkah Langkah Memasang Widget
- Login ke Blogger Dashboard
- Template >> Edit HTML >> Tunggu Proses >> Klik "Expand Widget Template"
- Sekarang cari kode <data:post.body/> atau bisa juga di <div class='post-footer-line post-footer-line-1'/> paste kode di bawah ini di bawahnya
<b:if cond="data:blog.pageType == "item"">
<style>
.promote_post_bg {
height: 103px;
background: url(http://1.bp.blogspot.com/-0XK7JZR6VAw/UIC9BwXIMyI/AAAAAAAAAN4/NjbbeWgyV5M/s1600/Cool+Social+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="tbloggertricks" 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 action="like" colorscheme="light" expr:href="data:post.canonicalUrl" font="verdana" layout="button_count" send="false" show_faces="false"></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 nya dan lihat hasilnya
