Cara mempercantik fan page/like box facebook auto hide di blogspot

Cara mempercantik fan page/like box facebook auto hide di blogspot : Anda bosan dengan tampilan fan page/like box bawaan facebook. Ingin memberikan sedikit sentuhan agar lebih menarik. Mungkin sobat tertarik dengan membuat fan page auto hide seperti gambar di atas. Sebelumnya bungas sudah membuat posting cara membuat fan page/like box facebook, sekarang mencoba berbagi dengan rekan bloger untuk mempercantik tampilan fan page facebook. Cara membuatnya? ikuti langkah berikut :


1. Login ke bloger anda
2. Pilih template,edit HTML dan centang expand template widget
3. Cari kode </head> dan letakkan kode di bawah ini tepat di atas kode </head>

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

4. Simpan template anda. Lalu pilih Tata Letak dan tambah Widget, pilih HTML/javascript
5. Copykan kode di bawah ini ke dalam kolom widget HTML javascript

<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://i1268.photobucket.com/albums/jj568/Azby_Mabra/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/pages/Bungas-Blogs-Comunity/305562852841376&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe></div></div>

Kode berwarna merah pertama adalah url dari gambar silahkan ubah dengan gambar pilihan anda, kode berwarna merah kedua adalah url halaman akun facebook anda silahkan anda ganti.

6. Simpan widget dan lihat hasilnya

4.5