Cara membuat Kotak Like Facebook Page Menempel di Sisi Blog

Kotak Like facebook page ini cukup keren dan cukup unik, karena facebook page atau 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><br /> <br /> <style type="text/css"> .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7gNPQ7DwNdy1DTU-tp94SwTg3lR5Hr-8FGw29K-TeTtnNO3Wp23ngXwB04NN7cc636wT8adGMajMOAmuVVBCezwasD0pl9Qiun8aJTdN1ljPBGZaCvWmdCoYFuRoVbPkqf9xcLayuJqBZ/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> <br /> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fcaramembuatblogspot&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&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://www.super-gaptek.com/>Super Gaptek</a></span></div> </div>

 2. Klik Pratinjau, lalu simpan template. Selesai.

Catatan:

Silahkan ganti kata caramembuatblogspot dengan username halaman facebook sobat sendiri. Untuk mengetahui cara merubah username halaman facebook silakan buka artikel cara mengganti username akun facebook.

Nah bagaimana... sudah jadi khan... hehehe, Happy Blogging !!! 

Artikel yang berhubungan :

Cara membuat like share facebook, tweet, google plus melayang 

Cara memasang kotak komentar facebook di blog

Cara memasang like facebook tweet di bawah postingan blog