Update Notice (4 Dec. 2014) - Hi, We have started updating non-working scripts,demos and widget generators and it is almost done still if you find any broken script,demo or W.G then you can report it here. Provided link will be fixed within 24 hours.Thanks and regards.

Saturday, 5 May 2012

Add Pop Up Email Subscribe Box With jQuey To Blogger


Click On Image To Enlarge

You may watch many sites that are having a email subscribe window which appears when any new visitor enters to the website.Here I have created another jQuery popup for stylish email box which is extracted from studiopress and I have used a jQuery colorbox to add a cool pop up to it.This pop up will appear once in a seven days to that specific visitor so that it will not irritate your readers daily.It will help you to increase the number of your RSS subscribers.Here I am providing a demo of this gadget just click on the button below to see the demo.

Live Demo

How To Add This Pop Up To Blogger?


As always I have kept the installation extremely easy,you just have to copy and paste the code after replacing my feedburner username with yours.

  1. Go to Blogger Dashboard > Design > Layout
  2. Now click on Add a Gagdget > HTML/Javascript
  3. Now copy below code and paste it.

<link rel="stylesheet" href="https://269827695c7c05b4f44562afc525cc71d7261db3.googledrive.com/host/0B00G46OQ_mfCdnowckpzc1dxMDQ/colorbox-css-code-helperblogger.css" />
<style>
 /*-----------------------------------------------------------------------------------*/ 
/*Email Subscribe Box Popup By Helper Blogger @helperblogger.com 
/*-----------------------------------------------------------------------------------*/ 
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif;
    color: #666;
    height: 355px;
}

#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='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> 
<script src="https://269827695c7c05b4f44562afc525cc71d7261db3.googledrive.com/host/0B00G46OQ_mfCdnowckpzc1dxMDQ/jquery.colorbox.js"></script> 
 <script type="text/javascript">
jQuery(document).ready(function(){
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:"390px", 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;'> 
<style> .home-featured-right {
    background: url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/dashes-bg.png) #d05353;
    border: 5px solid #fff;
    font-size: 16px;
    margin: 0px;
    width: 320px;
    font-family: calibri;
}

.home-featured-right,
.home-featured-right p,
.home-featured-right h4.widgettitle {
    color: #fff;
    text-shadow: #a64242 -1px -1px;
    text-align: center;
}

.home-featured-right p {
    font-size: 16px;
    margin-bottom: 20px;
}

.home-featured-right .widget {
    margin: 35px;
}

.home-featured-right h4.widgettitle {
    font-size: 26px;
    margin-bottom: 20px;
}

.home-featured-right input[type=text] {
    -moz-box-shadow: inset 0 1px 2px 1px #eee;
    -webkit-box-shadow: inset 0 1px 2px 1px #eee;
    background: #fff url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-icon.png) no-repeat 16px 15px;
    border-bottom: none;
    border-left: 1px solid #963c3c;
    border-right: none;
    border-top: 1px solid #963c3c;
    box-shadow: inset 0 1px 1px 1px #eee;
    color: #000;
    font-family: Verdana, Arial, Tahoma, sans-serif;
    font-size: 12px;
    padding: 14px 15px 14px 45px;
    width: 180px;
}

#home-featured .home-featured-right input[type=submit] {
    background: url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-button.png) no-repeat !important;
    border: none;
    font-size: 0;
    height: 28px;
    margin: 0 0 0 15px;
    line-height: 0;
    text-indent: -9999px;
    width: 26px;
}

#email-news-subscribe .email-box {
    padding: 5px 10px;
    font-family: "Arial","Helvetica",sans-serif;
    border-top: 0;
    border-image: initial;
    height: 35px;
    margin-left: -20;
}

#email-news-subscribe .email-box input.email {
    background: #FFFFFF;
    border: 1px solid #dedede;
    color: #999;
    padding: 7px 10px 8px 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    border-image: initial;
    font-family: "Arial","Helvetica",sans-serif;
}

#email-news-subscribe .email-box input.email:focus {
    color: #333
}

#email-news-subscribe .email-box input.subscribe {
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
    font-family: "Arial","Helvetica",sans-serif;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #cc7c00;
    color: white;
    text-shadow: #d08d00 1px 1px 0;
    padding: 7px 14px;
    margin-left: 3px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    border-image: initial;
}

#email-news-subscribe .email-box input.subscribe:hover {
    background: #ff9b00;
    background-image: -moz-linear-gradient(top,#ffda4d,#ff9b00);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
    outline: 0;
    -moz-box-shadow: 0 0 3px #999;
    -webkit-box-shadow: 0 0 3px #999;
    box-shadow: 0 0 3px #999 
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
    background: -moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
    -pie-background: linear-gradient(270deg,#ffda4d,#ff9b00);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #cc7c00;
    color: #FFFFFF;
    text-shadow: #d08d00 1px 1px 0
}   
</style>  

<div class="home-featured-right">
    <div id="enews-2" class="widget enews-widget">
        <div class="widget-wrap">
            <div class="enews">
                <h4 class="widgettitle">Sign Up for Free Email Updates</h4>
                <p>Get our latest updates direct in your inbox.Just enter your wail address
                    below....</p>
                <p>Your privacy and email address are safe with us!</p>
                <div id="email-news-subscribe">
                    <!-- Email Subscribe -->
                    <div class="email-box">
                        <form action="http://feedburner.google.com/fb/a/mailverify" method="post"
                        target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=hblogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                            <input class="email" type="text" style="width: 150px; font-size: 12px;"
                            id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;"
                            onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" />
                            <input type="hidden" value="hblogger" name="uri" />
                            <input type="hidden" name="loc" value="en_US" />
                            <input class="subscribe" name="commit" type="submit" value="Subscribe"
                            />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end .home-featured-right -->
<div style="background: #fff;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <!-- Don't remove the credit links,If you removed credits then your gagdet will not work --><span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://goo.gl/9fXrd" target="_blank" >Blogger Widgets »</a></span></div></div>
</div>
</div>
</div>

Replace hblogger with your feedburner username.

Now save your gadget and you are done.

Customizations


I have set the cookie refresh time to seven days that means this pop up will appear only once to that specific visitor.You can easily change this value by changing the value 7.But if you set the value to low then it can irritate your daily readers.So that I recommend you to set the value between 3 to 7.

Your comments and queries are always welcomed.Also don't forgot to add a link back to this article while sharing this gadget with your readers.I hope you all will support me.


54 Comments : Read Them Below Or Add One

  1. he dear how i can make short in the end og blog

    ReplyDelete
  2. Sorry,But I can't understand what are you asking???

    ReplyDelete
  3. I Rahul I have this widget on my blog but I am unable to see any pop up please help . I tried with removing jquery for conflict issues but it did not work either.

    ReplyDelete
  4. Hey your blog have two jQuery libraries,delete on of them and then try it.

    Good Luck....

    ReplyDelete
    Replies
    1. Rahul will you please tell me what are those two jQuery libraries and how to del them. Will deleting them effect other widgets ?? Please reply

      Delete
    2. Sure,find below code in your template

      <script src='http://code.jquery.com/jquery-latest.js'></script>

      and delete this.Now add this gadget and visit your blog.If this gadget doesn't pop up on your blog then delete your browser's cookies and visit your blog.

      Delete
    3. Rahul , I am using this jQuery for admin comment high lither , if I remove this the Admin comment will not highlight . Any comment on this ??

      Delete
    4. Anyways I have deleted this jquery n cookies too, but still not able to see the pop up.

      Delete
    5. Ops its working now, thanks Rahul , I deleted the jquery script form the above code , now I have added it and the pop is working fine now. But how can I make admin comment highlighter to work ??

      Delete
    6. Oh I see, now try for below

      find this code in above widget code and delete

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

      Now clear all cookies and try..

      Delete
    7. I deleted http://code.jquery.com/jquery-latest.js'> and kept this src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js

      It is working fine now, but after deleting src='http://code.jquery.com/jquery-latest.js'admin comment is not getting high lite.



      Code for highlite author comment is :http://www.southernspeakers.net/2012/01/highlight-author-comment-in-bloggers.html

      can we do something to make it work

      Delete
  5. than q man it is very useful to bloggers

    ReplyDelete
  6. Cool,

    but I am having problems with the CSS, on my website it shows up as:

    Sign Up for Free Email Updates

    Get our latest updates direct in your inbox.Just enter your wail address
    below….

    Your privacy and email address are safe with us!

    target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=hblogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';"
    onblur="if(this.value=='')this.value=this.defaultValue;" />


    Clearly the target part should be hidden...ideas?

    ReplyDelete
  7. Thank you Rahul, it's working and to be honest I was searching for a while something like this, well looks like your solution is simply the best
    Cheers

    ReplyDelete
  8. Do you have any idea how could i delay with 10 seconds the activation of this popup (when visitor is first landing on the main page?

    ReplyDelete
    Replies
    1. Hey I have not any idea about delaying :( but you can use ore facebook likebox with timer :)

      http://www.helperblogger.com/2012/06/jquery-facebook-like-box-popup-with.html

      Delete
  9. hay rahul it is not working for my blog help me and please let me know that how to make it always appear initially i dont want to make it appear after 3-7 days as well as im not getting what should be the user name as on feedburner i burned 3-4 of my blog so how to know my username for each blogs feed freshersbanks@gmail.com

    ReplyDelete
  10. Can i add social bookmarking widgets to this. .?

    ReplyDelete
  11. It was working Bro
    But disturbing other widgets

    ReplyDelete
  12. Thank you. It works fine. www.commentexpress.com

    ReplyDelete
  13. Thank you So much for this post! it really helped a lot!

    ReplyDelete
  14. thanks you .

    http://pakeset4u.blogspot.com/

    ReplyDelete
  15. Raul, I like the email pop up you've designed. Thank you so much. Is there no way I can be delay in appearance as my whole intention is to get people interested in my post first before they decide to subscribe? I think it appearing as you log on wouldn't help purpose for setting up the blog. Can you help?

    ReplyDelete
  16. Hi Raul, I added this box but when a reader logs in and enters the email for subscription, they get a feedburner message saying that the email cannot be subscribed to. can you help resolve this?

    ReplyDelete
  17. Hi.Rahel
    how to add the Email feed burnner pop up plugin or code to wordpress site.i was facing the problem since last 20 days.So please give me any the suggestion.
    Regards,
    Brahmaiah

    ReplyDelete
    Replies
    1. Hi.Rahul garu
      how to add the Email feed burnner pop up plugin or code to wordpress site.i was facing the problem since last 20 days.So please give me any the suggestion.
      Regards,
      Brahmaiah

      Delete
  18. hy dear your work is very nice.
    dear but it not work on my blog
    see it here
    my blog name is every1post.blogspot.com
    plz guide me
    i followed your step step but not popup
    i also read Vande Mataram comment and i check it but not work plz help me

    ReplyDelete
  19. Hello there I really like your creation can I ask if one wanted could I change the message on the pop up just by taking out yours in the code and replacing it with my own I want to offer a free ebook for the sign up also is there anyway I can configure feedburner to deliver this ebook on sign up cheers in advance keep up the good work

    ReplyDelete
  20. Hi there, how do I find what my Feedburner User Name is?

    ReplyDelete
  21. Thank you Rahul...this was very easy and works perfect :D ... my blog's here: http://glittersandmore.blogspot.in/

    ReplyDelete
  22. How do I find my Feedburner username?

    ReplyDelete
  23. #error It shows me subscription to “BTSNTS” !!!
    Are you trolling with us ???
    What is btsnts anyways ?

    Iam not removing the code for somedays so u can see it ...

    ReplyDelete
  24. http://awackyblog.blogspot.com

    ReplyDelete
  25. This comment has been removed by the author.

    ReplyDelete
  26. does not work/pop up for me too
    i have replaced the feedburner with feedblitz
    www.biotechnologist2020.com

    ReplyDelete
  27. i want to change texts on your code but its something heppens ..i cant see pop up after change it..

    Get our latest updates direct in your inbox.Just enter your wail address
    below....

    i want to change wail to mail

    my blog is www.runpatch.com

    ReplyDelete
  28. Thanks a lot ,Rahul it worked!!!
    www.dr3vedi.blogspot.com

    ReplyDelete
  29. I can't even copy the code? It won't alow me, and instead gives a link back to your site with "read more...;"

    ReplyDelete
  30. brother can you make a delay before it pop up so it will not add to bounce rate,,,

    ReplyDelete
  31. Dont work in my blog ??
    www.FunnyVideos.Ga

    ReplyDelete
  32. hey good post. Can you guide me if i want this popup to appear after 1 minute post the user opening my page..what can i do?

    ReplyDelete
  33. again can i use this with mailchimp as opposed to feedburner?

    ReplyDelete
  34. This is perfect!!! Wondering how I can add a photot to my popup box to advertise my ebook though....

    ReplyDelete
  35. It was really awesome i would like to use it but does it affect blog loading time

    ReplyDelete
  36. I just added this, but it is not working. Here is my blog. Please guide
    http://sandysandhu.blogspot.com/

    ReplyDelete
  37. nice post http://www.clubsideeffects.com

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box).PLEASE DO NOT SPAM