0 Cara Membuat Like Box Melayang

Cara mudah Membuat Like Box fanspage Facebook keren melayang di Blog dengan posisi di kanan bawah | banyak Tutorial yang sudah mengulas tutorial ini, namun tak apalah mungkin bagi anda ada yang belum tahu dan ingin mencoba tampilan pop-up dari facebook like box berikut ini, yang tampilanya menarik disertai tombol close, berikut cara memasangnya :

Contoh Fans page Melayang

1. Masuk Tata Letak
2. Tambah Gadget/HTML JavaScript
3. masukkan kode berikut : <!-- FB melayang tombol close --!> <style type='text/css'> #kotak-facebook { position:fixed !important; position:absolute; /* IE6 */ bottom:-1000px; right:40%; margin:0px 0px 0px -182px; width:300px; 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:#C2CFDF; font:normal 1em Cambria,Georgia,Serif; color:#111; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomright: 20px; border-top-left-radius: 20px; border-bottom-right-radius: 20px;} #kotak-facebook a.close { position:absolute; top:-10px; right:-10px; background:#333; font:bold 16px Arial,Sans-Serif; text-decoration:none; line-height:22px; width:22px; text-align:center; color:#fff; border:2px solid #fff; -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; cursor:pointer; } </style> <script type='text/javascript'> $(window).bind("load", function() { // animasikan nilai top saat halaman telah selesai dimuat $('#kotak-facebook').animate({bottom:"230px"}, 1000); // hilangkan kotak pesan saat tombol (x) di klik $('a.close').click(function() { $(this).parent().fadeOut(); return false; }); }); </script> <div id='kotak-facebook'> Klik Like Ya Kawan Berbagi Itu Indah ! <br/> <!-- Mulai --!> <div id="fb-root"> </div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like-box"data-href="https://www.facebook.com/pages/Riko-Blogger/151682764994943"data-width="290" data-height="182" data-show-faces="true" data-stream="false" data-header="false"> </div> <!-- Selesai --!> <a class='close' href='#'>×</a> </div>
4. Ganti kode yang https://www.facebook.com/pages/Riko-Blogger/151682764994943 dengan kode fanspage milik anda
5. Terakhir Simpan.

Artikel Terkait :