Cara Membuat Facebook Like Auto Hide Di Sebelah Kanan Blog

Ada beberapa cara memodifikasi fanpage facebook , setidaknya kali ini saya akan kasih salah satunya.. Hampir mirip dengan chatbox milik ane yang bisa sobat liat di sebelah kanan halaman ini, widget ini akan muncul di bagian tepi sebelah kanan halaman blog sobat juga.

Tertarik untuk memasang widget fanpage facebook auto hide, ikuti langkah -langkahnya..

Tahap 1

1. log in ke akun Blog sobat.

2. Klik Rancangan --> Edit HTML --> Cari kode </head> ( gunakan Ctrl + F )

3. Letakkan kode berikut di atasnya.
 

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

 4. Klik Save

Tahap 2

1. Klik Elemen Laman

2. Klik Tambah Gadget

3. Pilih HTML/Javascript

4. Masukkan kode berikut ke dalam kotak yang di sediakan
 

<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("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.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: 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://www.facebook.com/OTONKrs&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://jhonsijabat.blogspot.com/2013/09/cara-membuat-facebook-like-auto-hide-di.html">Click this</a></span></div> </div> <br>

 *NB: cari tulisan https://www.facebook.com/OTONKrs dan ganti dengan URL page sobat

5. Klik save dan lihat hasilnya!!

Semoga tips di atas bisa membantu sobat blogger.. Sekian. ^_^

Artikel Terkait:

Belajar Blog

• Cara Membuat Animasi Loading Blog Keren 2013
• Cara Membuat Text Area denngan Background Gambar GIF
• Cara Membuat Buku Tamu/CBox Auto Hide Di Blog
• Cara agar blog tidak bisa di Ctrl+U
• Membuat Change Background Sendiri di Blog
• Friend Banner
• LINK EXCHANGE