Cara Membuat Widget FP (Fans Page) Facebook Melayang

Cara Membuat Widget FP (Fans Page) Facebook Melayang - Selamat datang kembali di Pelajar Blogger! Dikesempatan kali ini Pelajar Blogger akan memberikan sebuah tutorial mempercantik Blog dengan cara membuat Widget FP melayang di Blog. Tetapi sebelum anda membuat Wdget FP melayang di Blog, sebaiknya anda memiliki FP ( Fans Page ), tapi diharapkan FP itu adalah FP Blog anda, karena FP juga bisa membantu mempromosikan Blog anda dan sekaligus menambahkan pengujung untuk Blog anda. Untuk membuat FP-nya, silahkan klik Cara Membuat FP (Fans Page) Di Facebook. Oh iya, Demo untuk hasil dari Widget FP melayang ini silahkan perhatikan/klik gambar dibawah ini.

Gambar diatas adalah Demo atau screenshot widget FP melayang milik Pelajar Blogger, apakah anda juga ingin memasangnya? Jika ingin, terlebih dahuli buatlah sebuah FP. Jika anda sudah mempunyai FP, silahkan ikuti Tutorialnya dibawah ini dengan teliti.

1. Loggin ke Blog anda.

2. Masuk ke Edit HTML lalu centang Expand Widget Template.

3. Lalu, cari kode </head>

4. Lalu letakan kode dibawah ini tepat diatas/sebelum kode </head> tadi.

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

5. Klik simpan.

6. Lalu anda menuju Tata Letak lalu Tambah Gadget.

7. Pilih Javascript/HTML lalu letakan kode 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("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.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/PelajarBloggerPb &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><span><a href="  http://pelajar-blogger.blogspot.com/2012/10/cara-membuat-widget-fp-fans-page.html  "><b>Get Widget</b></a></span></div></div>

" KODE YANG BERWARNA MERAH GANTI DENGAN URL FANS PAGE ANDA"

8. Terakhir klik simpan.