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 ada 2 Langkah yang sangat sederhana

Langkah 1: Menambahkan 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/AVvXsEgwXvcz5_x-aB9Vs-Qgkhtnn2AP745nWQCewAEKcbJnIsa-E2ElKofq5J2sinKVkiSAof6SLN42zoeZcZLzfFa5oZArPiOI7lCbkeBgX-tUmx6VbJ6_REY6pzIDSxPv6Xar0Nhyu972qEqj/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.

TERIMA KASIH TELAH MEMBACA ARTIKEL INI 

Tinggalkan Komentar sebagai tanda anda telah mengunjungi kami, Kami akan jaga silaturahmi anda dengan memberi anda kunjungan balasan dan komentar.