Floating Facebook Like Box

Biasanya kita memasang FB Like Box ini di sidebar atau bottom bar. Tentunya hal ini bertujuan supaya blog atau web kita lebih dikenal, dan akhirnya traffic akan meningkat. Akan tetapi apabila kita scroll mouse ke atas atau bawah, FB Like Box pastinya ini tidak terlihat. Atau mungkin kita kebingungan untuk menempatkannya, karena kehabisan space.

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/AVvXsEjovD407pzLaJc6tWFQ2viU0B9gemaBLh7URuh0NzwfKzWM7DGkRBIARUUJMyvIvid1d9fyFUuIualCJ4VOaUObgZm137cszRU_V_iUV7Sn_Qe3r2MuNCw1wzN9ePqDDuNX1LCxcSf80Sw/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%2FnakPagongan&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://gelungparon.blogspot.com/2012/08/floating-facebook-like-box.html" target="_blank">+Get This!</a></span></div> </div>  

3. Ganti http%3A%2F%2Fwww.facebook.com%2FnakPagongan dengan url Facebook Fan Page milik Anda. 

4. Save

Lihat Hasilnya.....