Hai ganis (agan-agan dan sista-sista) kali ini saya akan share cara membuat Facebook Like button widget ini mempunyai fitur melayang, responsive, center position selain itu widget ini mempunyai kelebihan tidakakan tayang untuk kedua kalinya, kecuali anda mereload halaman.
berikut demonya :
Setelah melihat demo di atas, mungkin ganis 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>
<!-- 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="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>
<!-- lostsector.blogspot.com Likebox Pro FBFan Code End -->
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...!!!
Out Of Topic Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon