Pasang widget Like fans page Facebook with Smooth Jquery Hover Effect

Wah judulnya panjang amat..!!! udah agan-agan nggak usah pusing dengan judulnya yang penting fungsinya hehe, sebenarnya ane juga pusing mau kasih judul apa ? tapi yah sudahlah hajar aja yang penting nyambung dengan penjelasan Fhikar Note kali ini :D hehe..

"terus ini sebenarnya widget apaan?" ini loh widget ini sebenarnya fungsinya sama dengan Buku tamu yang tersembunyi ito loh, tapi perbedaannya ini khusus tempat facebook like fans page ente..

terus tampilannya mantap dan hmmm aduh gimana yah??
huahh kalo gini jadi ribet jelasinnya kalo gitu langsung lihat demonya aja yah ! klik di sini Demo Live

Nah gimana ? keren nggak?? kalo agan berminat pengen pasang di blog agan silahkan ikuti tutor yang akan ane jelasin ini..

1.Seperti biasa masuk ke blogger
2.Klik rancangan pada blog yang akan agan taruh widget ini
3. Klik "Download Template Lengkap" (ini untuk memBackUp template agan )
4. Beri tanda centang "Expand Template Widget"
5. Tekan Ctrl+F (untuk mempermudah pencarian) dan cari kode: </head>
6.Jika sudah ketemu, letakkan kode di bawah ini tepat sebelum kode </head>

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

Perhatian: abaikan langkah di atas Jika kode diatas telah ada di template agan

7.Save/Simpan template
8.Ini yang terakhir agar menu Info panel-nya bisa nongol di blog agan,
Masuk ke:
> Tata Letak/Rancangan
> ADD New Widget
> Tambah Gadget
> Pilih HTML/Javascript

Kemudian Masukan kode dibawah 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/AVvXsEhmiFCWq6lO4Qz29_YIWyHXp8Yr6R6fbp9c1OwcUbfcSTfzxAJxMjfYesP83YVg1DduHFSQdQxBOYeBOW5wvvpQgSOWYpLHhcph5s8WLWjN9XGNE0GSuDQlHUs08UU3aADrwTuzT98ZcqWZ/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=Ganti TEXT ini Dengan URL Facebook fans page ANDA&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>By <a href="http://fhikar-note.blogspot.com/">Fhikar Note™</a> / <a href="http://fhikar-note.blogspot.com/2011/07/pasang-widget-like-fans-page-facebook.html"> Get This!</a></span></div></div>

9.Simpan

Finish....

Jangan lupa comment kalo merasa artikel ini bermanfaat :)

Ingin mendapat tulisan terbaru Fhikar Note™ langsung ke Email Anda? masukkan alamat email Anda untuk berlangganan, Gratis!

*cek email Anda untuk konfirmasi berlangganan

Artikel terkait....