Awesome jQuery Popup For Facebook Like Box - V5 - Helper Blogger

Blogger Widgets | Templates | Tutorials


Wednesday, 4 April 2012

Awesome jQuery Popup For Facebook Like Box - V5

Recently one of my reader asked me for popup facebook like box which I am using on this blog.Therefore I kept my word and today publishing another cool jQuery popup for facebook like box. We have published four versions of facebook like box (Version1 | Version2 | Version3 | Version4) but today's popup is little different from them in this gadget because we have used another version of jQuery colorbox.As always you can add this gadget very easily to blog just copy and paste the code.You just have to replace my username with yours and you are done.See the demo of the gadget.

How To Add This Popup To Your Blog?

As always I have kept the installation extremely easy.You just have to copy and paste the code below...

  1. Now go to Blogger Dashboard > Design.
  2. Add a Gadget > HTML/JavaScript.
  3. Paste below code after replacing my username with yours.

    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%; height: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:url( repeat 0 0;}
    #cboxTopLeft{width:21px; height:21px; background:url( no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url( no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url( no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url( no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url( left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url( right top repeat-y;}
    #cboxTopCenter{height:21px; background:url( 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url( 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url( no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url( no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{background:url( no-repeat center center;}
        #cboxLoadingGraphic{background:url( no-repeat center center;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url( no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);

  The following provides PNG transparency support for IE6
  Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
.cboxIE6 #cboxTopLeft{background:url(;}
.cboxIE6 #cboxTopCenter{background:url(;}
.cboxIE6 #cboxTopRight{background:url(;}
.cboxIE6 #cboxBottomLeft{background:url(;}
.cboxIE6 #cboxBottomCenter{background:url(;}
.cboxIE6 #cboxBottomRight{background:url(;}
.cboxIE6 #cboxMiddleLeft{background:url(;}
.cboxIE6 #cboxMiddleRight{background:url(;}

.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], = "none", = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");

/* Facebook Likebox popup For Blogger By Helper Blogger
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {

.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*7;
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;'>
<center><img src="" width:300px; height:150px;"/></center>

<iframe src="//;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"><!-- Warning: Don't edit this line,If you edited this line then your gadget may not work --></iframe></center><p style=" float:right; margin-right:45px; font-size:4px;" ><a style=" font-size:8px; color:#3B78CD; text-decoration:none;" href="">Grab This Gadget »</a> </p></div>

Now replace btsnts with your facebook fan page username.(Highlighted in red color)

Customizations (Optional)

I have set the cookie refresh time to 7 days that means this popup will appear only once in 7 days to that specific visitor.If you want to appear this gadget daily the simply change the *7 value to *1 in above code.(Highlighted in Yellow color)

Need Help?

I have kept the installation extremely easy,if still you have any queries or questions about customizing this gadget then feel free ask me.I will solve your query as soon as time allows.


I have spent my hours on customizing and editing this gadget.Actually I use this gadget on my blog but one of my loyal reader asked me for that gadget so I kept my word and sharing this gadget with you.If you are using this gadget then you should not remove the credits links present on the footer of gadget.Also if you want to share this gadget then kindly link back to this article.


  1. oh, not working, i've tried several times, i don't know what I'm doing wrong :( It's simply gone, it never appears..

    1. Hey Its working perfectly,see screenshot below -

      Clear your browsers cookies then visit your blog.

    2. Same here,it's not working.. my blog url is

  2. sorry bro its not working please fix it and email

  3. hey all, it's work ... thankyou @Rahul for post this article ...
    . from now i will subscribe and follow you ..
    Thanks .

    1. Hey thanks for following and subscribing :)

  4. hi Rahul
    its working before 2 weeks but know its not working

    1. hey I have updated the script,pls re-install the widget and clear your browser's caches and cookies and go to your blog you will watch this pop up :)

  5. working thanks a lot ! in return i like this website page in fb and follow in twitter!

  6. where you change the fanpage url/name and how can i eliminate the close button?


  7. how do you stop it from popping up on all the pages.

    I only really want it to pop up once and only after 1 minute after been on the website


  8. Thank you!
    It is great widget.
    If you want to have a look
    please vist my blog:

  9. Dear Author
    I want to use "author red label / tag" to my blog
    How will I do it?

  10. This comment has been removed by the author.

  11. I consider something really specially in your site .

    Keep Blogging ............

    The Beautiful Names

  12. I have added this but i want remove the close button. Please help
    Free Software And Games

  13. This trick is realy great! Thanks, my fans are growing fast!

    Try my SEO Blogger Guest Posts

  14. It seem not working with my blog

    How to i fix it ?

  15. Great post.Very helpful.Continue creating such great posts.

    Blogger Whale

  16. dashboard >> javascript ???

    please update accordingly new blogger layout

  17. It's not working as html/java coding...suppose to come up on this page ( as per the configuration....but nothing is happening...

  18. it is not working .. help me out plz blogg url is

  19. This comment has been removed by the author.

  20. It is working on my test blog but not working on
    please help me.

  21. The box comes up again and again
    i wannaa that box come with first entry of blog.
    not again n again.


  22. Not work One off mine ,but work for the my other blog,thanks alot..its very awasome be in case i have a bad templete in my personal blog

  23. BCFBLThank you very much for this usefull information! I really understand the topic now!

    1. This comment has been removed by the author.

  24. Hi
    Nice blog Post but not working on my blog
    I have Used This Code After Copying From Here
    Friends Check Out
    Pak India fashion styles Provides Updates On Fashion In Pakistan & India.

  25. hwy there iz problem after installing have a look

  26. i cannot copy the me how to copy, when i paste it show See more at:


If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM