Membuat pop up Facebook like box dengan jQuery. Untuk menambah penggemar di Facebook, widget ini sangat cocok untuk digunakan. Widget pop up Facebook like box dengan jQuery ini bisa digunakan baik di Blogger atau pun WordPress.

Codingnya dibuat oleh Mohammad Mustafa Ahmedzai pemilik MyBloggerTricks, dan Saya edit sedikit sesuai dengan selera saya. Silahkan sobat edit CSS nya untuk merubah tampilannya. Hasil tampilannya seperti gambar di bawah :

Facebook LikeBox


Mungkin ada rekan yang bertanya, apakah widget ini muncul di halaman utama dan postingan? Tidak.
Menurut pembuatnya, kelebihan dari widget ini :

"Widget ini tidak selalu muncul pada tiap halaman atau postingan, melainkan hanya sekali saja untuk 1 visitor dengan IP dan browser yang sama. Dan akan muncul selanjutnya 30 hari kemudian, jadi Anda tidak usah khawatir tampilan widget ini akan mengganggu visitor. Widget ini bisa muncul pada halaman utama atau pun postingan, tergantung darimana visitor mengunjungi web Anda. Apabila ingin melihat untuk kedua kalinya, silahkan clear cookies pada browser."

Jadi tidak usah khawatir selalu muncul sob... karena cookie nya sudah di set 30 hari, artinya Anda tidak bisa melihat demo di web saya kedua kalinya, kecuali dengan membersihkan cookies. :)

Cara Membuat Popup Facebook LikeBox dengan jQuery

1. Login ke Blogger
2. Pada Dasbor anda silahkan tambahkan Widget HTML/JavaScript
3. Masukan kode dibawah ini :
<style>
/*
   ColorBox Core Style:
   The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*

   User Style:
   Change the following styles to modify the appearance of ColorBox.  They are
   ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
        box-shadow:0 0 15px rgba(0,0,0,0.4);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
        -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
       }
 
#cboxTopLeft{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x top left;}
     #cboxTopRight{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px 0;}
     #cboxBottomLeft{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 -32px;}
     #cboxBottomCenter{height:43px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x bottom left;}
     #cboxBottomRight{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px -32px;}
     #cboxMiddleLeft{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -175px 0;}
     #cboxMiddleRight{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -211px 0;}
     #cboxContent{background:#fff; overflow:visible;}
         #cboxLoadedContent{margin-bottom:5px;}
         #cboxLoadingOverlay{background:url(http://2.bp.blogspot.com/-bMneOFi_UDo/Txohpge3Z9I/AAAAAAAAF0s/AbVgxX9pXtQ/s400/loadingbackground.png) no-repeat center center;}
         #cboxLoadingGraphic{http://3.bp.blogspot.com/-SKktU1-SCCw/TxohpRB19LI/AAAAAAAAF0Y/iwIo3LnjoE0/s400/loading.gif) no-repeat center center;}
         #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:normal; color:#7C7C7C;}
         #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
         #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
         #cboxPrevious{left:0px; background-position: -51px -25px;}
         #cboxPrevious.hover{background-position:-51px 0px;}
         #cboxNext{left:27px; background-position:-75px -25px;}
         #cboxNext.hover{background-position:-75px 0px;}
         #cboxClose{right:0; background-position:-100px -25px;}
         #cboxClose.hover{background-position:-100px 0px;}
         .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
         .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
         .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
         .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

/*-----------------------------------------------------------------------------------*/
/*   Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
    text-decoration:none;
}
.box-title {
   color: #2266BB;
   font-size: 18px !important;
   font-weight: bold;
   margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 3px 3px 3px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
   color: #999;
   margin: 0;
   text-align: center;
}
#subs-container {
    padding: 35px 0 30px 0;
    position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   if (document.cookie.indexOf('visited=true') == -1) {
       var fifteenDays = 1000*60*60*24*30;
       var expires = new Date((new Date()).valueOf() + fifteenDays);
       document.cookie = "visited=true;expires=" + expires.toUTCString();
   $.colorbox({width:"400px", inline:true, href:"#subscribe"});
       }
});
</script>
    <!-- This contains the hidden content for inline calls -->
 
        <div style='display:none'>
   <div id='subscribe' style='padding:10px; background:#fff;'>
        <h3 class="box-title">Dapatkan info terbaru via Facebook. Silahkan klik LIKE / SUKA.<center><p style="line-height:3px;" >▼</p></center></h3> 
      <center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fkangismet.net&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
<p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a> and <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://blog.kangismet.net/2012/03/membuat-pop-up-facebook-like-box-dengan.html">Blogger Tutorials</a></p>
</div>
</div>
4. Ganti kangismet.net dengan usename Anda.
5. Save

67 komentar

Wah enak ya kalau muncul 1 bulan sekali jadi tidak mengganggu visitor kita. terima kasih atas informasinya mas sangat bermanfaat.

Balas

wow, ada fasilitas cookies nya nih, keren juga.. JQuery bisa ternyata, saya taunya pake PHP kang :D

Balas

betul sob... kadang2 males kalau ada blog yang tiap buka posting muncul popup, apalagi yang muncul kumpulblogger... :)

Balas

cookies itu kelbihannya sob... si jquery itu emang jago buat diapa2in :)

Balas

Keren bang.....langsung di "PAKSA" masuk ke blog aku..hehe...ditunggu kunjungan baliknya/....

KEEP POSTING

Balas

Visitor juga di 'paksa' supaya nge-like :) mksh sob...

Balas

Mas.add fb aku [http://www.facebook.com/chuamalmsteen]..aku mau berikan job sederhana..ada $$ nya kok...

Makasih sebelumnya

Balas

Sip sob.... wah job apa nih :)

Balas

jadi bisa di kasih iklan2 gitu ya kang? :)
oya, kang, dah bisa percobaan tes emot komen di threaded comment? di blog saya dah bisa tuh, minta bantuan salah satu blogger, hehe :D

Balas

Bisa diganti2 semau kita sob... :) Iya baru keingetan lagi emotnya.. bagi dong trick nya... :)

Balas

lha ini dah bisa kang emoticonnya?? hihi :D
dah update td y..

Balas

Iya tadi edit tag 'blockquote' jadi tag 'p', tapi masih acak2an, ternyata templatenya ada css p img {float:left... jadi kacau deh :)

Balas

script tereksekusi,, tapi gak jalan mas knapa ya

Balas

apa ada bentrok kali ya? coba hapus jquery nya

Balas

Nice share sob,Thanks berat nih,mampir dong sob ke blog ane :D

Balas

makasih banyak ya gan atas infonya

Balas

Mkasih banget nih informasinya moga sukses terus gan.....

Balas

Mkasih nih informasinya salam kenal gan.....

Balas

ini ditaruh di bawah kode apa ya???

Balas

Di simpan di widget/gadget baru...

Balas

Sama2... tunggu kunjungannya... :)

Balas

hmmm . .

mau tanya kang ismet. .
saya nih mau buat Pop up nya setiap di visit gmana ya ? :)
soalnya kadang aku buka pake FB lain gak ke pop up Fanspage nya. .
thanks :D


Visit me : http://zoneforshare.blogspot.com

Balas

Yang tercatat bukan akun fb nya sob... tapi IP address kompi kita, set aja tiap hari, cari var fifteenDays = 1000*60*60*24*30; 30nya ganti 1 aja

Balas
Komentar ini telah dihapus oleh pengarang.

Tapi kenapa blom keluar terus ya Kang ? :(

Balas

Sekalian nanya kang..
buat Menu Navigasi yang selalu ikut kita seperti di atas gmana ?

Gambar Home | Adsense | Blogger Tutorial

makasi

Balas

Mas mksdnya username itu apa ? alamat blognya atau apa ? Maklum bos newbie

Balas

makasih kang tutornya sangat membantu

Balas

terimakasih kang saya lagsung coba, n scriptnya berkerja thanks widget pop-up nya :)

Balas

wah makasih mas info n script nya saya cari2 ketemu juga nih... oke saya segera mencobanya... semoga nanti banyak yang like... :)

Balas

wah MANTAP....
:-D

Balas

bolehh juga nichh klo dicoba ..:)
trerimakasih infonya :)

Balas

mas kx munculnya cuma sekali ya,.,cara biar muncul terus gimana

Balas

sengaja, supaya visitor ga kesel :)
coba baca baik2 tulisan saya..

Balas

gan ane mau nanya,kan facebook like ane ini https://www.facebook.com/SadewaYogaM.Z

nah yang kangsimet.net ane ganti sadewayogam.z kok gagal gan ?? mohon pencerahannya

Balas

Terimakasih Kang Ismet, sudah saya coba pasang di blog saya.
jd tambah keren nih... :D

ijin pake target="_blank" ya kang ke kreditnya :D

Balas

Btw, udah dicek ulang, tiap loadig ulang muncul terus popupnya ya kang?

Balas

saya coba blognya, munculnya sekali aja ko sob...

Balas

oke kang, ternyata betul 1x, kang

terimakasih banyak kang...

Balas

Ini terimakasih banget sob, saya nyari-nyari yang cuma 1 x muncul jarang bgt nemu .. tdi nemu tpi tiap masuk halaman/post lain muncul lagi .. btw bisa di ganti gag waktu munculnya jangan 30 hari, misal diganti hanya 7 hari atau 1 hari ?? terima kasih sob.

Saya Follow blognya yah :)

Balas

Sama2 sob.. untuk mengganti hari, cari kode :
var fifteenDays = 1000*60*60*24*30; ganti 30 menjadi 7, silahkan mencoba :)

Balas

ngegunain pop-up malah kurang disukai pengunjung, karena mengurangi kenyamanana, saya enggak memakainya.

Balas

Makasih y mas widget pop upnya
ini yg lagi saya cari utk blogspot

Balas

Sama2 sob... smoga brmanfaat

Balas

makasih informasina kang, bukmark dulu, ntar di cobain

Balas

sip sip.. terima kasih..
pengen masang cuma takutnya kalo sampai menganggu visitor ternyata hanya muncul sekali khan ya..

Balas

ane pengen bikin ginian di blog ane. tapi kalo lagi maen ke blog orang suka sebel kalo ada pop up ginian, apalagi yang nggak bisa di close (kudu nuggu beberapa detik). bete abis. jadi mikir2 mau make ginian di blog ane ehehehe

Balas

Info yang bermanfaat.
salam kenal

Balas

tempat saya gok gak nongol ya kang, apa karena pake ip sharing ya?

Balas

sip sip.. terima kasih..
pengen masang cuma takutnya kalo sampai menganggu visitor ternyata hanya muncul sekali khan ya..

Balas

mas kx munculnya cuma sekali ya,.,cara biar muncul terus gimana


http://www.actressone.com/

Balas

Kang, saya tau akang ahli dalam script dan HTML. Tolong bantu saya, saya membuat tutorial pembuatan Like Box Facebook melayang. Tapi ada sobat Blogger yang berhasil dan ada juga yang gagal. Mungkin akang bisa tahu dimana permasalahanya. Kalau sempat tolong coba periksa ya ini alamat halamanya "http://regibrader-free.blogspot.com/2013/05/cara-memasang-widget-like-box-facebook.html". Hatur nuhun kang...

Balas

kalau untuk membuat tutorial, harus faham dan mencoba script itu bekerja sepenuhnya.. baru dibagikan

Balas

Mas, script js mybloggertricks.googlecode.com/files/jquery.colorbox-min.js tidak bisa di akses lagi. Kang Ismet masih punya backup'an nya tidak ya?

Balas

Kang.. kalo cara munculin Popup melayang di blog dengan mengklik tombol gimana ya?
Jadi popupnya muncul kalo button di klik saja. mohon bantuannya ya kang.

Balas

kang ini work gak kalau di wordpress

Balas

kok gak muncul yah bang,

Balas

Poskan Komentar


×
Chat