jQuery Popup For Facebook LikeBox

On this occasion we will discuss about the jQuery Popup For Facebook LikeBox. Sure we've seen a variety like the look up box. But in this discussion, we will see a new sesuat than ever. At this widget, Facebook like box will appear when we opened the first page of the blog. So, you no longer need to put up like a floating box on the blog or something, because it may make your blog look tacky. Thus, this widget will make your blog visitors to be more than happy to see your blog. So, if you tertaik with this widget and want to put your blog, just follow these steps may lead to rigorous:

• Go To Blogger > Design
• Click choose a gadget
• Select HTML/javascript widget
• Paste the following code inside it 

 <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/AVvXsEjuIV97vKSbLygqJ8uxepcwl5p8YCC2yCTAnAOPfs05cteFqnb6j6sxRA3nlRWR_a6amiJIYHfOlnVn6CNCbx1KjZyV6OYet1BtRp3QFLzJNZsjum-86Ifi6aTIrhVf8UKkpD8VSwZxPRs/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGs901sowBsPolsNmi-f8bCpzFbzv-grV2EEE1wQPl8L5I8QQ5erAFKVKniu42Jlk08DnLBSUiMlDdHSPaPGHhybtQsVxG0hKKT8xHN20AJv38fklxNnQxFuQ4oQJ0fCrgKHdsPH2XJiE/s400/border.png) repeat-x top left;}
     #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIV97vKSbLygqJ8uxepcwl5p8YCC2yCTAnAOPfs05cteFqnb6j6sxRA3nlRWR_a6amiJIYHfOlnVn6CNCbx1KjZyV6OYet1BtRp3QFLzJNZsjum-86Ifi6aTIrhVf8UKkpD8VSwZxPRs/s1600/controls.png) no-repeat -36px 0;}
     #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIV97vKSbLygqJ8uxepcwl5p8YCC2yCTAnAOPfs05cteFqnb6j6sxRA3nlRWR_a6amiJIYHfOlnVn6CNCbx1KjZyV6OYet1BtRp3QFLzJNZsjum-86Ifi6aTIrhVf8UKkpD8VSwZxPRs/s1600/controls.png) no-repeat 0 -32px;}
     #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGs901sowBsPolsNmi-f8bCpzFbzv-grV2EEE1wQPl8L5I8QQ5erAFKVKniu42Jlk08DnLBSUiMlDdHSPaPGHhybtQsVxG0hKKT8xHN20AJv38fklxNnQxFuQ4oQJ0fCrgKHdsPH2XJiE/s400/border.png) repeat-x bottom left;}
     #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIV97vKSbLygqJ8uxepcwl5p8YCC2yCTAnAOPfs05cteFqnb6j6sxRA3nlRWR_a6amiJIYHfOlnVn6CNCbx1KjZyV6OYet1BtRp3QFLzJNZsjum-86Ifi6aTIrhVf8UKkpD8VSwZxPRs/s1600/controls.png) no-repeat -36px -32px;}
     #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIV97vKSbLygqJ8uxepcwl5p8YCC2yCTAnAOPfs05cteFqnb6j6sxRA3nlRWR_a6amiJIYHfOlnVn6CNCbx1KjZyV6OYet1BtRp3QFLzJNZsjum-86Ifi6aTIrhVf8UKkpD8VSwZxPRs/s1600/controls.png) repeat-y -175px 0;}
     #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIV97vKSbLygqJ8uxepcwl5p8YCC2yCTAnAOPfs05cteFqnb6j6sxRA3nlRWR_a6amiJIYHfOlnVn6CNCbx1KjZyV6OYet1BtRp3QFLzJNZsjum-86Ifi6aTIrhVf8UKkpD8VSwZxPRs/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/AVvXsEg7Oud32Gl_GAWPvvHsiTN6MUF2y8IX65L7g8apSoT0047he231RMhjJgLoNual_D6JGt4lx1sRYmyr7VhOkDt0IXm7rJYaxzmhnmzZPXynFp1kgX-dHP3QMd9VF2GwGMOLPyjvbqJJoGY/s400/loadingbackground.png) no-repeat center center;}
         #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-ch65DWbJcgtIs3fl2WLOuRlDfp3DAECdAZqHK8WINXXV_MTd0A_Qd2uBmtOoEPHVVWdf6kbaHpfaaFOyfh2EutN99yRwHnezCHGthE8QlV3FZf1padiJZ8uoUEfold525zmg8AehBj0/s400/loading.gif) no-repeat center center;}
         #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; 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/AVvXsEjuIV97vKSbLygqJ8uxepcwl5p8YCC2yCTAnAOPfs05cteFqnb6j6sxRA3nlRWR_a6amiJIYHfOlnVn6CNCbx1KjZyV6OYet1BtRp3QFLzJNZsjum-86Ifi6aTIrhVf8UKkpD8VSwZxPRs/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: #F66303;
   font-size: 20px !important;
   font-weight: bold;
   margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #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">Receive all updates via Facebook. Just Click the Like Button Below<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%2Fbloggertricks&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;" >Support by<a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://johannezalbert.blogspot.com">Bol | Joe</a></p>
</div>
</div>

Make this simple change:

• Replace bloggertricks with your facebook username.

Update :If your Facebook URL is too long and contains numbers then you may first create a branded Facebook username in seconds at Facebook.com/username
   5.   Hit the save button. Drag the widget to anywhere on your right sidebar.
     6. Click the orange save button towards top right.
done! Visit your blogs to see it poping up just beautifully. To review the widget just delete your browser cookies and refresh the page to see it appearing again.

Want the widget to appear Repeatedly:

If you want to prompt the likebox every time the visitor enters your blog then simply delete this *30 from the code above.

Good Luck

Source : My Blog Tricks