Cara Membuat Facebook Like Box Dan Twitter Follower Box Melayang Di Blog

Pada kesempatan kali ini saya akan mencoba sharing tentang cara membuat widget Facebook Like Box dan Twitter Follower Box tampil melayang di laman Blog sobat.Tapi sebelum membahas langkah-langkah pembuatan like bok ini, sedikit saya ingin menjelaskan fungsinya. Like Box (Kotak Suka) adalah salah satu cara untuk menarik lebih banyak orang yang menorehkan jempol mereka di fans page facebook kita, jadi pastikan like box ini sebenarnya diperuntukan buat sobat-sobat yang memiliki fans page di facebook.

Dalam pembuatan like box ini, akan diperlukan script html dari fans page facebook sobat, untuk mengetahui code html dari fans page facebook sobat bisa di baca disini.

Baiklah, tanpa memperpanjang lebar lagi, karena kalau kepanjangan kasihan ibu-ibunya dan kalau kelebaran kasihan bapak-bapaknya (hehe serius amat). Oke, berikut ini langkah langkahnya :

1. Login ke akun bloger sobat seperti biasa.
2. Kemudian pada dasboard blog sobat, buka pengaturan "Tata Letak".
3. Klik "Tambah Gadget" pada posisi mana yang sobat inginkan, sebenarnya dimana saja anda meletakan gadget ini, posisi tampilannya akan tetap melayang di tengah halaman blog sobat.
4. Kemudian pilih "HTML/Javascript".
5. Kemudian sobat pastekan script HTML berikut :

<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">Pada Jempol Anda Ada Hak Anak-anak Fesbuk</a></center>
<center>
<Pastekan Code Script Facebook Fans Page Sobat Disini>
</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=azrielrasta&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>&times;</a>
</div>

Tulisan yang berwarna Biru silahkan di ganti dengan kata-kata sesuai selera sobat.
Tulisan yang berwarna Merah di ganti dengan script Fans Page Facebook sobat, dan
Tulisan yang berwarna Pink ganti dengan ID Twitter sobat.

Demikian cara membuat like box ini, selamat mencoba dan sukses selalu.