Cara Membuat dan Pasang Widget Fans Page Facebook Melayang ~ komputer dunia

Tentu Anda sudah mempunyai fans page Facebook - halaman khusus Faceebook yang dibuat bagi penggemar atau fans sebuah blog atau website. Untuk membuat dan pasang widget fans page facebook di blog, sebelumnya Anda harus sudah mempunyai halaman page fans di Akun Facebook atau membuatnya dahulu di akun facebook Anda dan catat alamat url fans page facebook tersebut.

Ada banyak cara memasang widget fans page Facebook di blog, ada yang statis (diam), melayang (float), hiding (tersembunyi) atau yang lainnya. Secra default bila Anda membuatwidget fans page Facebook di blog akan terpasang secara statis baik itu berada di sidebar atau footer.

Tutorial Blogger proBlogiz kali ini akan sharing tip dan trik desain blog Cara Pasang Widget Fans Page Facebook Melayang atau Floating Keuntungan Widget Fans Page Facebook melayang (float) akan memberi tampilan blog menjadi lebih profesional dan menhemat ruang halaman page pastinya.

Membuat dan pasang widget fans page Facebook melayang -pada kali ini 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 Blogger >>> Edit Template >>> edit HTML
tekan F3 untuk pencarian >>> cari kode </head>
letakkan kode script jquery tepat diatas </head>
Save Template

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=http://www.facebook.com/pages/ProBlogiz/146818852122783 &&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 : http://www.facebook.com/pages/ProBlogiz/146818852122783

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 :