Cara membuat Popup Facebook Like Box Dengan Timer CountDown
Bagaimana cara membuat Widget Popup Facebook Like Box..?? Tapi sebelumnya 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. Kotak like box popup ini akan muncul seperti jendela baru < new window >. Selain itu widget ini juga dirancang untuk tidak muncul kedua kalinya jika pengunjung sudah mengklik like atau suka pada box tersebut.
Berikut tutorialnya :
>> Login ke Blogger
>> Pilih Template » Edit HTML » Centang Expand Template Widget
>> Copy kode di bawah ini dan pastekan tepat di atas tag </body>
<!-- akusharekan.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: "Lucida Sans Unicode", "Lucida Grande", 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("jquery", "1");</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>
<!-- akusharekan.blogspot.com Likebox Facebook Code End -->
Keterangan :
>> Lostsector.stars : Ganti dengan username fans page facebook yang Anda punya Join us at Facebook : sesuaikan dengan user name Anda.
>> Kakinetworkdotcom01time= "15": adalah waktu per (seconds/detik) yang diperlukan sampai popupnya menutup dengan sendirinya.
>> Skin = "01" : Ganti dengan kode skin yang lain (01, 02, 03, 04). Contoh skinnya ada di bawah ini :
Skin01 Skin02
Skin01 Skin02
>>Step terakhir, Save template...!!!
Semoga artikel kali ini bermanfaat buat Anda,..Thanks and happy blogging..
EmoticonEmoticon