PopUp Fb Like Box Dengan JQuery

Membuat pop up Facebook like box dengan jQuery


Hasil tampilannya seperti gambar di bawah :

Codingnya dibuat oleh Mohammad Mustafa Ahmedzai pemilik MyBloggerTricks

"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."

Ke Tahap pembuatan :

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhskPbhh2hAv-RHMPvww0XgVhKa8BMZUBSv7uHdbLzwzn0VPRj1R1QdTRZWHh2V4WIJF5vPuGMPYsMXHR1QXAzb0kwoJiQxfLdxu2VPLUyMr7Grd92_DpZVX1Gm0y3TWCYKNT7lQrUpENY/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1cEEWVYc3xiPA8F_Fq2I6_4JOWh_UiXUy4tF13d9kz0aGLsDvU3pwL-qpjbThf52Y11QJnSQ6z7EJf1ojPA3LPyH4W6pgqRCO15j7wA-ZPJTek8eHYcwul9PYlBt2_ohtr-3_X68pfs/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhskPbhh2hAv-RHMPvww0XgVhKa8BMZUBSv7uHdbLzwzn0VPRj1R1QdTRZWHh2V4WIJF5vPuGMPYsMXHR1QXAzb0kwoJiQxfLdxu2VPLUyMr7Grd92_DpZVX1Gm0y3TWCYKNT7lQrUpENY/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhskPbhh2hAv-RHMPvww0XgVhKa8BMZUBSv7uHdbLzwzn0VPRj1R1QdTRZWHh2V4WIJF5vPuGMPYsMXHR1QXAzb0kwoJiQxfLdxu2VPLUyMr7Grd92_DpZVX1Gm0y3TWCYKNT7lQrUpENY/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1cEEWVYc3xiPA8F_Fq2I6_4JOWh_UiXUy4tF13d9kz0aGLsDvU3pwL-qpjbThf52Y11QJnSQ6z7EJf1ojPA3LPyH4W6pgqRCO15j7wA-ZPJTek8eHYcwul9PYlBt2_ohtr-3_X68pfs/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhskPbhh2hAv-RHMPvww0XgVhKa8BMZUBSv7uHdbLzwzn0VPRj1R1QdTRZWHh2V4WIJF5vPuGMPYsMXHR1QXAzb0kwoJiQxfLdxu2VPLUyMr7Grd92_DpZVX1Gm0y3TWCYKNT7lQrUpENY/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhskPbhh2hAv-RHMPvww0XgVhKa8BMZUBSv7uHdbLzwzn0VPRj1R1QdTRZWHh2V4WIJF5vPuGMPYsMXHR1QXAzb0kwoJiQxfLdxu2VPLUyMr7Grd92_DpZVX1Gm0y3TWCYKNT7lQrUpENY/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhskPbhh2hAv-RHMPvww0XgVhKa8BMZUBSv7uHdbLzwzn0VPRj1R1QdTRZWHh2V4WIJF5vPuGMPYsMXHR1QXAzb0kwoJiQxfLdxu2VPLUyMr7Grd92_DpZVX1Gm0y3TWCYKNT7lQrUpENY/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZxR2rrFbS4MtJ5WxLndmsE9bD6D5udkoiWV7GNbVUC7hM8PfsrZHMmgXf6vmmA9k1Uw9fn9evtgF9IBnpNRbcCyvjuycQEJ_a-f1N_ySf1f51YV5pYn_BXSHA1AcpmIwyupGvOVSKyZQ/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMAQBsYXsBuY0ukk47zob_1_BLaml6DdNrOHwMxvh8pCXLXXGIB3t9kCwdJ7Q7HOWftKkZJA-pe9u_0yJeLADDP06KfddcPxIlglkrisgpnQ92IX5X7vZDrP_2DA8ZahU05xVEeCMnbMY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhskPbhh2hAv-RHMPvww0XgVhKa8BMZUBSv7uHdbLzwzn0VPRj1R1QdTRZWHh2V4WIJF5vPuGMPYsMXHR1QXAzb0kwoJiQxfLdxu2VPLUyMr7Grd92_DpZVX1Gm0y3TWCYKNT7lQrUpENY/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%2Fnewhiday&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://dai-detected.blogspot.com/2012/04/popup-fb-like-box-dengan-jquery.html">Blogger Tutorials</a></p>
</div>
</div>

4. Ganti newhiday dengan usename Anda.
5. Save
Belum berminat? tak apa, bantu kami dengan membagikan link ini ke teman, siapa tahu, justru mereka sedang mencari ini!