Create Pop-up Facebook Like Box for Your Blogger Blog in Four Simple Steps

Sponsored Links

>> Monday, February 6, 2012

I just learned how to create pop-up like box of Facebook in a Blogger blog. I also implemented the same to this blog. Its cool and simple technique. This pop up window will appear only once in the browser, hence when the reader visit your blog again he wont get frustrated by this pop-up. Before starting, thanks to Spice Up You Blog team for sharing this trick.

See the picture below. This is the sample of the pop up window that will appear in your blog.


 "Receive all updates via Facebook. Just click the Like button below" following this message, like box of your Facebook page will appear. This option is very useful to boost your Facebook page subscribers number.

Follow these steps to bring this pop up to your blog:

Caution: I strongly recommend you to take back up of your blog template before making any template changes!

1. Open you Blog dashboard and go to 'Layout' option.
2. Click on 'Add Gadget' option in any side bar of the layout, and add 'HTML/JavaScript'.
3. Now you will get a box to add  'HTML/JavaScript'. Copy the below code entirely and paste it into the above said box:

Note: Before copying the script, change the text 'technocator' marked in red to your Facebook page name. For example: if your Facebook page URL is '' just copy 'yourpagename' and paste instead of 'technocator'.



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;}
#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;}
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( no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url( repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url( no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url( no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url( repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url( no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url( repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url( repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadingOverlay{background:url( no-repeat center center;}
#cboxLoadingGraphic{background:url( 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( 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 {
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
box-shadow: 5px 5px 5px #CCCCCC;
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 {
.demo {

<script src=''></script>

<script src=""></script>
<script type="text/javascript">
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"});
<!-- 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>

<iframe src="//
technocator&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>


<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="">Blog Gadgets</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="">Blogger Widgets</a></p>

4. Once copy and paste is completed just press OK and save the template.

Now open your blog in a fresh browser and check if the Like Box pop-up is loading. If it is loading the mission is success. Else please let me know the issue description in the below comment column. Let me help you to troubleshoot.

Like this post? please share and promote! by clicking below icons:

Post a Comment

Related Posts Plugin for WordPress, Blogger...

About This Blog, as its name denotes, is a Technology Locator. provides you news and reviews on latest trends in technology, internet, social media, and gadgets. You can brows through several how-to articles and tips and tricks for better usability of Computer and Internet Technology. Please feel free to join our Facebook Fan page and subscribe to our posts to keep yourself updated.Read more here

Write for Technocator

If you are interested to write about technology topics and tutorials, technocator provides you an opportunity to become a guest blogger.
In return you will get full credit for the post, an author page with a bio and your website will also be linked at the top and bottom of every post you make.
More Details here

  © Blogger template Werd by 2009

Back to TOP