Membuat Facebook Likebox & Twitter Melayang di Blog

hallo sobat kali ini saya akn menjelaskan tentang membuat like box, kali ini saya akan menshare kode like box yang saya gunakan ini ketika halaman web saya di load dengan sempurna makan akan muncul like box yang melayang , ingin tahu caranya silahkan ikuti langkah lankahnya sebagai berikut dan jangan lupa untuk like dan follow ya :)
ok langsung ke tkp:

1. pertama Login dulu ke Blogger Sobat.
2. Buka Tata Letak.
3. Klik Tambah Gadget.
4. Lalu, Pilih HTML/Java Script
5. Lalu Masukin kode Java Script dibawah ini kedalam kotak yang telah di sediakan.

<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">Jangan Lupa Like Ya ^_^</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Tutorials-And-Software/487286721337467?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=sbepe_99&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>&times;</a>
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://esbepe-sbp.blogspot.com/2013/04/Cara-Membuat-Like-Box-FB-Twitter.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>

Untuk kode yang saya berwarna :

• Merah    : bisa anda ganti sesuai kata kata anda
• Biru        : diganti dengan alamat/URL Fanspage Facebook Sobat. Jika belum punya bisa dibuat 
• Magenta : diganti dengan Username Twitter sobat.

   6. Klik Save/Simpan.
   7. Silahkan sobat lihat tampilan blog sobat. Sudah ada Like-Boxnya .Mudah bukan

Jangan Lupa juga Like Fanspage Blog ini yaa,.
Sekian, Dan Semoga bermanfaat. Terima Kasih.