Cara Membuat Like Fanpage Facebook Melayang di Blog
Kali ini Panduan blogger pemula tentang "Cara Membuat Like Fanpage Facebook Melayang di Blog". Fungsi dari widget ini adalah menghubungkan facebook dengan blog. Syaratnya sobat blogger harus mempunyai akun di Facebook terlebih dulu. Dan sobat harus membuat terlebih dulu Like Box di Facebook.
Dalam perkembangannya, like fanpage facebook ini banyak dipakai oleh
banyak blogger. Dengan tampilan yang berbeda-beda namun mempunyai fungsi
yang sama. Selain untuk mempercantik tampilan blog, widget ini juga
sangat berguna untuk mendatangkan banyak trafik dari Facebook.
Jika sobat blogger tertarik untuk membuat dan memasangnya di blog,
silahkan sobat blogger ikuti beberapa langkah seperti berikut ini :
1. Login ke Blogger
2. Klik Tata Letak
3. Klik Tambah Gadget
4. Pilih opsi HTML/Java Script
5. Copy dan Paste Kode HTML di bawah ini kedalamnya
<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:10%;
margin:0px 0px 0px -182px;
width:300px;
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:#C2CFDF; 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'>
Klik Like !
<br/>
<!-- Mulai --!>
Letakkan kode Like box fanpage facebook anda disini
<!-- Selesai --!>
<a class='close' href='#'>×</a>
</div>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:10%;
margin:0px 0px 0px -182px;
width:300px;
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:#C2CFDF; 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'>
Klik Like !
<br/>
<!-- Mulai --!>
Letakkan kode Like box fanpage facebook anda disini
<!-- Selesai --!>
<a class='close' href='#'>×</a>
</div>
Ganti kode yang berwarna merah dengan kode Like Fanpage sobat.Dan untuk membuat like box.
6. Klik Simpan
Sumber : http://tutorial-blogz.blogspot.com