Feb 26, 2012

Add A jQuery Pop-Up Email Subscription Box With Social Widgets In Blogger

Email and Feed subscription is one of the proven way to boost your site traffic in short time. The n...


Add-A-jQuery-Pop-Up-Email-Subscription-Box-With-Social-Widgets-In-BloggerEmail and Feed subscription is one of the proven way to boost your site traffic in short time. The number of feed subscriber shows how popular your site really is among the visitor. Also the Email subscribers are the most engaged and loyal visitor of your site. Judging a site with feed subscriber is an effective way to measure site popularity. But to turn your normal visitors into loyal subscribed ones’, you first need to show them the option. We had a good number of email subscriber but that was not something we liked. So we decided to go for author effective way to show subscription option to our visitors and then we implemented a pop-up subscription box in our blog. That’s almost 20 days ago and can you believe that our daily email subscriber got more then double in this short time! I am not blaming you if you don’t believe this, even I was surprised with the result. Then we added some social engaging buttons like Facebook Like Box, Google +1 Box, Tweet box and Delicious Box there and I can say the result is quite satisfactory. Now I am going to show you how to add a pop-up subscription box with social buttons in you Blogger powered site. Continue to find out.

The idea is actually comes from an amazing designer named Franklin Manuel from Bloggermint. We will add Email subscription field, RSS subscription button, Facebook Like Box, Google +1 Box, Tweet Box and Stumbleupon Badge in the pop-up box. We will use Colorbox to create a lightbox which will be our pop-up platform and jQuery cookie tracker to manager cookie (Which will show the Pop-up box once per visitor). This tutorial is for Blogger/Blogspot site. The result is going to look like the following (Only there will be Stumbleupon Button replacing Delicious Button). For live demo, clear your browser cookie and visit any page of this site.

Add-A-jQuery-Pop-Up-Email-Subscription-Box-With-Social-Widgets-In-Blogger-1

Log in to your blogger account, click on Design from blogger dashboard. Then click on Edit HTML (Go to Template > Edit HTML if you are using new blogger dashboard). Before making any change, backup your template so that you can restore your template if anything goes wrong.

CSS Styles

First we need to add some CSS snippet in the template. Find the ]]></b:skin> and paste the following codes just above it.

/* jQuery Pop-Up Subscription with Social Badges by abctrick.net */
@import url(http://dl.dropbox.com/u/64097534/Colorbox/colorbox.css);
#subscribe {
 font: 12px/1.2 Arial, Helvetica, sans-serif;
}
#subscribe a, #subscribe a:hover, #subscribe a:visited {
 text-decoration:none;
}
.popup-title {
 color: #2C2D31;
 font-size: 20px;
 font-weight: bold;
 font-family: Calibri, sans-serif;
 margin: 10px 0;
 text-align: center;
}
.popup-tagline {
 color: #999;
 font-size: 18px;
 font-family: Calibri, sans-serif;
 font-weight: normal;
 margin: 0;
 text-align: center;
}
#subs-container {
 padding: 35px 0 30px 0;
 position: relative;
}
.popup-side {
 width: 170px;
 text-align: center;
}
.popup-side.left {
 padding: 0 30px 0 15px;
 border-right: 1px solid #ecedf3;
}
.popup-side.right1 {
 float: right;
 margin-top: -200px;
 margin-right: 10px;
}
.popup-icon {
 width: 72px;
 height: 54px;
 padding: 6px 0 0 0;
 margin: 0 auto;
}
.popup-icon a.rss {
 display: block;
 width: 70px;
 height: 56px;
 margin: 0 auto;
}
.popup-icon a {
 display: block;
 width: 72px;
 height: 54px;
}
.popup-icon a.email img, .popup-icon a.rss img {
 margin: -5px 0 0;
 border: 0 none;
}
.popup-side h4, .popup-side h4 a {
 font-size: 14px;
 line-height: 17px;
 font-family: Calibri, sans-serif;
 color: #f26535;
 font-weight: bold;
}
.popup-side h4 {
 margin: 20px 0 10px 0;
}
.popup-side h5 {
 font-size: 13px;
 font-family: Calibri, sans-serif;
 font-weight: normal;
 color: #5e6066;
 line-height: 18px;
 margin: 0 0 20px 0;
}
a.sub {
 background: url("http://2.bp.blogspot.com/-QDKp2tYdFy4/Tv8_gWa0uyI/AAAAAAAAFaE/jmuDxRPURKc/s1600/subscribe-button.jpg") no-repeat scroll 0 0 transparent;
 color: #996633;
 display: block;
 height: 44px;
 line-height: 29px;
 margin: 0 auto;
 text-indent: -999em;
 width: 130px;
}
.popup-side h4 a:hover {
 color: #f26535;
}
#popup-or {
 background: #fff;
 font-size: 12px;
 font-weight: bold;
 height: 25px;
 line-height: 25px;
 margin: -115px 0 0 208px;
 position: absolute;
 width: 20px;
}
a:link, a:visited {
 border:none;
}
.demo {
 display:none;
}
#emailpopup {
 padding-top : 20px;
 margin: 0 auto;
}
#emailboxpopup {
 background:url(http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2HIw/s28/w2b-mail.png) no-repeat scroll 4px center transparent;
 padding:7px 15px 7px 35px;
 width:120px !important;
 color:#444;
 font-family : Calibri, sans-serif;
 font-weight : normal;
 font-style : italic;
 font-size:12px;
 text-decoration : none;
 border : 1px solid #d3d3d3 !important;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 -moz-box-shadow: 1px 1px 2px #CCC inset;
 -webkit-box-shadow: 1px 1px 2px #CCC inset;
 box-shadow: 1px 1px 2px #CCC inset;
}

jQuery Trigger

Now find out </head> and add the following scripts just above it.

<!-- jQuery Library - Remove this if you already have it -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<!-- Colorbox jQuery -->
<script src='http://dl.dropbox.com/u/64097534/Colorbox/js/jquery.colorbox-min.js'></script>
<!-- Twitter Button jQuery - Remove if you already have this -->
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
<!-- Google +1 Button jQuery - Remove if you already have this -->
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>{lang: 'en'}</script>
<!-- Stumbleupon Button jQuery - Remove if you already have this -->
<script src='https://platform.stumbleupon.com/1/widgets.js' type='text/javascript'></script>
<!-- Cookie manager and CSS targetor -->
<script type='text/javascript'> 
  jQuery(document).ready(function(){
    if (document.cookie.indexOf('visited=true') == -1) {
        var fifteenDays = 1000*60*60*24*15;
        var expires = new Date((new Date()).valueOf() + fifteenDays);
        document.cookie = "visited=true;expires=" + expires.toUTCString();
    $.colorbox({width:"480px", inline:true, href:"#subscribe"});
        }
});
</script>

This script is assigned to contain cookies of fifteen days. The var fifteenDays = 1000*60*60*24*15; controls it. It means the pop-up box will re-appear after 15 days. You can change the duraion by changing 15 to any value (Days).

HTML Markup

Now time to put some HTML codes on your template. Find out </body> and paste the following code just above it.

<div style='display:none'>
  <div id='subscribe' style='padding:10px; background:#fff;'>
    <h2 class='popup-title'>Never Miss Any Update From Us!</h2>
    <h3 class='popup-tagline'>Get notified about our updates.</h3>
    <div class='clearfix' id='subs-container'>
      <div class='popup-side left'>
        <div class='popup-icon'><a class='email' href='http://feedburner.google.com/fb/a/mailverify?uri=abctrick/UEvp' rel='nofollow'><img src='http://1.bp.blogspot.com/-lU-yDCK1vAc/Tv8_fA2EUxI/AAAAAAAAFZ0/x8PHb5iq46Y/s1600/email.jpg'/></a></div>
        <h4><a href='http://feedburner.google.com/fb/a/mailverify?uri=abctrick/UEvp' rel='nofollow'>Subscribe by Email</a></h4>
        <h5>Get alerts directly into your inbox after each post and stay updated!</h5>
        <div class='emailpopup'>
          <form action='http://feedburner.google.com/fb/a/mailverify' id='feedform' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=abctrick/UEvp&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=480&#39;);return true' target='popupwindow'>
            <input gtbfieldid='3' id='emailboxpopup' name='email' onblur='if(this.value == &#39;&#39;) this.value=&#39;Put Email &amp; Hit Enter&#39;' onfocus='if(this.value == &#39;Put Email &amp; Hit Enter&#39;) this.value=&#39;&#39;' type='text' value='Put Email &amp; Hit Enter'/>
            <input name='uri' type='hidden' value='abctrick/UEvp'/>
            <input name='loc' type='hidden' value='en_US'/>
            <input type='hidden' value='Submit'/>
          </form>
        </div>
      </div>
      <div id='popup-or'>OR</div>
      <div class='popup-side right1'>
        <div class='popup-icon'><a class='rss' href='http://feeds.feedburner.com/abctrick/UEvp' rel='nofollow'><img src='http://3.bp.blogspot.com/-S5O4WgHPwnU/Tv8_f5Zm3hI/AAAAAAAAFZ4/z1LkGTwAwIM/s1600/rss.jpg'/></a></div>
        <h4><a href='http://feeds.feedburner.com/abctrick/UEvp' rel='nofollow'>Subscribe by RSS</a></h4>
        <h5>Add our RSS to your feedreader to get regular updates from us.</h5>
        <a class='sub' href='http://feeds.feedburner.com/abctrick/UEvp' rel='nofollow' title='Subscribe Now!'>Subscribe</a> </div>
    </div>
    <div style='clear: both;'></div>
    <div id='counterpopup'>
      <div align='center'>
        <table border='0' cellpadding='2' cellspacing='0' width='auto'>
          <tbody>
            <tr>
              <td valign='top'><g:plusone href='http://www.abctrick.net' size='tall'></g:plusone></td>
              <td valign='top'><a class='twitter-share-button' data-count='vertical' data-url='http://www.abctrick.net' href='https://twitter.com/share'>Tweet</a></td>
              <td valign='top'><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.abctrick.net&amp;send=false&amp;layout=box_count&amp;width=55&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=trebuchet+ms&amp;height=90&amp;appId=116926765079978' style='border:none; overflow:hidden; width:55px; height:90px;'></iframe>
              <td valign='top'><su:badge layout="5" location="http://www.abctrick.net"></su:badge></td>
                </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!--Please Keep The Credit -->
    <p style="float:right;  margin-right:40px;  font-size:10px;" >Powered By <a style="font-size:10px; text-decoration:none;" href="http://www.abctrick.net">Software Review</a></p>
  </div>
</div>

Here you need to make some changes:

  • Replace abctrick/UEvp with your Feedburner ID (You need to make this change seven times).
  • Replace www.abctrick.net with your blog URL (without http://)

If you feel any problem, leave a comment here and I will try to solve it.

21 comments :

  1. in last step that is "adding html"

    i am getting this error

    "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. 
    XML error message: The entity name must immediately follow the '&' in the entity reference."


    www.tackden.in

    ReplyDelete
  2. You are then going to need some things. First of all, replace "Put Email & Hit Enter" with "Put Email & Hit Enter" . Then replace all "&" with "&" in facebook like button iframe tag.

    It will work then.

    ReplyDelete
  3. I have updated the code anyway. Try now and it should get phrased result.

    ReplyDelete
  4. its not working for my blog, have a look
    http://premium-area.blogspot.com

    ReplyDelete
  5. Please add more details so I can look up.

    Or provide me your template so I can add it.

    ReplyDelete
  6. i did exactly as you have said, i also tried to remove  jquerry library, but its still not working.

    ReplyDelete
  7. If you remove jQuery library, then there's no chance you will get a result. Now tell me, have you received any types of error in saving the template (like your template isn't well phrased)? Can you save it successfully in blogger?

    Send your template at reyad[at]abctrick.com so I can check it out.

    ReplyDelete
  8.  no i didnt get any error while saving, i used jquerry library and saved it, it didnt work while i didnt get any error, than i removed jquery library because i already use one but still i didnt get it worked, i have mail u my template please make neccesary changes and make it to work. thank you very much for helping me.

    ReplyDelete
  9.  thank u very much, i appreciate your effort.
    i would be thankful to you if u fix all errors and make it work, i don't know html or css, thats why i cant fix all these errors, if you cant let me fix all errors than i would have to remove this gadget that i don't want to do.
    thanks once again.

    ReplyDelete
  10.  i am still waiting for you reply :(

    ReplyDelete
  11. Checking a template is a real lengthy process. It takes 3-7 hours depending of template size. As I am not a professional designer and have really little time after my daily work, I would recommend you to contact any professional designer or check out 
    http://www.w3schools.com/ for 3-4 hours to learn yourself.
    Sorry, I can't help more.

    ReplyDelete
  12. i have removed all other jquery versions, also i removed another gadget which was using jquery older verison, but still its not working.
    http://premium-area.blogspot.com

    ReplyDelete
  13. Abhijeet BhattacharyaMarch 29, 2012 at 1:16 PM

    not working

    ReplyDelete
  14. Hi Reyad, I tried your Widget in my newly created blog and it appeared above the header. Can you fix it to pop it up and not show the widget above header.Please help..1
    Regards,
    Parigyan

    ReplyDelete
  15. it works but the problem is the position of the popup is at the top of the header. can you fix this? thanks in advance.

    ReplyDelete
  16. realy good tips, I also would lke to share more on my blog http://oyaah.blogspot.in

    ReplyDelete
  17. Ok, it didn't work on your template because of caching problem. Here's how to come up with the pop-up box. Cut the following tag from jQuery Trigger:
      jQuery(document).ready(function(){    if (document.cookie.indexOf('visited=true') == -1) {        var fifteenDays = 1000*60*60*24*15;        var expires = new Date((new Date()).valueOf() + fifteenDays);        document.cookie = "visited=true;expires=" + expires.toUTCString();    $.colorbox({width:"480px", inline:true, href:"#subscribe"});        }});

    and then add it just before  tag in HTML markup.

    Then clear your browser cache and revisit your site. But to make it just like on this blog, you first need to rephrase your CSS as I have seen many major errors in your CSS. Like you used "font: small Georgia Serif;" which will be "font: small Georgia Serif;" . You haven't also make CSS tag inside { }. Sometimes you have closed } earlier. Once you fix them, this will work perfectly.

    This is the result I got without fixing CSS error.
    http://4.bp.blogspot.com/-sun1Q38AK2g/T2hhYevBgQI/AAAAAAAAGb8/ATvXaaL9Yx4/s1600/sshot-2.png

    ReplyDelete
  18. animeipics.blogspot.comOctober 13, 2012 at 2:10 AM

    When will be show on blogger i have tried before one month ago but still no result :(

    ReplyDelete
  19. Love the design and setup, but the subscribe pop-up still only appears in the header. How can this be fixed to be an actual pop-up? Thanks!

    ReplyDelete
  20. Really great sharing and it is working glad to find this one, but there is thing i want to change appearance place how can i?? and can you also tell me how to enlarge close button

    ReplyDelete