Hai sob........
Hari ini saya akan berbagi tentang cara
membuat widget fans page facebook melayang di slide bar blogspot atau pun blog-blog yang lainnya , dengan begitu sobat yang menggunakan template yang minimalis bisa menghemat ruang untuk dipakai keperluan widget lainnya. Caranya sangat sederhana pertama tentunya sobat harus punya fans page facebook terlebih dahulu, bila sobat belum mempunyai fans page facebook sobat bisa membuatnya dulu....
Ok sekarang kita kembali cara
membuat widget fans page facebook melayang.
- langakah pertama yaitu pergi kedasbor blogger >> Template >> Edit HTML
- Setelah itu sobat cari kode </head> dengan cara Ctrl+F
- 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 Jquerynya kedalam template blogger sobat, selanjutnya sobat pilih Tata letak >> Tambah Gadget >> HTML/JavaScript lalu masukan kode di bawah ke dalam widget HTML/Javascript ..
<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/AVvXsEjYg1C-oXRMzj1c_Ir5h0VvqwJjjq06JJWS1Dw2mB8PE1bJL2mqOnQyRrL7Qf5pdXFS05GwfMDHI-9DrVm4dkcbXIQeqFZnw7_ld-9KWsGlI09OPFHtDouYNrXQkd3jcyXKW1t7NKIiFRY/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/spot.blogz&width=251&height=270&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://spot-blogz.blogspot.com/2014/04/cara-membuat-fans-page-facebook.html" target="_blank">+MAU??</a></span></div>
</div>
Ganti kode yang berwarna
biru dengan url fans page facebook sobat. setelah itu simpan dan lihat hasilnya.
Simple kan ??? :D
Selamat Mencoba
