Cara Membuat Like Box Facebook Melayang

Pagi ini saya share Cara Membuat Like Box Facebook Melayang yang menurut saya cukup menarik untuk blog sobat ( blog saya juga memakai widget yang satu ini ). Widget ini cukup menghemat tempat karena lokasinya disembunyikan di sebelah kanan blog dan otomatis akan keluar jika mouse diarahkan ke icon facebook.

Cara Membuat Like Box Facebook Melayang cukup mudah, seperti biasa sobat login ke dashboard blog sobat >> Template >> Edit HTML, jangan lupa centang Expand Widget Template, namun alangkah baiknya sebelumnya backup dulu template blog sobat agar bila terjadi kesalahan dapat kembali ke template semula. Setelah itu cari kode </head> (gunakan CTRL + F di keyboard untuk memudahkan pencarian), copy kode di bawah ini sebelum kode tadi.

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

Kemudian SAVE template sobat, masuk ke Rancangan >> Tambah Gadget >> Pilih HTML/JavaScript, kemudian copas kode di bawah ini:

<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".likebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.likebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiINe4W2xDJ-MgYnLCc-Pi9eH6nFeLD8raWBj5BuGTm0rwiVpU0ghQvl1z3pWhGO5V4q_O2b1u5BZ-zyxLiSkNM-s9xBkGxat_Ss4ge5DWTchiJUVAWMITxkd_jwol-tbGIACLla3cEy3lE/s1600/fb.png") no-repeat scroll left top transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:44%;}
.likebox div{border:none;position:relative;display:block;}
.likebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}
.likebox span a{color: gray;text-decoration:none;}
.likebox span a:hover{text-decoration:underline;}
</style>
<div class="likebox" style="">
    <div>
 <iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Bit-Inspiration/205186112894226&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><b><a target="_blank" href="http://bitinspiration.blogspot.com/2012/02/cara-membuat-like-box-facebook-melayang.html">Get this widget</a></b></span>
    </div>
</div>

Ganti tulisan berwarna merah dengan url Facebook Page Blog sobat.

Save gadget dan simpan di mana saja. Done.