Pasang Widget Fans Page Facebook Melayang pada Blogger

Seperti yang kalian lihat pada sis kanan blog sayaada Widget Fans Page Facebook Melayang Pada kali ini yang  akan share adalah widget float right (melayang di sebelah kanan)- cukup mudah, Anda cukup ikuti panduan  tip dan trik berikut ini.

Langkah Pertama

Tambahkan kode script jquery dibawah ini tepat diatas </head>

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

caranya masuk ke dasbor >>> Edit Template >>> edit HTML
centang "Expand Template Widget"
tekan F3 untuk pencarian >>> cari kode </head>
letakkan kode script jquery tepat diatas </head>

note : backup dahulu template Anda, antisipasi bila terjadi kesalahan
selanjutnya Save Template dan tutup.

Langkah Kedua

buka halaman Tata Letak
klik tambah gadget >>> pilih tambah HTML/Javascript
copy dan pastekan kode script dibawah ini :
 

<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://sites.google.com/site/problogiz/home/fb6.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/eksplorasitanpabatas &&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://problogiz.blogspot.com/2012/09/pasang-widget-fans-page-facebook.html"><b>Get Widget</b></a></span></div>
</div>

Anda bisa mengganti "url fans page facebook Anda" dengan alamat url  fans page facebook Anda sendiri

contoh fans page facebook blog ini : https://www.facebook.com/eksplorasitanpabatas

Sedangkan untuk gambar logo facebooknya seperti "https://sites.google.com/site/problogiz/home/fb6.png", bisa  diganti dengan koleksi  gambar logo facebook Anda sendiri atau kalau berminat saya berikan contoh  logo facebook yang bisa Anda gunakan :

logo fb 1	logo fb 2	logo fb 3

Alamat url untuk cotoh gambar logo facebook diatas :

• url logo fb 1 = https://sites.google.com/site/problogiz/home/fb.png
• url logo fb 2 = https://sites.google.com/site/problogiz/home/facebook.png
• url logo fb 3 = https://sites.google.com/site/problogiz/home/fb3.png

Anda bisa pilih salah satu contoh logo diatas dan letakkan pada kode script diatas kecuali Anda ingin memakai koleksi  logo facebook sendiri.

Setelah langkah diatas selesai maka simpan dan Anda bisa melihat  Widget Fans Page Facebook Melayang kreasi Anda sendiri...

Bagaiman tertarik untuk membuatnya di blog Anda?

Semoga tip dan trik Pasang Widget Fans Page Facebook Melayang ini bisa membantu dan bermanfaat bagi sobat....

Have nice day...

Source: klik