Membuat Likebox Facebook Tersembunyi dan Menarik Pengunjung

Para blogger sering menggunakan facebook sebagai media promosi blognya. Sebagian dari mereka menggunakan plugin likebox facebook. Kali ini saya akan memberikan sedikit info, agar kita para blogger dapat membuat plugin likebox yang tersembunyi di blog. Seperti gambar di samping.

1. Login ke blogger

2.Klik rancangan  » add gadget » HTML/Java Script.
 

 3.Masukkan kode di bawah ini pada kolom yang sudah disediakan.

 

<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/AVvXsEgoOwXK-SzwtBMwSuc3VwQshugthQFDMTDJMAFz9pyx_BoIrstqSS4-I4wcOGNpYaUyedN05IIeVcl_n8Brs8gzp7sTaxIN_rpmQS-Wetvi9QsfFcZA-htcoySZtX7EhkjXXn3h2HWmaoE/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://maz-template.blogspot.com&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://maz-template.blogspot.com" target="_blank">Ingin widget seperti ini?? Klik</a></span></div></div>

*Keterangan :

• Ganti kode yang berwarna merah dengan url fans page anda.

 4.Pergi ke edit HTML dan letakkan kode dibawah ini di atas kode </head>.

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

Semoga bermanfaat