Auti Hide Fans Page Facebook di samping kanan Blog

Tujuan Blogger memasang sebuah fans page facebook di blog biasanya agar banyak mendapatkan LIKE oleh pengunjung blog tersebut. ada banyak tipe memasang fans page di blog salah satunya dengan membuat fans page melayang di tengah-tengah blog atau hanya memasang widgetnya saja di navigasi blog.

pada kesempatan kali ini saya akan berbagi tutorial cara membuat auto hide fans page facebook di samping kanan blog, untuk lebih jelasnya lihat contoh gambar di bawah ini.

dengan memasang fanspage Hide facebook di samping blog itu akan membuat blog anda semakin keren, cara kerjanya cukup simpel ketika pengunjung mengarahkan mouse/kursor ke arah logo facebook yang menempel di side bar sebelah kanan maka secara otomatis fans page facebook anda akan tampil.

1. copy 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("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.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=https://www.facebook.com/komunitasbloggerIndonesiaa&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><b><a target="_blank" href="http://otowebsite.blogspot.com/2012/04/cara-membuat-facebook-like-auto-hide-di.html">Get this widget</a></b></span>

    </div>

</div>

Catt : ganti tulisan yang berwarna merah dengan url fans page facebook anda.