18.8.14

Cara Membuat Widget Facebook Likebox Show And Hide (Slider)

Cara Membuat Widget Facebook Likebox Show And Hide (Slider)
Kembali ke rutinitas ngeblog, kali ini saya ingin membagikan cara membuat widget Facebook Likebox Show and Hide. Widget FB likebox ini sesuai dengan namanya yakni show and hide, yaitu akan tampil atau terlihat ketika tersorot oleh kursor, dan akan menghilang atau tersembunyi tatkala tidak tersentuh oleh kursor (kebalikannya). Yang mana widget ini tersimpan melayang dibilah kanan blog, sangat pas untuk anda yang ingin mempersempit tampilan widget, jadi anda bisa meminimalisir tempat penyimpanan widget-widget tersebut, dalam sidebar blog anda.

Sebelumnya bagi anda yang belum mengetahui tentang cara membuat facebook likebox, saya persilahkan untuk membaca tulisan saya sebelumnya, yakni tentang cara memasang facebook like box di blogger
karena disana saya juga menguraikan tentang tata cara registrasi ketika pertama kali anda membuat fans page.

Baik, tanpa berpanjang lebar lagi berikut ini adalah tahapan - tahapan membuat widget Facebook Like Box Show and Hide (Slider) untuk Blog

Langkah #1 Tambahkan widget baru, Login ke blogger >> Tata letak >> Add a gadget >> HTML/JavaScript. Lalu copy dan pastekan kode berikut ini kedalamnya.

<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("http://1.bp.blogspot.com/-XyYjgghpO7A/TwqccHW47QI/AAAAAAAACSU/OvETkV56ui8/s1600/%255Bwww.gj37765.blogspot.com%255Dfacebook_right.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: 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=https://www.facebook.com/pages/Moch-Adnan-Blog/1459227174288855&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe></div></div> <span><a href=http://www.mochadnan.com/2014/08/cara-membuat-widget-facebook-likebox.html">Get this widget</a></span>
Ganti Tulisan yang berwarna merah dalam kode tersebut, dengan menggunakan ID fans page anda.
 Klik Simpan

Langkah #2, Pilih Template >> Edit Html. Kemudian cari kode seperti berikut dalam template entri blog anda, </head> jika sudah menemukannya, silahkan copy dan simpan kode berikut ini kedalam template tepat diatas kode  </head>

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

Demikianlah cara membuat Facebook Like box Show and Hide, akhir kata saya ucapkan selamat mencoba dan selamat menikmati hari anda

→ About the author

Moch Adnan adalah Admin Blog yang mempunyai ketertarikan dengan Dunia Blogging,kamu bisa Menemukan saya dan memfollow saya di Google + Twitter Facebook


Terima Kasih Telah Membaca Artikel Cara Membuat Widget Facebook Likebox Show And Hide (Slider) . Jika Anda tertarik dengan artikel seperti ini, silahkan untuk berlangganan artikel Gratis dengan cara mengetikkan alamat e-mail anda pada kotak berlangganan berikut:
Subscribe via Email

2 komentar

mantap dah artikelnya saya mau coba mas

http://acemaxs31.com/
http://apotekgumilar.com/
http://acemaxs86.com/

Trima kasih Kunjungannya Kawan :D

Silahkan tinggalkan komentarnya
Mohon untuk tidak memasukkan link hidup dalam berkomentar