Cara membuat Kotak Like Facebook Page Menempel di Sisi Blog

Kotak Like facebook page ini cukup keren dan cukup unik, karena facebook pageatau halaman facebook akan muncul jika kursor pointer di arahkan ke kotak atau tulisan facebooknya, dan akan menutup kembali jika kursor mouse di arahkan ke tempat lain. Memang sudah banyak yang memakai widget ini, namun tidak ada salahnya jika saya kembali menuliskan artikel tentang cara bagaimana membuat widget facebook likebox yang menempel di sisi blog ini, siapa tahu ada sobat blogger yang belum tahu dan ingin membuat widget seperti ini.

                                                                                                                                                    

Widget ini menurut saya sangat cocok diterapkan pada blog yang banyak widgetnya di sidebar. Sehingga tidak begitu banyak memakan tempat. Dari segi estetika keindahan tampilan blog juga cukup bagus. Cara memasangnya juga cukup mudah karena tidak perlu masuk ke edit HTML, hanya tinggal menambahkan gadget di sidebar.

Untuk live demonya bisa sobat lihat di sini
Oke langsung saja kita ikuti tutorial cara membuat kotak like facebook page menempel di sisi blog.

1. Masuk ke akun blogger > Rancangan > Tambah Gadget > pilih HTML/Javascript.
    copy paste kode di bawah ini:

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHHHCm15cbpChJOUaSaO6EWKiY4qNo7lCCiOt1gUUFQ3HbiD-2Z2jmplj6HuWFgb0zqlmNGBoT4cqe-X_9sYilTRPPCHWNJddkLGxf-zbwogudJk1QrCzfCVDUJZFjfOlbyOPGGMFTPy_5/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fcaramembuatblogspot&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://blogbelajar2.blogspot.com/2012/04/cara-membuat-kotak-like-facebook-page.html">Belajar Ngeblog</a></span></div></div>

 2. Klik Pratinjau, lalu simpan template. Selesai.

Catatan:

Silahkan ganti kata caramembuatblogspot dengan username halaman facebook sobat sendiri. 

Terima kasih dan semoga bermanfaat !

Thanks for reading & sharing Kumpulan Artikel