Membuat Widget Fanspage Melayang Keren Di Blog

Widget Fanspage Melayang Keren sesuai dengan namanya widget ini berfungsi untuk menampilkan Fanspage Facebook kita di blog dengan tampilan melayang beserta tombol Close. Dengan tampilan yang keren beserta box shadow dan efek close yang smooth membuat widget ini menjadi super keren.

Widget ini saya temukan saat jalan-jalan di Grup Blogger, dan saya tertarik setelah melihat widget ini, sobat tertarik juga ? berikut cara pembuatannya.

Silahkan sobat menuju ke Blogger > Tata Letak > Tambah Gadget > lalu pilih HTML/Javascript

Masukkan kode ini di dalamnya

<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -182px;
width:310px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-facebook').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='kotak-facebook'>
<!-- Mulai --!>
<div class="fb-page" data-href="https://www.facebook.com/IDFANSPAGE" data-width="300px" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/IDFANSPAGE"><a href="https://www.facebook.com/IDFANSPAGE">NAMAFANSPAGE</a></blockquote></div></div>
<!-- Selesai --!>
<a class='close' href='#'>&times;</a><a href='http://musafus.blogspot.com/' rel='dofollow' style='display:none;'>M</a></div>

Silahkan sobat ganti IDFANSPAGE dengan NAMAFANSPAGE

Langkah terakhir klik Simpan.

Semoga Bermanfaat

Referensi : Seocips, Tukangbajak03