aplication and game: Tutorial Cara Membuat Popup Facebook Like Box Dengan Timer CountDown Untuk Blogger

Friday, April 26, 2013

Tutorial Cara Membuat Popup Facebook Like Box Dengan Timer CountDown Untuk Blogger

Widget Popup Facebook Like Box adalah widget yang dilengkapi dengan timer untuk menutup sendiri pada saat waktunya sudah habis dan mempunyai 4 jenis skin gambar yang berbeda-beda. Kotak like box popup ini akan muncul seperti jendela baru. Selain itu widget ini juga dirancang untuk tidak muncul kedua kalinya jika pengunjung sudah mengklik like atau suka pada box.

LIVE DEMO

Bagaimana Cara Memasangnya ?

Login ke Blogger
Pilih Template » Edit HTML » Centang Expand Template Widget
Copy kode di bawah ini dan pastekan tepat di atas tag </body>

<!-- lostsector.blogspot.com Likebox Facebook Code Start -->
<style>
#fblikepop { background-color: #fff; display: none; position: fixed; top: 200px; _position: absolute; width: 450px; border: 10px solid #6F6F6F; z-index: 200; -moz-border-radius: 9px; -webkit-border-radius: 9px; margin: 0pt; padding: 0pt; color: #333333; text-align: left; font-family: arial,sans-serif; font-size: 13px;}
#fblikepop body {background: #fff none repeat scroll 0%; line-height: 1; margin: 0pt; height: 100%;}
.fbflush { cursor: pointer; font-size: 11px !important; color: #FFF !important; text-decoration: none !important; border: 0 !important;}
#fblikebg { display: none; position: fixed; _position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: #000000; z-index: 100;}
#fblikepop #closeable { float: right; margin: 7px 15px 0 0;}
#fblikepop h1 { background: #6D84B4 none repeat scroll 0 0; border-top: 1px solid #3B5998; border-left: 1px solid #3B5998; border-right: 1px solid #3B5998; color: #FFFFFF !important; font-size: 14px !important; font-weight: normal !important; padding: 5px !important; margin: 0 !important; font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;}
#fblikepop #actionHolder {height: 30px;overflow: hidden;}
#fblikepop #buttonArea {background: #F2F2F2;border-top: 1px solid #CCCCCC;padding: 10px;min-height: 50px;}
#fblikepop #buttonArea a {color: #999999 !important;text-decoration: none !important;border: 0 !important;font-size: 10px !important;}
#fblikepop #buttonArea a:hover {color: #333 !important;text-decoration: none !important;border: 0 !important;}
#fblikepop #popupMessage {font-size: 12px !important;font-weight: normal !important;line-height: 22px;padding: 8px;background: #fff !important;}
#fblikepop #counter-display {float: right;font-size: 11px !important;font-weight: normal !important;margin: 5px 0 0 0;text-align: right;line-height: 16px;}</style>
<script src='http://www.google.com/jsapi'/><script>google.load(&quot;jquery&quot;, &quot;1&quot;);</script> 
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
 kakinetworkdotcom01username="lostsector.stars",
 kakinetworkdotcom01title="Join us at Facebook!",
 kakinetworkdotcom01skin="01",
 kakinetworkdotcom01time="15",
 kakinetworkdotcom01wait="0",
 kakinetworkdotcom01lang="en"
//]]>
</script>
<script src='http://yourjavascript.com/23312113212/www.lost-sector.net-popup-likebox-fb.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
 $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>
<!-- lostsector.blogspot.com Likebox Facebook Code End -->

Keterangan :

Lostsector.stars : Ganti dengan username fans page facebook yang Anda punya
Join us at Facebook : Silahkan disesuaikan
kakinetworkdotcom01time="15" : adalah waktu (seconds/detik) yang diperlukan sampai popupnya tertutup sendiri
Skin ="01" : Ganti dengan kode skin yang lain (01, 02, 03, 04). Contoh skinnya ada di bawah ini :

SKIN "01"