 |
| Credit img: freepik.com |
Widget ini sebenarnya lebih berguna untuk pengunjung blog anda bahwa ternyata blog anda mempunyai sebuah fans page di facebook. Dalam tata letaknya widget ini pun sangat simple dan tidak membutuhkan banyak tempat. Jadi jika anda telah mempunyai halaman blogspot sobat di facebook, maka membuat Like Box Facebook di blog dapat lebih berguna untuk meningkat like fans page facebook anda.
Berikut langkah untuk membuatnya widget facebook disamping kanan:
Login ke akun blogger anda
Pilih Tata Letak> Tambah Gadget> HTML/JavaScript
Copy paste dan masukan kode dibawah ini
<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnKfK88SrQXOj5D7uxr_JgTQrGtyL0vdxlSu4Th4bA9AGYSN6EYqzNZTVeLL7HwfdMDMMciNuQCEfpMF-FPbU9HhvixJ2ODx8NZ7rNEVQN6odO4ncO6wOrRz9piN3jt9caDx7BM5hARQ8/s1600/vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
(function(w2b){
w2b(document).ready(function(){
var $dur = "medium"; // Duration of Animation
w2b("#fbplikebox").css({right: -250, "top" : 100 })
w2b("#fbplikebox").hover(function () {
w2b(this).stop().animate({
right: 0
}, $dur);
}, function () {
w2b(this).stop().animate({
right: -250
}, $dur);
});
w2b("#fbplikebox").show();
});
})(jQuery);
/*]]>*/
</script>
<br />
<div id="fbplikebox" style="display: none;">
<div class="fbplbadge">
</div>
<iframe allowtransparency="true" frameborder="0" rel="nofollow" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Time-is-Money/416814288418636&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false" style="background: #FFFFFF; border: none; height: 250px; overflow: hidden; width: 250px;"></iframe></div>
Klik Simpan
NB: warna biru bisa diganti dengan URL facebook anda
Selanjutnya pergi ke Template> EditHTML
Copy paste kode dibawah ini tepat diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
Simpan dan selesai.
Semoga bermanfaat.
