Postingan malam kali ini
adalah
tentang "Memasang Widget Like Box Facebook Melayang di Blog".
Maksudnya, Memasang Widget Like Box Facebook Melayang di Blog pengunjung
diminta agar mengklik
suatu kotak apakah
ia mau menyukai halaman facebook kita
maupun bukan sekedar (tombol Close).
Tujuan Memasang Widget Like Box Facebook Melayang di Blog
Pada dasarnya tujuan Memasang Widget Like Box Facebook Melayang di Blog
ialah agar para pengunjung blog mau menyukai halaman facebook yang kita kelola
beserta memberikan jempolnya, sehingga halaman halaman facebook yang anda kelola
makin banyak.
keunggulan yang lain atas Widget ini dilengkapi
beserta tombol close sehingga pengunjung
dapat dengan gampang tutup Kotak Widget ini
serta walaupun agak sedikit mengganggu pengunjung
namun masih tetap dapat menutupnya
tanpa ada susah payah.
Penasaran ingin Memasang Widget Like Box Facebook Melayang di Blog anda? Ikuti langkah-langkah dibawah ini:
1. Syarat
khususnya :
mempunyai suatu Halaman Facebook. Bila belum ada, silahkan
anda membuat dulu.
2. Buka Akun Blog yang anda kelola.
3.
dalam Dasbor Blog anda, masuklah ke Elemen Tata Letak, pilih Add Widget / Tambah Gadget
4.
terus pilih HTML/Jawascript
5.
kemudian copylah kode script di bawah ini ke Widget/Gadget
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;">Please Bantu Saya,<blink> Like This
!!!</blink> </p>
<!-- Mulai --!>
<div class="fb-like-box"
data-href="https://www.facebook.com/NongkronglDiKedaiKopi"
data-width="292" data-show-faces="true" data-stream="false"
data-show-border="true" data-header="true"></div>
<!-- Selesai --!><a class='close' href='#'>×</a>
<p style=" float:right; margin-right:35px; font-size:10px;"
>Powered By <a style=" font-size:10px; color:#3B78CD;
text-decoration:none;"
href="http://kumpulan-adsen.blogspot.com/">Blogger Widget</a>
and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;"
href="http://bos-tutorial.blogspot.com/2013/07/inilah-memasang-widget-like-box.html">Get
This Widget</a></p>
</div>
6. Simpan Widget
7. Lohat lah hasilnya
Catatan : yang warna merah ganti dengan kode halaman facebook anda
