Cara Membuat Like Box Facebook Fanspage Melayang di Blog

Sore bray n sist, gimana puasa sampai hari ini?? belum ada yang bolong kan?? hehee
Nah ayas kali ini mau share ke kalian tentang Cara Membuat Like Box Facebook Fanspage Melayang di Blog seperti yang ada di blog ayas ini. Berhubung temen ayas ada yang minta, Mbak Aulia, jadi ya ayas kasih tahu caranya.

Tudepoin, cekinyooott...

• Sebelumnya kalian harus punya Fanspage Facebook dulu, kalau belum silahkan daftar disini.
• Pilih Cause or Community > tuliskan nama blog kalian (harus sama dengan nama blog) > Create

• Pada kolom 1 isi dengan deskripsi blog kalian, jika tidak tahu dimana tempat deskripsi blog kalian, bisa masuk ke menu Pengaturan/Setting > Basic, pada kolom description itulah deskripsi blog kalian.
• Pada kolom 2 isi dengan alamat blog kalian, misal http://haqiemkun.blogspot.com
• Selanjutnya silahkan upload foto profil fanspage kalian
• Silahkan skip langkah yang ada di gambar di bawah ini, karena ini berbayar

• Sekarang facebook fanspage kalian sudah jadi, untuk pengaturan lain bisa kalian lakukan sesuka hati

Sekarang kita masuk ke pengaturan agar facebook fanspage kita bisa melayang di blog, cekinyoottt...

• Login akun blogger
• Copy script berikut:

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:335px;
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">Simplify NotePad on Facebook</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/SimplifyNotepad/pages/454916504601799&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=haqiemisme&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe></div>
<a class='close' href='#'>&times;</a></div>

• Masuk ke pengaturan Tata Letak/Layout > Add a Gadget/Tambah Gadget > Cari yang HTML/Javascript
• Paste script tersebut dan tidak perlu diberi judul seperti gambar berikut:

• Sebelum kalian klik Simpan, ada beberapa kode yang perlu kalian rubah:

1. Kode dengan warna text Merah bisa kalian ganti sesuka kalian
2. Kode dengan warna text Hijau ganti dengan link URL facebook fanspage yang baru saja kalian buat
3. Kode dengan warna text Biru ganti dengan username Twitter kalian

Nah, facebook fanspage kalian sudah jadi, sekian artikel dari ayas dan sampai ketemu lagi di artikel selanjutnya.
Salam Blogger... :)