Membuat Pop-up Facebook Like Box dengan jQuery
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 :
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. :)
2. Pada Dasbor anda silahkan tambahkan Widget HTML/JavaScript
3. Masukan kode dibawah ini :
5. Save
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 :

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 Blogger2. 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&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&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
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
Jadi popupnya muncul kalo button di klik saja. mohon bantuannya ya kang.
http://www.actressone.com/
pengen masang cuma takutnya kalo sampai menganggu visitor ternyata hanya muncul sekali khan ya..
salam kenal
pengen masang cuma takutnya kalo sampai menganggu visitor ternyata hanya muncul sekali khan ya..
ini yg lagi saya cari utk blogspot
Saya Follow blognya yah :)
var fifteenDays = 1000*60*60*24*30; ganti 30 menjadi 7, silahkan mencoba :)
nah yang kangsimet.net ane ganti sadewayogam.z kok gagal gan ?? mohon pencerahannya
coba baca baik2 tulisan saya..
trerimakasih infonya :)
:-D
buat Menu Navigasi yang selalu ikut kita seperti di atas gmana ?
Gambar Home | Adsense | Blogger Tutorial
makasi
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
KEEP POSTING
Makasih sebelumnya
oya, kang, dah bisa percobaan tes emot komen di threaded comment? di blog saya dah bisa tuh, minta bantuan salah satu blogger, hehe :D
dah update td y..
jd tambah keren nih... :D
ijin pake target="_blank" ya kang ke kreditnya :D