Blog akan lebih indah lagi jika ada beraneka widget yang terpasang disana. Tidak terkecuali widget Fanpage Facebook juga harus dipasang di blog. Fanpage sendiri akan banyak membantu agar blog maupun pemilik blog dalam berinteraksi dengan kawan yang laen lebih mudah. Ini juga bisa membantu blog supaya cepat dikenal oleh pengunjung blog. Bisa juga mempromosikan facebook sobat blogger tentunya. Dengan memasang Fanpage dalam blog maka otomatis pengunjung blog laen akan mengeklik tombol Like Fanpage yang melayang tersebut.
Widget Fanpage Facebook melayang ini tidak akan mengganggu pengunjung blog karena ada tombol close untuk menghilangkannya. Jadi bagaimana sobat blogger masih mau pasang widget ini di blog? Bagaimana cara masangnya, silahkan ikuti tutorial blok ini!!!
Cara mudah pasang widget Fanpage Facebook melayang di blog dengan mudah.
- Login ke blogger.com.
- Pilih Tata Letak kemudian Tambah Gadget.
- Pilih HTML/JavaScript.
- Masukkan kode html dibawah ini.
<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-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;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-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:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=
https://www.facebook.com/agoengwong?ref=hl&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=371524026202784"
scrolling="no" frameborder="0" style="border:none; overflow:hidden;
width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<a class='close' href='#'>×</a>
</div>
- Ganti kode yang merah dengan ID Facebook kamu.
- Simpan jika sudah selesai.
Sobat blogger, cukup mudah dan simpel untuk tutorial blog kali ini. Semoga bermanfaat dan jika ada kritik juga saran bisa tinggalkan komentar di sini.
