..::TechnoWorld::..: Facebook Like Box Popup for Blogger Blogs

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!

Go to Blogger > Design.
Add a Gadget and select HTML/JavaScript.
Add the following code to 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/AVvXsEjYwdaO-If7b7u5KtIVm1qNcUYtFfJoVin6sAqRayuuek-A9YrxSDg7xCK_AScbk2cKuErHE5sPStfjpUZEgQgGwt31fprFhy83HoifS_VukhLqrOnOyn8r0Phfl5e6ukLTmC8PaFE3rSU/s1600/controls.png) no-repeat 0 0;} 
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRcoMXYGjBXwunVnBolRvkml4R6_KwuNB8I-Ly6GJ30y4dPRpL4Zpgng2F1aonm7zt1bAFdxUBup_epuoEtg5vyFD2evLfCY5syO8lksB2aWZQjFO-MENbz-SnLB03RQQLYerZEaGx7o4/s400/border.png) repeat-x top left;} 
     #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYwdaO-If7b7u5KtIVm1qNcUYtFfJoVin6sAqRayuuek-A9YrxSDg7xCK_AScbk2cKuErHE5sPStfjpUZEgQgGwt31fprFhy83HoifS_VukhLqrOnOyn8r0Phfl5e6ukLTmC8PaFE3rSU/s1600/controls.png) no-repeat -36px 0;} 
     #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYwdaO-If7b7u5KtIVm1qNcUYtFfJoVin6sAqRayuuek-A9YrxSDg7xCK_AScbk2cKuErHE5sPStfjpUZEgQgGwt31fprFhy83HoifS_VukhLqrOnOyn8r0Phfl5e6ukLTmC8PaFE3rSU/s1600/controls.png) no-repeat 0 -32px;} 
     #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRcoMXYGjBXwunVnBolRvkml4R6_KwuNB8I-Ly6GJ30y4dPRpL4Zpgng2F1aonm7zt1bAFdxUBup_epuoEtg5vyFD2evLfCY5syO8lksB2aWZQjFO-MENbz-SnLB03RQQLYerZEaGx7o4/s400/border.png) repeat-x bottom left;} 
     #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYwdaO-If7b7u5KtIVm1qNcUYtFfJoVin6sAqRayuuek-A9YrxSDg7xCK_AScbk2cKuErHE5sPStfjpUZEgQgGwt31fprFhy83HoifS_VukhLqrOnOyn8r0Phfl5e6ukLTmC8PaFE3rSU/s1600/controls.png) no-repeat -36px -32px;} 
     #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYwdaO-If7b7u5KtIVm1qNcUYtFfJoVin6sAqRayuuek-A9YrxSDg7xCK_AScbk2cKuErHE5sPStfjpUZEgQgGwt31fprFhy83HoifS_VukhLqrOnOyn8r0Phfl5e6ukLTmC8PaFE3rSU/s1600/controls.png) repeat-y -175px 0;} 
     #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYwdaO-If7b7u5KtIVm1qNcUYtFfJoVin6sAqRayuuek-A9YrxSDg7xCK_AScbk2cKuErHE5sPStfjpUZEgQgGwt31fprFhy83HoifS_VukhLqrOnOyn8r0Phfl5e6ukLTmC8PaFE3rSU/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/AVvXsEiag1o5x8cEWhe5SwFHV61AuFfscui-7c2bSiqZcpdkjf9FwPChfL6_q6zGUEoAmTG57N4wAElzXJ5o-8gO5-_pKLS-P0JN90jrEbOJAC8rtI53vibMck4mmOXkdeoIb2sAC3mSMEuhj5Y/s400/loadingbackground.png) no-repeat center center;} 
         #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqvrrvQGMEgEMnJHOjQxBipqc9jm9bdsipVIJKUoO93cnq1oQY5AriOyjHVOEIGA_44Y2FxREbqpehwnIhyon6w-0hzE8rzz_UZK4QbC8WYkU5-Np-df9VuKn3zVhNtIXDsipaDIzGzTE/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/AVvXsEjYwdaO-If7b7u5KtIVm1qNcUYtFfJoVin6sAqRayuuek-A9YrxSDg7xCK_AScbk2cKuErHE5sPStfjpUZEgQgGwt31fprFhy83HoifS_VukhLqrOnOyn8r0Phfl5e6ukLTmC8PaFE3rSU/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%2FTechnoWorld&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.tricksjustforyou.blogspot.com">Techno World</a> via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.tricksjustforyou.blogspot.com">TW</a></p> 
</div> 
</div>

4. Replace TechnoWorld 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>

..::TechnoWorld::..

Pages

Tuesday 13 March 2012

Facebook Like Box Popup for Blogger Blogs

Add the Facebook Likebox Popup!

No comments:

Pages

Tuesday 13 March 2012

Facebook Like Box Popup for Blogger Blogs

Add the Facebook Likebox Popup!

No comments:

Subscribe To