Lunatic`Invades™: Floating Facebook Like Box

Floating Facebook Like Box

Floating Facebook Like Box atau bisa juga diartikan Kotak Suka Facebook yang Melayang (kedengarannya cukup aneh memang) . . 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 Lunatic.art.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.

1. Login ke Blogger
2. Klik Dasbor>Pilih Rancangan>Klik Edit HTML
3. Kemudian Cari kode </head>
4. Simpa code di bawah ini di atas code </head>

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

Catatan : Abaikan langkah yang di atas bila Template kalian sudah trinstall 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">//</script><style type="text/css">.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0E5U7E0cGw-ZKupwpXU0S_yA5l_WCvN36n8-RjNbkb93myVWZfyTL0i0_alcDMq1aALp4jYXtXLudk4KCXqGLqRHRUI_X7M-9-JWcNWlOlsTBl6bVYe1ERqdMsqNDWbGxKhHY3VugU7o/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><br /><div class="floatinglikebox"><div><iframe allowtransparency="true" src="//www.facebook.com/plugins/likebox.php?href= http://www.facebook.com/pages/Lunatic-Invades/300710303338569 &width=251&height=270&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=159468740772399" frameborder="0" scrolling="no" style="background: #fff; border: none; height: 270px; overflow: hidden; width: 251px;"></iframe><a href="http://blog.kangismet.net/2011/11/membuat-floating-facebook-like-box-di.html" target="_blank">+Get This!</a></div></div>