Home » , » Cara Membuat Like Box Facebook dengan Efek Hover Jquery

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("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/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.


Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

+ komentar + 5 komentar

7 Maret 2012 11.42

please follow back me di http://subhanagung.net

Terimakasih Subhan Agung atas Komentarnya di Cara Membuat Like Box Facebook dengan Efek Hover Jquery
14 Maret 2012 15.15

Yang ini bagus gan untuk mempercantik blog

Terimakasih Hasan Basri atas Komentarnya di Cara Membuat Like Box Facebook dengan Efek Hover Jquery
21 Maret 2012 00.16

keren, bagus niy :-p

Terimakasih Blogger Palembang atas Komentarnya di Cara Membuat Like Box Facebook dengan Efek Hover Jquery
23 Maret 2012 20.57

DICOBA YA GAN

Terimakasih Rudy Hartono atas Komentarnya di Cara Membuat Like Box Facebook dengan Efek Hover Jquery
1 Desember 2012 23.17

woww.. Kerenn nih gan tampilannya :)

Terimakasih Aditia Novit atas Komentarnya di Cara Membuat Like Box Facebook dengan Efek Hover Jquery

Posting Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger