Cara Membuat Like Box Facebook dengan Efek Hover Jquery

Like Box Facebook Seperti Kotak dengan Efek Jquery untuk blogger, ini merupakan salah satu widget keren hanya seperti Twitter Badge Statis Ikuti saya, tapi di sini saya menambahkan seperti kotak dengan Efek Jquery. Anda bisa lihat tampilannya Disini ketika mouse digerakan.

Berikut  langkah yang sangat sederhana: yang sebelumnya harus anda tambahkan Plugin Jquery JavaScript.

 

Anda bisa(Abaikan langkah ini jika blog Anda sudah punya Plugin jquery).

Jika anda blog anda belum terpasang plugin jquery silahkan copy paste code dibawah ini:

1. Pergi ke Dashboard Blogger Edit Html.
2. Mencari Code </head> tag.
3. Tambahkan dan masukkan kode dibawah ini Sebelum Code </head> tag.

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

4. Silahkan Copy Paste Code dibawah ini ke HTML/JavaScript.

<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".w2bslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1h5S6NTs1KFec55Tvf3fC4OUd5vofE4wgwgVT-zNxvTWyQKUSvMHiVLMsfAkQCeOvDyY1SCzn9OO_DKR5mW0r10cyRQE8DwILqSvjZ9CUUtt2oaodpuq9s0vRalffJIjL4RWUgm3wzsN/s150/w2b_facebookbadge.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: 7px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: gray;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%2Fway2blogging&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><a href="http://www.way2blogging.org/2011/06/add-static-facebook-pop-out-like-box.html">by Way2Blogging</a></span>
</div>
</div>

5. Code yang saya cetak TEBAL anda ganti dengan Code Like Box Facebook anda.
6. Setelah anda menggantinya lalu simpan dan lihat hasilnya.
7. Sempurna.

Sekian,




Sumber : http://lora-malunk.blogspot.com/2012/03/cara-membuat-like-box-facebook-dengan.html

Author : coxelgokil | ACI BUDAYA

Anda telah membaca artikel tentang : Cara Membuat Like Box Facebook dengan Efek Hover Jquery . Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih... <a href="https://acibudaya.blogspot.com/2013/11/cara-membuat-like-box-facebook-dengan.html" target="_blank">Cara Membuat Like Box Facebook dengan Efek Hover Jquery </a>

Author : Aci Budaya - [Blog Lain]