468x60 Ads

Widget Floating Facebook Fan Page

Axdxo90 | 11:58 AM | ,

Beberapa hari yang lalu, saya menemukan skrip keren yang akan menampilkan Fan Page Facebook mengambang di sisi kanan website / blog. Script ini berdasarkan jQuery dan memberikan efek slider yang sangat bagus. Menyembunyikan Fan Page di dalam wadah dan membukanya hanya bila pengguna melayangkan kursor pada tombol mengambang. Jadi mari kita tambahkan gadget Floating Facebook Fan yang menakjubkan ini pada halaman situs / blog Anda. Saya buat langkah instalasi menjadi sangat mudah, cukup ikuti langkah-langkah di bawah ini dengan benar. Saya juga telah menambahkan screenshot dari gadget ini. Anda dapat melihat Demo Live di sisi kanan halaman ini.





1. Pergi ke Layout tab ---> lalu Add a Gadget.



2. Pilih "HTML/JavaScript" Gadget

3. Paste code di bawah ini ke dalamnya.

<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/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.pn") 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=http%3A%2F%2Ffacebook.com%2Fcyberkidzpage&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 style="color:#333;">Widget by: <a style="color:#333; font-weight:bold" href="http://axdxo.blogspot.com">Cyberkidz</a></span></div></div>
4. Ganti cyberkidzpage dengan nama Facebook Fan Page Anda.

5. Save gadget Anda.

6. Pergi ke Blogger Dashboard click pada ---> Template tab ---> Edit HTML lalu klik Proceed.

7. Sekarang Anda klik pada centang Expand Template Widget.

8. Carilah kode </head> dan tepat di atasnya paste-kan kode jQuery berikut. (Lewati langkah ini jika anda sudah menambahkan script jQuery pada template Anda sebelumnya).
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
9. Simpan template, lalu lihat blog Anda!

Semoga gadget Floating Facebook Fan Page akan menarik pengunjung blog Anda. Kode ini dikembangkan oleh Harish dan di share kembali oleh Cyberkidz


Cyberkidz, Ardho Ika Yudhistira



0 comments:

Post a Comment