CARA MEMBUAT KOTAK LIKE FACEBOOK MELAYANG DI BLOGSPOT

Hallo, selamat malam.. Ketemu lagi nih disini sob, Kali ini Ikubaru's Blogzia mengenai Cara Membuat  Kotak Like Facebook Melayang di Blog. Sebelumnya Ikubaru's Blogzia telah membahas mengenai Cara Membuat Kotak Like Facebook di Blog. Sebelumnya, sobat saya sarankan dulu untuk membaca artikel yang satu ini. Cara Membuat Kotak Like Facebook di Blog

Setelah sobat paham, langsung aja yuk gan, ga usah nunggu terlalu lama-lama.. CEKIDOT..!!

Pertama-tama, sobat 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 Sobat.

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

Langkah Keempat, Sobat pilih HTML/Javascript. Lalu Sobat 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>

Sobat 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.

Referensi Tulisan:
Brader Blog: Cara Memasang Widget Like Box Facebook Melayang di Blog

Share this: