Widget yang satu sudah tak asing lagi di blogger..pernahkah anda
mengunjungi sebuah blog pada saat blog dibuka dan sedang loading akan
muncul popup like box fans page nya pada tampilan layar anda contohnya
seperti gambar yang dibawah ini,,
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.
Penasaran gimana cara bikinnya.. berikut kode dan cara meletakkan kode tersebut ke dalam template :
- Login ke Blogger
- Pilih Template » Edit HTML » Centang Expand Template Widget
- Cari kode </body> untuk mempermudah tekan Ctrl+F Setelah kode tersebut ketemu
- Copy kode di bawah ini dan pastekan tepat di atas tag </body> atau di bawah tag <body>
<!-- lostsector.blogspot.com Likebox Pro FBFan 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="My Note Fanspage",
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>
<!-- lostsector.blogspot.com Likebox Pro FBFan Code End -->
Note :
- Lostsector.stars : Ganti dengan username fans page facebook sobat
- Join us at Facebook : Silahkan disesuaikan dengan keinginan misalnya "Like nya dong!!"
- kakinetworkdotcom01time="15" : adalah waktu (seconds/detik) yang diperlukan sampai popupnya tertutup sendiri Penting : disarankan waktu nya jangan lama2 ya,,karena bisa bikin pengunjung kesal harus menunggu lama.
- 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"
