Membuat Like This Facebook Di Blogger

Floating Facebook Like Box atau bisa juga diartikan Kotak Suka Facebook yang Melayang (kelihatannya sich gaya, tapi emang bneran gaya gan) . . hehehe.....kali ini saya ingin mencoba memberikan sedikit tutorial tentang Trik Cara Membuat Floating Facebook Like Box di Blog, seperti yang dahulu pernah terlihat di sebelah kanan pada blog milik kangtaka.blogspot.com. @_@

Dengan menggunakan Floating Facebook Like Box pada Blog tentu saja akan semakin menghemat ruang pada blog kita selain itu blog kita pastinya juga akan terlihat lebih rapi dengan fitur like box facebook yang memang sengaja kita sembunyikan,,

Untuk anda yang ingin mempraktekkannya langsung saja, ini dia cara pembuatan Floating Facebook Like Box di Blog.

Cara Menambahkan Jquery Plugin

1. Login ke Blogger

2. Klik Dasbor>Pilih Rancangan>Klik Edit HTML

3. Kemudian Cari kode

</head>

4. Tambahkan kode dibawah ini tepat diatas kode </head> tadi

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

Catatan: Abaikan langkah ini apabila template anda sudah terinstall Jquery Plugin.

Cara Menambahkan Kode HTML pada Widget

1. Klik Dasbor>Pilih Rancangan>Klik Tambah Gadget>HTML/JavaScript

2. Copy kode dibawah ini

<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/AVvXsEgrXzYmRVEjrxHtWG2BsP8gAoLmH7t6L9Ge9spUrK6QV4pgseTSGKRKyJZgAg9aSx9VYDKPanSn-Xwl9Og8Rxm81CbJFAW3AzHejK_ULz1EinKEwePwhEQWyEGm8fmPg-OLzAh6q6x6c00/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%3A%2F%2Fwww.facebook.com%2Fpages%2FKANG-TAKA%2F363758240312594&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://kangtaka.blogspot.com/2012/03/membuat-like-this-facebook-di-blogger.html" target="_blank">+Get This!</a></span></div></div>

3. Ganti http%3A%2F%2Fwww.facebook.com%2Fpages%2FKANG-TAKA%2F363758240312594 dengan url Facebook Fan Page milik Anda.

4. Save

Mohon Dibaca!!!

Sebelum menyimpan URL Facebook milik anda, sebaiknya ganti dahulu kode-kode yang terdapat pada URL.

: dengan %3A
/ dengan %2F

Misalkan URL Facebook anda :

http://www.facebook.com/pages/fbanda/123456

Anda rubah menjadi

http%3A%2F%2Fwww.facebook.com%2Fpages%2Ffbanda%2F123456

Membuat Gambar Melayang di Blog

Gambar melayang adalah gambar yang letaknya selalu tetap dan tidak terpengaruh oleh scrool mouse. Maksudnya kita dapat membuat gambar seperti melayang di kanan, kiri, bawah, atas walaupun Scrollbar ditarik kemana-mana. Dan bukan hanya gambar yang bisa Anda pakai di posisi gambar melayang ini, tapi counter, Status YM, iklan dan lain-lain.

Sebelumnya back up dulu template Anda, agar jika terjadi kesalahan dan template blog Anda tidak rusak. Berikut step-step yang harus sobat lakukan :

1. Login ke Acount blogger anda.
2. Masuk pada Pengaturan.
3. Pilih Tata letak.
4. Pilih Edit html.
5. Cari kode ini ]]></b:skin> truz copy paste kode di bawah ini di atas kode ]]></b:skin>
   
   

   #melayang {
   position:fixed;_position:absolute;bottom:0px; left:0px;
   clip:inherit;
   _top:expression(document.documentElement.scrollTop+
   document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

6. Berikutnya cari lagi di dalam template anda kode </body> Kemudian copy pastekan code dibawah ini dan letakkan diatas kode </body>.
   
   

   <div id='melayang'>
   <a href='http://ifoell.blogspot.com/'>
   <img border='0' src='http://i437.photobucket.com/albums/qq96/bloganakbangsa/benderamerahputih.gif'/></a></div>

7. Simpan, Selesai deh....