Widget Like Box Facebook Melayang di Blog

Setelah kita bisa Cara Membuat Menu Sticky Widget (Widget Melayang), kali ini kita lanjutkan lagi dengan membuat Widget Like Box Facebook Melayang di Blog.

Visitor dari facebook cukup membantu dalam perkembangan sebuah blog yang kita kelola. Bagaimana caranya mendatangkan visitor dari facebook salah satunya dengan cara menggunakan Widget Like Box Facebook.

Banyak cara untuk memasang Widget Like Box Facebook di Blog salah satunya dengan model melayang atau floating. Widget Like Box Facebook Melayang di Blog ini memiliki tombol close untuk menghilangkan atau menutup widget like box tersebut sehingga tidak begitu menganggu pembaca setia blog kita.

Widget Like Box Facebook Melayang di Blog ini sudah disatukan dengan follow dari twitter, ingin tau cara memasangnya silahkan simak caranya dibawah ini.

Cara Membuat Widget Like Box Facebook Melayang di Blog :

1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Klik HTML/JavaScript
4. Masukan kode dibawah ini,

<style type="text/css" scoped>
/* 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:1px solid #333;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;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 -->
<div style="text-align: center;"><a class="murub">Jangan Lupa Like Ya Teman</a></div>
<div style="text-align: center;">
<div class="fb-like-box" data-href="https://www.facebook.com/pages/Rendy-PC/1433396576877794" data-width="285" data-height="185" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div></div>
<!-- HTML End -->
<div style="text-align: center;"><div class="twitter">twitter
<!-- Twitter --></div></div>
<a class='close' href='#'>&times;</a>
</div>

5. Ganti tulisan warna merah dengan URL halaman Facebook kita.
6. Ganti tulisan warna biru dengan URL widget twitter kita.
7. Simpan dan lihat hasilnya. Selamat mencoba