Penulis: Moch Adnan dipublikasikan: 11 Juni 2023
Cara Membuat Widget Facebook Likebox Show And Hide (Slider)
Cara Membuat Widget Facebook Likebox Show And Hide (Slider)


Moch Adnan Blog - 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.
Cara Membuat Widget Facebook Likebox Show And Hide (Slider)

Demo
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.

Cara Membuat Widget Facebook Likebox Show And Hide (Slider)

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlf4jon_dOMmFZFCxEPfSMjOawAHnjlmPJ5m9n50YDWJTtgCLChDycM1hikVa0zWa_zBc_yR4rNs0k_3-4MNO7G_EbNYUQxqxggXhV72vetAJmmETPzJJ7l3UxJnTFMsYZ-k_0_ZSXsta1/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/MochAdnanBlog&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