Cara Membuat Fanspage Melayang di Blog

Kita pasti sering melihat Like Facebook yang melayang di blog, walaupun terkesan sangat memaksa tapi cara ini mampu meningkatkan jumlah like fans page kita, karena posisi nya yang cukup srategis dan mudah dilihat, dibandingkan memasang widget like facebook di side bar.

Selain itu widget ini juga tidak terlalu banyak memakan kolom side bar, karena fanspage akan muncul melayang setiap pengunjung membuka blog kita. Apakah widget ini mengganggu pengunjung?, mengganggu pasti tentu, tapi ada tombol closenya yang bisa di tutup langsung oleh pengunjung. Jika anda tertarik memasangnya silahkan ikuti langkah-langkah dbawah ini ;

Cara Membuat Fans Page Facebook Melayang di Blog

#Jika belum punya fans page silahkan baca "cara membuat fans page facebook"

1. Buka dasboard blog anda,
2. Masuk ke menu Tata Letak > Tambah gadget
3. Pilih HTML Javascript
4. Pastekan kode script 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><a class="murub">Kalau Bermanfaat,Silahkan Dilike Ia</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href= https://www.facebook.com/pages/Pakar-Teknologi/1604691176410348?ref=hl&amp;width=292&amp;height=258&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:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<br/>
<div class="twitter">
<!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=madina_pulsa&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<div style="text-align: center;">
<a href="http://pakar-teknologi.blogspot.coml" target="_blank">Get This Widget</a></div>
<a class='close' href='#'>&times;</a>
</div>

Keterangan :

Silahkan Ganti Tulisan ini

Edit nya hat-hati jangan sampai  ada kode yang kehapus)

. yang Berwarana Hijau Tulisan atau pesan nya

. Yang warna Merah Un Fanspage nya

. Yang warna Biru: username Twitternya ‚(misal @madina_pulsa maka jadi madina_pulsa)

Save, selesal, hasil nya seperti gambar di bawah ini

Untuk cara mendapatka kode Scrip facebook anda harus membuat fans page di Facebook developer, letakan URL Fans page anda, dan atur ukuran sesuai keinginan anda, jika sudah klik Get Code, lalu ambil kodenya. Demikian artikel tentang cara memasang like box melayang di blog, semoga bisa bermanfaat bagi anda.