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 ^-^

Cara Memasang Widget Like Button Facebook Pada Blog

1. Buka tab baru pada browser sobat, kemudian copy paste alamat ini sobat http://www.facebook.com/pages.
2. Jika halamannya sudah muncul, klik buat halaman, Nanti akan muncul banyak pilihan, Pilihlah sesuai keinginan anda sob.
3. Masukkan alamat blog sobat. Jangan lupa ceklist kemudian klik mulai.
4. Pada halaman berikutnya akan muncul dua pilihan yaitu saya sudah punya akun facebook dan saya tidak punya akun facebook. Jika belum punya silahkan buat dulu, jika sudah punya ceklist saya sudah punya akun facebook kemudian masukkan e-mail dan kata sandi sobat kemudian klik masuk.
5. Halaman selanjutnya akan terbuka. Pada halaman ini silahkan atur foto profil sobat dan sedikit deskripsi tentang blog sobat.
6. Jika sudah maka akan terbuka halaman selanjutnya.
7. Halaman Fans Page sobat sudah jadi, sekarang tinggal memasukkan kedalam blog sobat.
8. Buka tab baru pada browser sobat kemudian copy paste alamat ini  http://developers.facebook.com/docs/reference/plugins/like.
9. Jika halamannya sudah terbuka alihkan perhatian sobat pada sidebar kiri. Pilih tab like box.
10. jika halamannya sudah terbuka kembali kehalaman facebook yang barusan sobat buat, copy dulu alamat halaman blog sobat yang berada pada toolbar bagian atas.
11. Jika sudah dicopy kembali pada halaman like box lalu paste alamat tadi pada Facebook Page URL.
12. Silahkan sobat atur ukuran dan segala macamnya disini sesuai keinginan sobat.
13. Jika sudah silahkan klik get code maka akan terbuka banyak pilihan.
14. Ikuti petunjuk yang ada disana.

 SELESAI

MUDAH BUKAN !!

Selamat Mencoba and Good Luck... :)