Get the latest updates from us for free

Sign-up for FREE weekly Newsletter.

Facebook Like Box Popup for Blogger

18:09 Posted by Hammad Ansari
Filed Under: ,


Most of the blogs have implemented the popup jquery boxes on their blogs, whether its a subscription form (which I'll post later) or the facebook like box. It works when you visit a blog a popup comes up having Facebook likebox. I believe its a great way to force your visitors to subscribe or like your blog. Today I'm gonna show you how to add the Facebook likebox jquery popup to your blogs. I'm sure you're gonna love it




Add the Facebook Likebox Popup!

  1. Go to Blogger > Design.
  2. Add a Gadget and select HTML/JavaScript.
  3. Add the following code to it.
  1. 

    <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/AVvXsEgimUCkGMEXdfCbR0Ws0Db4UvDFr34ELFqyFl5aKEJkbitbJDEVkmmxY2VKcMnsDsftHARn2jZhwFF_bZjQ0YdS1m9E4_aHXt0IY4EwlEh92a6x7VEyVjeyGvwxjHecS1Q7WSFdJr-vJGw/s1600/controls.png) no-repeat 0 0;} 
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9l7ktIx321DQuNqf2fAwJhiavjpSW9zDchqKmcZQd1MA1_aKWac7gSPcFf80nNzb_B8JsPL_NMd8d6nFEXdV_btIkpBB9v98IPBVgdIumeBbMLkmok_g8_0jHmwwqtMInwH8cY5lbqF8/s400/border.png) repeat-x top left;} 
     #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgimUCkGMEXdfCbR0Ws0Db4UvDFr34ELFqyFl5aKEJkbitbJDEVkmmxY2VKcMnsDsftHARn2jZhwFF_bZjQ0YdS1m9E4_aHXt0IY4EwlEh92a6x7VEyVjeyGvwxjHecS1Q7WSFdJr-vJGw/s1600/controls.png) no-repeat -36px 0;} 
     #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgimUCkGMEXdfCbR0Ws0Db4UvDFr34ELFqyFl5aKEJkbitbJDEVkmmxY2VKcMnsDsftHARn2jZhwFF_bZjQ0YdS1m9E4_aHXt0IY4EwlEh92a6x7VEyVjeyGvwxjHecS1Q7WSFdJr-vJGw/s1600/controls.png) no-repeat 0 -32px;} 
     #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9l7ktIx321DQuNqf2fAwJhiavjpSW9zDchqKmcZQd1MA1_aKWac7gSPcFf80nNzb_B8JsPL_NMd8d6nFEXdV_btIkpBB9v98IPBVgdIumeBbMLkmok_g8_0jHmwwqtMInwH8cY5lbqF8/s400/border.png) repeat-x bottom left;} 
     #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgimUCkGMEXdfCbR0Ws0Db4UvDFr34ELFqyFl5aKEJkbitbJDEVkmmxY2VKcMnsDsftHARn2jZhwFF_bZjQ0YdS1m9E4_aHXt0IY4EwlEh92a6x7VEyVjeyGvwxjHecS1Q7WSFdJr-vJGw/s1600/controls.png) no-repeat -36px -32px;} 
     #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgimUCkGMEXdfCbR0Ws0Db4UvDFr34ELFqyFl5aKEJkbitbJDEVkmmxY2VKcMnsDsftHARn2jZhwFF_bZjQ0YdS1m9E4_aHXt0IY4EwlEh92a6x7VEyVjeyGvwxjHecS1Q7WSFdJr-vJGw/s1600/controls.png) repeat-y -175px 0;} 
     #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgimUCkGMEXdfCbR0Ws0Db4UvDFr34ELFqyFl5aKEJkbitbJDEVkmmxY2VKcMnsDsftHARn2jZhwFF_bZjQ0YdS1m9E4_aHXt0IY4EwlEh92a6x7VEyVjeyGvwxjHecS1Q7WSFdJr-vJGw/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/AVvXsEjGcLy-MV0bVB7dOcznIPTdvEj6yYjmfYv8H38WJW2Yi8XT3hGxkrevdhXSHZux05bpZxZ1GfUqEJKQg58g69pz5CY6HW-CMcMl4aWZygIxpZIRrIH5AkJLc5RRgOEpG2cLIS90NVUxPCo/s400/loadingbackground.png) no-repeat center center;} 
         #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP8ea6tqLw65I6ovGApVUJt-KuFs9WnpC0ZwofzRyjxL6fG3zVmB_RSPSADwFVNZWpq9CEd_Sp-Y242s79M4pLlot0t3qMwiUUgNZ5lfTwVun5sNcvEaklN0PU2UfpjjCHS-Sou6vVEIs/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/AVvXsEgimUCkGMEXdfCbR0Ws0Db4UvDFr34ELFqyFl5aKEJkbitbJDEVkmmxY2VKcMnsDsftHARn2jZhwFF_bZjQ0YdS1m9E4_aHXt0IY4EwlEh92a6x7VEyVjeyGvwxjHecS1Q7WSFdJr-vJGw/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: #2554C7; 
   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://yourjavascript.com/2021211453/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; 
       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%2Fmybloggernews&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.mybloggertips.com">Blogger Widgets</a> via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggernews.com">MBN</a></p> 
</div> 
</div>

   4. Replace mybloggernews with your own value.
   5. Click save and you are done.
If you already have jQuery script in your template remove this:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>


Enjoy!

Peace and Happy Blogging!

Do you Like this Article?
Subscribe via Email

1 comments:

Anonymous said...

Good day! This is kind of off topic but I need some help from
an established blog. Is it difficult to set up your
own blog? I'm not very techincal but I can figure things out pretty quick. I'm thinking about
creating my own but I'm not sure where to begin. Do you have any tips or suggestions? Appreciate it
Also see my page :: Paris

Confused? Feel free to ask

Subscribe to: Post Comments (Atom)
 

Copyright © 2012 All Rights Reserved. Any Article on This Blog can not be repost or reproduce in any form without the permission of Author.