Membuat widget fans page facebook melayang

Hallo sob.., Hari ini saya akans share tentang cara membuat widget fans page facebook melayang di slide bar blog, dengan begitu sobat yang menggunakan template yang minimalis bisa menghemat ruang untuk dipakai keperluan lainnya. Caranya sederhana pertma tentunya sobat harus punya fans page facebook terlebih dahulu, bila sobat belum mempunyai fans page facebook sobat bisa membuatnya dulu, untuk yang belum tahu cara membuat fans page facebook sobat bisa lihat caranya di : Cara membuat widget like fan page facebook, jika sobat ingin membuat comment facebook berada di bawah posting blospot sobat bisa lihat di : cara menambahkan facebook comment ke blogger.
Ok skarang kembali cara membuat widget fans page facebook melayang.
Setelah sobat mempunyai fans pagenya kemudian sobat masuk kedasbor blogger >> Template >> Edit HTML
Setelah itu sobat cari kode </head> lalu letakn kode berikut tepat di atas kode </head> tetapai jika sobat sudah mempunyai kode Jquery sebelumnya tidak disarankan untuk menambahkan kode berikut.

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

Setelah sobat selesai memasukan kode Jquery kedalam template blogger sobat, selanjutnya sobat pilih Tata letak >> Tambah Gadget >> HTML/JavaScript lalu masukan kode di bawah ke dalam widget HTML/Javascript sobat.

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbBbK8Ha9NYp253c3RpUEEymPIh3js1HutjMPQ4sb8oS66LH6BHmIezCCeBq_WpiV0n2lbDyvZSu78_pmCsq6fcX6wz6spkfUJ_vuneC0AUZpdF7es2wKh441pcIlNN7JVpHCRRn1F_fg/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/fajar345blog&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://www.fajar345.com/2012/04/membuat-widget-fans-page-facebook.html" target="_blank">+MAU??</a></span></div></div>

Ganti kode yang berwarna biru dengan url blog sobat. setelah itu simpan dan lihat hasilnya.
Silahkan sobat lihat DEMO untuk mengetahui bentuk widget fans page facebook melayang. Jangan lupa like fans pagenya juga ya :)
Ok mungkin sekian dulu tulisan saya hari semoga bermanfaat.

Sobat suka tulisan ini..?

	Dapatkan Tulisan Gratis Via Email!
Follow Fajar345!