Cara Memasang Widget Like Box Facebook Melayang di Blog

Cara Memasang Widget Like Box Facebook Melayang di Blog

Memasang Widget Like Box Facebook Melayang di Blog.  Cara seperti ini sangat membuat website anda terlihat menjadi suatu komunitas yang be... 21.58.00

Memasang Widget Like Box Facebook Melayang di Blog. 

Cara seperti ini sangat membuat website anda terlihat menjadi suatu komunitas yang bermanfaat, saling berbagi informasi dan merperkaya pertemanan. Sebelumnya sudah dibahas Cara Menambahkan Facebook Like Button Di bawah Judul Posting. Kali ini ialah Memasang Widget Like Box Facebook Melayang di Blog pengunjung diminta untuk mengklik sebuah kotak apakah dia mau menyukai halaman facebook kita atau tidak / close. Inilah Memasang Widget Like Box Facebook Melayang di Blog :

Tujuan Memasang Widget Like Box Facebook Melayang di Blog

Kelebihan lain dari Widget ini dilengkapi dengan tombol close sehingga pengunjung bisa dengan mudah menutup Kotak Widget ini dan  untuk menutupnya tanpa membuat kesulitan pengunjung yang datang.

Langkah-langkah dibawah ini.
Cara Memasang Widget Like Box Facebook Melayang di Blog
Memasang Widget Like Box Facebook Melayang di Blog

1. Memiliki Sebuah Halaman Facebook. Bila belum ada, silahkan buat dulu. 
2. Buka Akun Blog yang anda kelola.
3. Pada Dasbor Blog anda, masuklah ke Elemen Tata Letak, pilih Add Widget / Tambah Gadget
4. Lalu pilih HTML/Jawascript Selanjutnya copylah kode script di bawah ini ke dalam Widget/Gadget Baru yang anda buat.

<!-- 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;">Klik Saya Dong,<blink> </blink> </p>
<!-- Mulai --!>

<div class="fb-like-box" data-href="http://www.facebook.com/pages/Informasikucom/180052038682199" data-width="292" data-show-faces="true" data-stream="false" data-show-border="true" data-header="true"></div>

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right; margin-right:35px; font-size:10px;" ><a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://thegressnews.blogspot.com/2013/09/cara-memasang-widget-like-box-facebook-melayang-di-blog.html">Get This Widget</a></p>
</div>

5. Simpan Widget/Gadget Baru yang anda buat tersebut.
6. Selesai 

[source]