Cara memasang LikeBox AutoHide

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

Assalamualaikum Wr.wb

Hari ini kita akan belajar bagaimana menambahkan like facebook seperti box hide untuk blogger dengan  tampilan yang khas, sangat indah dan menarik perhatian para pengunjung (paling loh), di mana  facebook seperti kotak  tersembunyi di sisi kanan layar (auto hide) dan hanya menunjukkan Judul "Facebook" klik panel tersebut untuk membukanya,dan cara untuk menambahkan widget ini ke blog Anda, ikuti dua langkah sederhana ini:


Untuk DEMO nya ada dibawah ini :

Demo

Langkah-langkahnya sebagai berikut :

✎Langkah Pertama :
1. Login ke akun Blogger sobat.
2. Pergi ke  Blogger Dashboard → Template → Edit HTML
3. Gunakan  Ctrl+ F  untuk mempermudah pencarian  dan cari Kode </head>
4. Kemudian Copy & Paste kode dibawah ini tepat di atas atau sebelum Kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/> 

5. Klik Simpan → Simpan template
6. Selesai, Next langkah kedua

✎Langkah Kedua :
1. Pergi ke  Blogger Dashboard → Tata Letak  → klik "Add a gadget" .
2. Pilih " Html/Javascript " dan tambahkan kode yang diberikan di bawah ini.

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ57-P7NtJk-g4iG2MrOGFDuc8uGU1KpqDsj05z_RQIQVxFEjsOORD7ffCiR50xiSEGN0j54YRAK70PpGe4r-TOVppjKgKh28RjbfKRfCevq4_QO_ppO74BhjUYNq_2BZKjzglT2iDh-k/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style="">     <div>     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/blog.apadanya&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://ilu5i.blogspot.com"> Limited Edition</a></a></span>     </div> </div>

3. Klik Simpan → Simpan setelan.
4. Selesai.

✍ Catatan :
Ganti  blog.apadanya dengan URL halaman facebook Anda atau nama pengguna.

Sekarang Anda dapat melihat hasilnya :D
semoga sukses ya, kalau gak sukses bisa ditanyakan dikotak komentar yang berada dibawah :D
Sekian,

Wassalamualaikum Wr.wb