Memasang FB Like Box Melayang Menarik Pada Blog

Hari ini kita akan belajar cara membuat facebook like box tersembunyi istimewa yang boleh muncul/melayang pada blog kita. Ini berguna jika ingin menjimatkan ruang (terutama sidebar), selain membuatkan blog kelihatan lebih menarik dan kemas. Terdapat beberapa cara untuk membuatnya, sama ada menggunakan widget atau javascript. Tutorial kali ini saya gunakan javascript kerana ianya membuatkan blog kita menjadi ringan.

Ok lah, rakan-rakan boleh ikuti 2 step mudah di bawah:

STEP 1

1. Pergi ke Blogger Dashboard --> Template
2. Backup template kita
3. Kemudian klik Edit HTML
4. Tekan Ctrl+F untuk mencari </head>
5. Copy dan paste kod di bawah di atas/sebelum </head>:

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

6. Save template kita.


STEP 2

1. Sekarang pergi ke Layout--> klik "Add a gadget".
2. Pilih "html/java script" dan tambahkan kod di bawah dan save.

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1LUpBmylf253P3quHxM2h2c6z8VG9_0KYu6ULspE6pzoYCZUpCzqqWKIedM_oGmziP5yl0C6agrrDquXbmNcLPKHfacvLWkFZLMZ6tnzTvQX4OZrWS6j3LIhG98hl8r1d9V8JrWyoVdU/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Feasywebskill&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://www.ezeyblog.blogspot.com"> Ezey Blog</a></span> </div> </div>

Nota: Gantikan easywebskill dengan url facebook page rakan-rakan.
Nah, sekarang lihatlah hasilnya  :d