DEDIA PANDU BLOG: Cara Membuat Popup Facebook Like Box Dengan Timer Pada Blog

Satu lagi widget like box (kotak suka) fans page facebook popup yang dilengkapi dengan timer atau waktu dengan 4 skin gambar yang berbeda-beda. Kotak like box popup ini muncul ketika halaman blog dibuka dan dirancang untuk tidak muncul kedua kalinya jika pengunjung sudah mengklik like atau suka pada box tersebut serta dilengkapi dengan tombol close pada sudut kanan atas.

Widget like box yang satu ini sangat berbeda dari widget like box facebook melayang karena like box melayang akan selalu muncul pada saat halaman dibuka atau direload. Berbeda dengan like box fans page facebook popup dengan timer yang dirancang khusus dan dilengkapi dengan timer untuk menutup sendiri pada saat countdown timernya sudah habis serta dilengkapi dengan script atau fitur pembaca cookies pada browser sehingga membuat like box yang satu ini tidak akan muncul untuk kedua kalinya jika like atau suka pada box tersebut sudah di klik.

Like box ini sendiri didesain oleh kakiheboh yang diberi nama "LikeBox FB Fanpage Pro". Cara pemasangannya sendiri sangatlah mudah, cukup dengan mengcopy paste kode css/script dan memasukkannya kedalam template, tepatnya diletakkan di atas tag </body> atau di bawah tag <body> dan untuk demonstrasinya sendiri, silahkan sobat klik live demo di bawah ini.

LIVE DEMO

Setelah melihat demo di atas, mungkin sobat tertarik untuk memasangnya pada blog sobat dan jika iya, berikut kode dan cara meletakkan kode tersebut ke dalam template :

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

<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://lostsector-project.googlecode.com/files/likebox-facebook-with-timer.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>

Keterangan :

Lostsector.stars : Ganti dengan username fans page facebook sobat
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"

SKIN "02"

SKIN "03"

SKIN "04"

Langkah terakhir, simpan template sobat...!!!

Semoga artikel kali ini bermanfaat dan jika ada saran ataupun kekurangan dari tutorial ini, mohon memberikan komentar di bawah. Terima kasih dan happy blogging...!!!

Sumber