Today I am sharing another interesting jQuery popup email subscription form.This gadget adds a small email icon to the below left corner of your blog which scrolls along with page,when any user clicks on that icon the pop up come outs with email subscription form.This widget is similar to pop up email subscribe box which we have already shared on this blog,only the difference is that one was one time pop up i.e. that gadget is pop ups as soon as any visitors enter to blog and this one pop ups when any user clicks on email icon.I am providing a widget generator for this gadget so that you don't need to edit any code or other boring things :)  Now lets see how to add it to Blogger Blog.See the demo of gadget first.




Gadget Demo

How To Add Pop Up Email Subscription Form To Blogger?


First you have to add jQuery library to your blog.(Ignore this step is you have already added jQuery library to your blog.)

  1. Go to Blogger Dashboard > Template
  2. As always take a backup of your template first
  3. Now find for </head> tag in your template
  4. Add below code just before </head> tag.

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


Widget Generator

  1. Enter only your feedburner username in text box below.
  2. Hit the Generate Icon and then hit the Add to Blogger
  3. Now you will redirect to Blogger Add Gadget page,finally hit the Add Widget Button and drag your widget to the bottom of page.




Important - If you want to customize this gadget then only use below code.

<style type="text/css">
    #subscribe-button {
    float: left;
    position: fixed;
    bottom: 5%;
    left: 0;
    z-index: 999;
}

#subscribe-widget {
    display: none;
}
    /* Overlay */
#hb-overlay {
    background-color: #000;
}
    /* Container */
#hb-container {
    min-height: 350px;
    min-width: 500px;
    color: #222;
    background-color: #fff;
    border: 4px solid #ddd;
}

#hb-container .hb-data {
    padding: 8px;
}

#hb-container a.hbCloseImg {
    background: url(http://3.bp.blogspot.com/-XLFE72b5Ox4/T6z5k5ntCjI/AAAAAAAABuU/4U_YU_rNXOQ/s1600/hb-close-button.png) no-repeat;
    width: 25px;
    height: 29px;
    display: inline;
    z-index: 3200;
    position: absolute;
    top: -15px;
    right: -16px;
    cursor: pointer;
}

#description {
    color: #AAAAAA;
    font-family: times New Roman;
    font-size: 25px;
    font-style: italic;
}

#description img {
    float: left;
    height: 80px;
    padding: 0 25px 0 10px;
    width: 80px;
}

#hbfollowForm {
    padding: 15px;
}

#hbfollowForm p {
    margin: 0 0 10px;
}

#hbfollowForm input:not([type="checkbox"]) {
    width: 93%;
    margin-top: 4px;
    margin-bottom: 20px;
    padding: 10px 5px 10px 25px;
    border: 1px solid rgb(178, 178, 178);
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

#hbfollowForm input:not([type="checkbox"]):active, #hbfollowForm input:not([type="checkbox"]):focus {
    border: 1px solid rgba(91, 90, 90, 0.7);
    background: rgba(238, 236, 240, 0.2);
    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}

#hbfollowForm .button input {
    background: none repeat scroll 0 0 #3D9DB3;
    border: 1px solid #1C6C7A;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-size: 24px;
    margin-bottom: 10px;
    padding: 8px 5px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    width: 30%;
    float: right;
}

#hbfollowForm .button input:hover {
    background: #4ab3c6;
    text-decoration: none;
}

#hbfollowForm .button input:active, #hbfollowForm .button input:focus {
    background: rgb(40, 137, 154);
    position: relative;
    top: 1px;
    border: 1px solid rgb(12, 76, 87);
    -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}

.hbFollowFooter {
    text-align: center;
    font: 10px Tahoma, Helvetica, Arial, Sans-Serif;
    padding: 7px 0;
    margin-top: 80px;
    text-shadow: 0px 2px 3px #555;
    position: absolute;
    width: 500px;
}

.hbFollowFooter a {
    color: #222;
    text-decoration: none;
}

.hbFollowFooter a:hover {
    color: #fff;
}
    <!--[if lt IE 7]> #hb-container a.hbCloseImg {
    background: none;
    right: -14px;
    width: 22px;
    height: 26px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://3.bp.blogspot.com/-XLFE72b5Ox4/T6z5k5ntCjI/AAAAAAAABuU/4U_YU_rNXOQ/s1600/hb-close-button.png', sizingMethod='scale');
}

#hbfollowForm input {
    padding: 10px 5px 10px 32px;
    width: 93%;
}

#hbfollowForm input[type=checkbox] {
    width: 10px;
    padding: 0;
}
    <![endif]-->
</style>
<div id="subscribe-button">
    <a class="subscribe" href="#"><img src="http://2.bp.blogspot.com/-9xC6cFMlUmw/T6z5lzf--tI/AAAAAAAABuY/MKb9bZkgxu0/s1600/hb-email-icon.png" alt="subscribe" /></a>
</div>
<div id="subscribe-widget">
    <div id="hbfollowForm">
        <img alt="Subscribe" border="0" float="center" src="http://1.bp.blogspot.com/-c92UhDtoJP0/T6z5oSBQ6CI/AAAAAAAABus/byn1zhPKyyA/s1600/hb-subscribe-via-email.PNG"
        />
        <div id='description'>
            <img alt="email" border="0" src="http://3.bp.blogspot.com/-WeqZw3A-y0Y/T6z5mv92KcI/AAAAAAAABuk/Hob81ZvAfCw/s1600/hb-email-icon1.PNG"
            />Subscribe to our mailing list to get the updates to your email inbox...</div>
        <form
        action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=hblogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"
        target="popupwindow">
            <input name="email" placeholder="Enter Your Email..." required="required"
            type="text" />
            <input name="uri" type="hidden" value="hblogger" />
            <input name="loc" type="hidden" value="en_US" />
            <div class="button">
                <input type="submit" value="Subscribe" />
            </div>
            </form>
    </div>
    <div class="hbFollowFooter">Delivered by
        <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a>| Powered by
        <a href="http://www.helperblogger.com/" rel="dofollow" target="_blank">Blogger Widgets</a>
    </div>
</div>
<script src="http://helperblogger.ucoz.com/code/email-sub-form-popup.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(function (a) {
        a("#subscribe-button .subscribe").click(function (b) {
            a("#subscribe-widget").modal();
            return false
        })
    })
</script>


  • Now replace hblogger with your feedburner username.
  • If you want to use your own icon then replace the code highlighted in yellow color with your own image URL.
Now save your all changes and visit your blog to see this amazing gadget.

Post a Comment

  1. Dear Sir, thanks for your nice blog. I have installed pop up email subscription box with JQuery but could not veiw whether is is appropriate or not. Pl help. My blog address is parthasarathi108.blogspot.com.
    Yours faithfully Partha

    ReplyDelete
    Replies
    1. Hello Sir, please will you explain the problem in brief so that I can solve it easily,also I have checked out my both codes and they are working correctly.

      Delete
  2. WONDERFUL! Thank you for your generosity, I just installed the popup email widget (and I had NEVER before done anything w/ HTML) to www.chasingdragonsaway.com. The widget works beautifully!

    Thanks again Rahul!
    -Lisa

    ReplyDelete
  3. another Nice widget. but seems not working in my blog. Tried every thing but still no clue!

    ReplyDelete
  4. how can we adjust the position of the button? i wanted to move it to the right side

    ReplyDelete
  5. Thank you Rahul This widget is working properly on my blog
    Please Visit my blog:
    http://www.funatall.co.cc

    ReplyDelete
  6. Hello Rahul...... Thanks a lot for this. This is working fine on my blog...


    Also visit my blog at http://amitbhatnagar4u.blogspot.com

    ReplyDelete
  7. Hi Rahul... First of all thank you so much for developing this code...Very usefull!!...But the link "http://helperblogger.x10.mx/scripts/jquery-popup.js" seems to be broken...Can you help me? Is there another link for replacing the old one?...

    ReplyDelete
  8. Not works now, what happend to it, not works in your demo link too,

    ReplyDelete
  9. Thanks keep this work.

    http://pakeset4u.blogspot.com/

    ReplyDelete
  10. Didn't understand the widget? Check the blog below
    Working very well @

    http://martinslibrary.blogspot.com

    http://softwarecheats.blogspot.com

    Find new features on the blogs

    ReplyDelete
  11. A social networking service is a platform to build social networks or social relations among people who, for example, share interests, activities, backgrounds, or real-life connections.

    ReplyDelete
  12. This is awesome! I use mailchimp for my email subscriptions is there anyway to still use this since I don't use feedburner?

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

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

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

    ReplyDelete
  16. Yes, It is working perfectly. You can check here www.juxtshare.com

    I think some people are forgetting to add jquery.

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

    ReplyDelete
  18. Head Injuries are positively not expected nor are the casualties or their families essentially learned on the reality and perhaps terrible results that can follow. This article is an all around looked into prologue to the distinctive sorts of head damage and Head harm side effects. http://www.mordocrosswords.com/2016/02/forms-head.html

    ReplyDelete
  19. I am very honored to introduce a free date recovery products to you, it is very useful and
    free,and professional technical support.

    ReplyDelete
  20. Thank you for your sharing. I will follow the steps and see what's happening. it's really annoying to recover data
    each time after forgetting data backups.

    ReplyDelete

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

 
Top