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 Teman Ismet edit sedikit sesuai dengan selera saya. Silahkan sobat edit CSS nya untuk merubah tampilannya. Hasil tampilannya seperti gambar di bawah :

DEMO

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBkh7tuF7vxykA7fju-XxI08Z6XLgOR684-7-h1Di4WLQ4WnCHcB05Xnx0fdIF0NINUEv8-f1NxldCOM-VWW5qC1I30alCU5osBgV1aSoB2f9Am1fmywJMafaN9mK5IYp7XnyK6PY6uu4/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPSRkJCsBJFfPWDkMqNaY59DCjqmzqYI05cnKNK4SZ25hrHkObup55Y74KiSZ8fZzN5GusJj56qqjm90QWtE6nOmIWv1iPtVbBUDkNCTDiqiCgfAyb4Djv8vi6NnNjfItOVUFpzsZVmU4/s400/border.png) repeat-x top left;}
     #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBkh7tuF7vxykA7fju-XxI08Z6XLgOR684-7-h1Di4WLQ4WnCHcB05Xnx0fdIF0NINUEv8-f1NxldCOM-VWW5qC1I30alCU5osBgV1aSoB2f9Am1fmywJMafaN9mK5IYp7XnyK6PY6uu4/s1600/controls.png) no-repeat -36px 0;}
     #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBkh7tuF7vxykA7fju-XxI08Z6XLgOR684-7-h1Di4WLQ4WnCHcB05Xnx0fdIF0NINUEv8-f1NxldCOM-VWW5qC1I30alCU5osBgV1aSoB2f9Am1fmywJMafaN9mK5IYp7XnyK6PY6uu4/s1600/controls.png) no-repeat 0 -32px;}
     #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPSRkJCsBJFfPWDkMqNaY59DCjqmzqYI05cnKNK4SZ25hrHkObup55Y74KiSZ8fZzN5GusJj56qqjm90QWtE6nOmIWv1iPtVbBUDkNCTDiqiCgfAyb4Djv8vi6NnNjfItOVUFpzsZVmU4/s400/border.png) repeat-x bottom left;}
     #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBkh7tuF7vxykA7fju-XxI08Z6XLgOR684-7-h1Di4WLQ4WnCHcB05Xnx0fdIF0NINUEv8-f1NxldCOM-VWW5qC1I30alCU5osBgV1aSoB2f9Am1fmywJMafaN9mK5IYp7XnyK6PY6uu4/s1600/controls.png) no-repeat -36px -32px;}
     #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBkh7tuF7vxykA7fju-XxI08Z6XLgOR684-7-h1Di4WLQ4WnCHcB05Xnx0fdIF0NINUEv8-f1NxldCOM-VWW5qC1I30alCU5osBgV1aSoB2f9Am1fmywJMafaN9mK5IYp7XnyK6PY6uu4/s1600/controls.png) repeat-y -175px 0;}
     #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBkh7tuF7vxykA7fju-XxI08Z6XLgOR684-7-h1Di4WLQ4WnCHcB05Xnx0fdIF0NINUEv8-f1NxldCOM-VWW5qC1I30alCU5osBgV1aSoB2f9Am1fmywJMafaN9mK5IYp7XnyK6PY6uu4/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/AVvXsEjpsexFy32BqsqgQREkVNO7namowi0ghMSDlQeKH3nIANJyf3L1dNzLcGwMuy3oCzhrctuetdzbi_19ZKWEjjuDMyZht1hacdrfXDBi74019vXCSDbFljwA6CbPbfm7VmYEAuDHVgYN_Fo/s400/loadingbackground.png) no-repeat center center;}
         #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLgxp_qeA8QWVrmtzmng8pnSxvwSw4XpHHfAAa9OtWD7-0htVNzcqCTBszfm3eWednjgTKjwet6FmD91XHmmxd-S-ymzeQUqIvBkPKE9yTW5jP0As6ozF4DAfMsrQ9_lYPF6-txTyH25Q/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/AVvXsEiBkh7tuF7vxykA7fju-XxI08Z6XLgOR684-7-h1Di4WLQ4WnCHcB05Xnx0fdIF0NINUEv8-f1NxldCOM-VWW5qC1I30alCU5osBgV1aSoB2f9Am1fmywJMafaN9mK5IYp7XnyK6PY6uu4/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