Membuat widget fans page facebook melayang

Diposkan oleh Label:
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 dahuluOk 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/AVvXsEjNJF7QjixYi98Yc3tDfRsFjQKUJMMimBHbEcc2iaWgTnR99ZcpF0uFXB5o4wSxFWD8sWMDIKC0UoUVSPFKp0MFZZSjKKsv3wrX6XtRA6wXfXgMnmGKrn_TlEc4EE9InVU117gcihF1ZlY/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/minemana.blogspot&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.

No comments:

Post a Comment

~ ATURAN BERKOMENTAR ~

1. Dilarang menulis link aktif
2. Dilarang ngiklan di kolom komentar
3. Komentar yang hanya titip link, akan dimasukan ke kotak SPAM
4. Berkomentar sesuai tema artikel, untuk OOT sebaiknya cari tempat lain

Terima kasih telah berkomentar.