Tutorial Menambah Like Box Facebook Tersembunyi di Blog

14.50 Posted by RJ-Comp Jogja
Pemirsa yang budiman, Pengguna facebook makin hari makin bejubun penggunanya. hal ini memungkinkan pecinta blogger untuk mempromosikan blog/situs melalui sosial media yang satu ini. Bagi yang sudah memiliki fans page di facebook, Rugi kalau tidak memanfaatkan fasilitas dari Facebook ini. Kalau Bahasa om Uje mah, Gak Gaul Men....
Ada beberapa tampilan dari Like Box facebook ini, sperti yang pernah saya posting sebelumnya. Namun pada tutorial kali ini, saya akan membagikan bagaimana cara untuk membuat Like Box tersembunyi. Hasilnya Bisa dilihat disini. Dengan cara ini juga maka blog anda akan terlihat lebih sedap untuk dipandang. Huh.... Laperrrrr.....
(maklum lagi bulan ramadhan....)

Nah, untuk anda yang ingin membuat Like Box facebook di blog anda dengan tampilan tersembunyi, mari ikuti saya:
1. Log in ke blogger.
2. Klik rancangan
3. Pilih Elemen laman
4. Klik tambah Gadget, (bebas memilih diposisi manapun)
5. Pilih HTML/Java Script.
6. Selanjutnya silahkan Paste-kan kode berikut ini pada kolom yang sudah disediakan. (Gunakan CTRL+C untuk menCopy)
<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/AVvXsEjR9emMOMuaDGbagImapiq7gAgAn6nV_RUJNfEE0ZndPtRRjEfh8_zOIeZu011J6m7lprhZyb2t5ls5aikbls0LX5TaQdNHkVPJ5imSeCmA3J6fGfuaGXuLJP4AJ3R8wJ09841pbmCi5Co/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://www.facebook.com/PerlengkapanTeknisiKomputer&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://www.rjcomp.com/2010/08/tutorial-menambah-like-box-facebook.html" target="_blank">+ Buat Seperti Ini</a></span></div></div>

  Catatan Penting:
  • Ganti kode yang berwarna biru dengan url fans page anda.
7. Selanjutnya, 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>

8. Save template anda.
9. Selamat Menikmati Apa yang telah anda kerjakan