You are here: » » » Cara Buat Widget Facebook Like Melayang di Blog

Cara Buat Widget Facebook Like Melayang di 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 
atau di bawah tag  dan untuk demonstrasinya sendiri, silahkan sobat klik live demo di bawah ini.


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>

<!-- 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: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, 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(&quot;jquery&quot;, &quot;1&quot;);</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"
Cara Membuat Facebook Like Box Popup Dengan Timer Pada Blog

SKIN "02"

Cara Membuat Facebook Like Box Popup Dengan Timer Pada Blog

 SKIN "03"

Cara Membuat Facebook Like Box Popup Dengan Timer Pada Blog

SKIN "04"

Cara Membuat Facebook Like Box Popup Dengan Timer Pada Blog

  • 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...!!!


The Title of this article is Cara Buat Widget Facebook Like Melayang di Blog and talk about Cara Buat Widget Facebook Like Melayang di Blog. Url of Cara Buat Widget Facebook Like Melayang di Blog is http://referensiregistrasi.blogspot.com/2013/01/cara-buat-widget-facebook-like-melayang.html. Give the opinion about Cara Buat Widget Facebook Like Melayang di Blog.

Label:


Responses

6 Respones to "Cara Buat Widget Facebook Like Melayang di Blog"

Dave said...

Keren sob, cuma di ada efek samping klo ane terapkan di blog, slideshow photo ane jd freeze alias kaga jalan hmm.. bbrp trik sejenis yg ane coba juga rata2 begitu kebetulan ane gunakan tutorial seocips pake widget html berhasil dan kelihatan tdk begitu menganggu pengunjung, yang begitu kira2 bisa di kasi timer dan bisa mendeteksi cookies jg kaya di artikel ini ga sob ..? boleh lgs check di blog ane sob :) http://discoversumatra.blogspot.com/ Thanks


April 30, 2014 at 3:36 AM
Launch Business in Delhi said...

It was very useful for me. Keep sharing such ideas in the future as well. This was actually what I was looking for, and I am glad to came here! Thanks for sharing the such information with us.


February 19, 2015 at 5:29 PM
Setup Business in Delhi said...

That is an extremely smart written article. I will be sure to bookmark it and return to learn extra of your useful information. Thank you for the post. I will certainly return.


February 28, 2015 at 2:53 PM
obat glaukoma said...

mantap dah artikelnya kawan


March 12, 2015 at 11:30 AM
A Halim Mubarak said...
This comment has been removed by the author.
Admin said...

bagus artikelnya gan, bisa saya terapkan ilmunya nig gan...


February 20, 2016 at 12:22 AM

Post a Comment

Subscribe to: Post Comments (Atom)
 

Informasi Berita Terbaru 2013

Loading...

Berita Terbaru Terpopuler 2013

Loading...

Blog Infotainment News | Dunia Remaja | Lowongan Kerja

Loading...
Back to top Copyright © 2010 | Worlds Hottest News