Cara Membuat Efek Slide Facebook Fan Page Like di Blog

 

Sobat, kebetulan saya ada waktu sedikit untuk memposting artikel yang menarik. Tentunya kita akan membuat widget facebook fan page like yang melayang disamping blog, atau biasanya disebut floating facebook fan page. Script jquery yang kita gunakan ini akan memberikan efek yang manarik yaitu sliding efek ketika didekatkan dengan cursor, dan akan menutup apabila cursor menjauh. Previewnya dapat anda lihat pada gambar disamping. Dengan memasang widget ini pada blog dijamin facebook anda akan semakin banyak fannya alias penggemarnya. Untuk memasang script ini sangat mudah, hanya membutuhkan beberapa langkah saja. Jadi bagaimana tertarik untuk membuatnya....? Kalau begitu ikuti tutorialnya berikut ini:

1. Sobat harus buat Halaman Facebook dulu lihat disini http://www.facebook.com/pages.

2. Setelah selesai di buat , lalu buka blog anda masuk ke Design --> Edit HTML.
3. Carilah kode </head>.

4. Letakan script jquery dibawah ini diatas kode </head>.

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

5. Simpan template anda.

6. Masuk ke Elemen Halaman lalu klik Tambah Gadjet.

7. Pilih HTML/Javascript.

8. Masukkan kode berikut ini:

<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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1jLrlcWpnXCUZkLuxAajfhdp82LfumTwpuUIySBSWgargCe-7piB4JxZVnQYiYqDSdDlbakZzGUVqKTR8Br0B6ScjUZpKzMv25xUm1qS1zWA4XbPTx3Nffk1PJl-BjFaNqn44gz1AkJe0/s150/w2b_facebookbadge.pn") 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%3A%2F%2Ffacebook.com%2Fhafizdodolblogspotcom&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 style="color:#fff;">Widget by: <a style="color:#fff; font-weight:bold" href="http://hafizdodol.blogspot.com/">Hafiz</a></span></div></div>

8. Ganti tulisan berwarna merah (dengan nama halaman Facebook anda) , berwarna biru (dengan alamat blog anda) dan yang berwarna hijau (dengan nama anda).
9. Simpan gadjetnya.

Selesai sudah , selamat mencoba semoga trik n tips ini bermanfaat untuk anda ^-^