Cara Membuat Kotak Like Facebook Melayang di Blog

  Selamat Sore Bloger Indonesia, Kali ini saya Akan Posting Triks membuat Kotak Page / Like Box di Blog, Pungsinya Agar kita dapat like dari Pengunjung, syaratnya yaa pengunjung blog mengklik Like di box tersebut tentunya,,, Langsung saja berikut Step by Stepnya.....
 
Pertama-tama, Agan siapkan dulu kode HTML Iframe Fanspage Facebook yang sudah sobat peroleh dari https://developers.facebook.com/docs/plugins/like-box-for-pages/.

Langkah Kedua, Sobat buka Tata Letak di Dasbor Blog Agan.

Langkah Ketiga, Sobat klik "Tambahkan Gadget". Sesuaikan letaknya agar widget ini terlihat rapih di blog Agan.

Langkah Keempat, Sobat pilih HTML/Javascript. Lalu Setelah itu Agan Copy Kode dibawah ini:

<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -182px;
width:310px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
cursor:pointer;
}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-facebook').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='kotak-facebook'>
<p style=" margin-right:10px; font-size:15px; color:#000000;">Please Bantu Saya,<blink>Like This !!!</blink> </p>
<!-- Mulai --!>

---KODE HTML FANSPAGE SOBAT---

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="URL BLOG SOBAT">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="URL BLOG SOBAT">Get This Widget</a></p>
</div>

Oh Ya.. agan juga bisa ganti tulisan-tulisan tersebut dengan:

Tulisan Merah dengan Kode HTML Fanspage Sobat tadi. 

Tulisan Hijau dengan Alamat URL Blog Sobat.

Tulisan Biru dengan Kata-kata yang akan Sobat sampaikan.

Bagaimana gan, sudah paham Cara Membuat Kotak Like Facebook Melayang di Blog? Terkadang Pengunjung merasa terganggu dengan adanya widget ini. Untuk itu, Sobat atur se-kreatif mungkin agar pengunjung tidak merasa terganggu dengan widget ini.

Sumber: ikubarunovryan.blogspot.com