Cara Membuat Widget Fanspage Facebook Melayang di Blog

Cara Syarif - Membuat dan memasang widget fanspage facebook melayang di blogger. Pada artikel sebelumnya kita sudah membahas tentang cara membuat fanspage facebook, nah sekarang kita akan membahas tentang cara membuat widget fanspage facebook melayang di blog. Kenapa widgetnya dibuat melayang ? alasannya cukup simple karena tidak ada ruang lagi untuk menyimpan widget fanpage facebook ini, atau mungkin masih banyak space kosong tetapi ingin tampilan widgetnya berbeda semuanya kembali ke selera masing - masing.

Berbicara mengenai halaman fanspage. Google plus juga memiliki halaman fanspage, tentu saja jika anda ingin memiliki nilai yang bagus di pencarian Google maka anda harus memanfaatkan sebaik-baiknnya semua fitur layanan yang diberikan oleh Google. Jika anda tertarik ingin membuat halaman fanspage Google plus, silahkan baca artikel Cara membuat dan memasang halaman fanspage Google plus di blog.

Cara membuat widget fanspage facebook melayang di blog

1. Pastikan Anda sudah mempunyai fanspage facebooknya, jika belum baca cara membuat fanspage facebook.
2. Jika anda sudah membuat/mempunyai fanspagenya kemudian login ke Blogger.
3. Pada dashboard Blogger masuk ke menu Tata Letak/Layout yang ada dibagian kiri, lalu pilih Add Gadget/Tambah Gadget.
4. Kemudian pilih Gadget HTML/Javascript.
5. Lalu copy semua code dibawah ini dan pastekan ke Gadget yang barusan anda buat.
6. Sesuaikan dulu ukuran widget dengan template blog anda, dan ganti text yang berwarna sesuai keterangan di bawah lalu klik simpan.

<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;
}
</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><a class="murub">DI LIKE YAH GAN !</a></center>
<br />
<br />
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=Tutorial-Blogger-69-111944999250558/?ref=hl&amp;width=262&amp;height=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:230px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<br/>
<a class='close' href='#'>&times;</a>
</div>

Keterangan :

• ✈ Ganti text yang berwarna merah dengan nama Fanspage anda.
• ✈ Ganti text yang berwarna hijau dengan pesan Like Box Fanspage Blog anda.
• ✈ Text yang berwarna pink adalah ukuran dari bingkai Fanspagenya.
• ✈ Text yang berwarna biru adalah ukuran pembungkus bingkai Fanspagenya.

Sesuaikan sendiri jika ukuran bingkai Fanspage dengan pembungkusnya kurang pas di Template Anda. Selamat mencoba dan semoga berhasil !

Tweet

Subscribe to receive free email updates: