CARA MEMBUAT LIKE BOX DI SISI KIRI BLOG

بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

 Ini dia salah satu widget yang sangat menakjubkan.

Dimana orang-orang selama bertahun-tahun hanya menggunakan  tombol facebook like saja di blog, akan tetapi hari ini saya ingin memperkenalkan dan share ke Anda Cara membuat kotak like facebook melayang di blog (floating facebook likebox).

Floating facebook likebox adalah sebuah slider yang menyembunyikan Likebox di dalam wadah dan ketika visitor (pengunjung) mengarahkan crusor ke tombol  maka akan terbuka kotak Facebook likenya. 

Langkah-langkahnya sebagai berikut:

LANGKAH 1. Menambahkan Plugin JQuery ke Blog Anda : 

1. Masuk ke Dashboard Anda> klik Design (rancangan)> Edit HTML.
2. Cari kode </head> Gunakan Control + f untuk memudahkan pencarian, kemudian pastekan kode jquery  berikut sebelum kode </head>
3. <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
   3. (Abaikan langkah ini jika Anda telah menambahkan Plugin JQuery ke blog)Save (simpan) template. 

 4. Save (simpan) template

LANGKAH 2. Tambahkan floating likebox ke blog Anda :

1.  Buka halaman Tata Letak
2. Klik tambah gadget > pilih tambah HTML/Javascript
3. <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/AVvXsEjBtA1vHkxIm_bIshZNhFnWWqhM2NXNXKAaS3RaCOusIimzK5k0TxUltgzEpAjo-YHQblOJHZl9p66aZb_SuGX29DW3RdpyGU11pC73j0XXhEWoKGOBWGt9NS7xlfT1U8wxhB9qZxJFOHiO/s1600/facebook1.png") 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: 10px;font: 9px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} 
   .w2bslikebox span a{color: #FF9D00;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:///www.facebook.com/pages/Eyang-anom/427305383989192&amp;
   width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=8&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http:/sijalupangna.blogspot.com">Tips dan trik, science dan bisnis</a></span></div></div>
   copy dan pastekan kode script atas ini

Anda bisa mengganti "url fans page facebook Anda" dengan alamat url  fans page facebook Anda sendiri
contoh fans page facebook blog ini : http://www.facebook.com/RivaldoAtthoriqPutraSetyadi?ref=hl.
Sedangkan untuk gambar logo facebooknya seperti "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBtA1vHkxIm_bIshZNhFnWWqhM2NXNXKAaS3RaCOusIimzK5k0TxUltgzEpAjo-YHQblOJHZl9p66aZb_SuGX29DW3RdpyGU11pC73j0XXhEWoKGOBWGt9NS7xlfT1U8wxhB9qZxJFOHiO/s1600/facebook1.png", bisa  diganti dengan koleksi  gambar logo facebook Anda sendiri.
Save template, selesai sudah Cara membuat kotak like facebook melayang di blog (floating facebook likebox).
Semoga bermanfa'at.