Widget Popup Facebook Like Box
adalah widget yang dilengkapi dengan timer atau waktu dengan 4 skin
gambar yang berbeda-beda. Kotak like box popup ini akan 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.
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>
<!-- Upik's Media 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="Upik's Media",
kakinetworkdotcom01title="Join us at Facebook!",
kakinetworkdotcom01skin="01",
kakinetworkdotcom01time="15",
kakinetworkdotcom01wait="0",
kakinetworkdotcom01lang="en"
//]]>
</script>
<script src='https://sites.google.com/site/luthfansite/Facebook.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>
<!-- Upik's Media Likebox Facebook Code End -->
Keterangan :
- Upik's Media : Ganti dengan username fans page facebook yang sobat 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 :
Semoga artikel kali ini
bermanfaat dan jika ada saran ataupun kekurangan dari tutorial ini,
mohon memberikan komentar di bawah. Terima kasih dan happy
blogging...!!!
sipp.. gan..ane lg cari yng melayang pas..ane buka blog yg muncul duluan FP ny dulu baru blog ane...
ReplyDelete