Yuk membuat float like box facebook!

Hai Sobat..... masih dalam kategori tips n' trik blogger, sekarang kita akan mengulas tata cara membuat float like box facebook!

ingin dapat like dari pengunjung yang hadir ke blog kita banyak caranya, salah satunya dengan sistem float like box facebook yang berasal dari Facebook Plugins. Float like box facebook terkesan seakan-akan melayang di depan blog kita. tujuan pembuatan widget ini salah satunya untuk mempromosikan blog kita kepada pengunjung lainnya. fungsi lainnya yaitu sebagai bukti bahwa pengunjung menyukai postingan-postingan yang ada di blog kita.

udah penasaran? Cekidot!!

Cara pembuatan:

1. Login ke Blogger.com

2. Pilih Tata letak > Tambahkan Gadget
3. Pilih HTML/JavaScript

4. Masukkan Kode 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:200px; 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:-5px; 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> <iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/username?ref=hl&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe> </center> <!-- HTML End --> <a class='close' href='#'>×</a> </div>

5. kata yang bertuliskan " http://www.facebook.com/username " diganti dengan alamat facebook sobat
6. pilih simpan jika sudah selesai