331A96E0-3037-43FC-8D93-543B900B11C9

😍 Loving this theme? Download

Please enter at least 3 characters.

Feedburner Email Subscription Popup Blogger Plugin

Add modern feedburner email subscription popup to blogger blogs and increase your conversion rate. Start Gaining new email subscribers from day 1.
Feedburner Email Subscription Popup Blogger Plugin
feedburner email subscribe box for blogger

Feedburner is the only source for most of the bloggers to gain new email subscribers (which is free) so I just came up with another stylish widget for blogger platform and I hope you guys will love it.
This time I have designed a Feedburner email subscription popup box for blogger and its really stylish, professional looking and neat and clean widget.

You might have seen this popup subscription box appearing in your favorite blogs many times. They use it because it tends to convert well and increases the conversion rate on any page of your blog.
It's Nothing like anything and you must use it if you already don't. :)

Features of Email Subscription Popup Blogger Plugin


Believe me, I don't want to preach about it and bore the hell out of you. :)
It has got really good features and you need to know them so that you can alter anything later the way you like to without getting confused.

1) Maximum Width is 600px (when viewed on desktop or laptop display)

2) The subscription box is fully Responsive (when screen width goes down below the 600 pixels, it reduces its size according to the maximum width of the screen).

3) Cookies enabled and you can set any number of expiry days for cookies.

4) Pops up in the center of window screen and remains in the center.

5) Isn't boring at all. :)

6) Using Google font family "Oswald"

7) You can set time delay so that popup box will appear on certain time after loading of your blog like as 20 seconds after loading of your blog.

8) Now it Automatically fades out after someone clicks on "Add Me" button. (Feature added after someone asked in comments). :)

(Note: You don't have permission to copy and share my code on your blog.)


Where is the DEMO Screenshot of Email Subscription Popup Box?

Wait!
There it is.

feedburner email subscription popup blogger plugin screenshot
So did it impress you? Do you want to use it?


Adding Feedburner Email Subscription Popup to Blogger

Let's follow some boring steps as usual:
1) Login to your blogger account.
2) Got to Template section - then click on Edit HTML button.
3) Now please take a backup of your template code first before doing anything with your template code because it's always good to be on safe side. It's a good habit for blogger users and you must develop it.

Installing Google Font Family and JavaScript Codes


4) Look, now we need to install Google font family "Oswald" to your template but in case your blog is already using it, then just skip this step. Don't add same fonts multiple times as they will slow down the page load time.

Search for this opening tag <head> (found at the beginning of the template code)  and paste the Google font family link just after it.

<link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>

5) Now just find out this closing tag </head> and paste these JavaScript links given below just before this closing tag.
(Note: If you have previously installed my widget, "Facebook Popup Page Like Box for Blogger" then you need not to complete this step because these codes were installed into sidebar HTML gadget then and you will be adding them twice. This time I am installing these codes into your blogger template, not into the sidebar so you can remove them from sidebar HTML widget. These are the same codes so make it sure, its your part :)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

 And this script before </body>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>

Add CSS Code to Your Template


6) Now you need to add the CSS code to your template.
Find out this code ]]></b:skin> and just before this code, paste the whole CSS code given below.
/*----- Email Subscription Popup Box Coded by TwistBlogg.Blogspot.com -----*/
#twist-blogger-subbox {
  display: none;
  background: rgba(0,0,0,0.5);
  width: 100%;
  height:100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:99999999;
}
#twist-blogger-subbox .popup-box {
  padding: 0;
  margin: 0 auto;
  max-width: 600px;
  border-radius: 1px;
  border: 2px solid #F5F500;
  background: #3A3939 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhezNVI-fY5A-zaNPF4D0eOuYzmgFAQm0TFxkvLS1vpnGjQkwgdbYTK1SDFygvVfvAy5TPS8Lv0IJ3Gmx5znVJueuzzrvZzh1_Yif-XJsF2ZhQ3wMat9_dK25A-8sBWaxeCeyhp8cFCtq0/s1600/64.png');
  background-repeat: no-repeat;
  background-position: 100% 45%;
  position:relative;
  top:25%;
  z-index:0;
}
#twist-blogger-subbox .popup-box .exit-button-subbox {
  float: right;
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 0px;
  margin-top: 2px;
  margin-right: -2px;
}
#twist-blogger-subbox .popup-box .exit-button-subbox:before {
  content: "X";
  padding: 5px 8px;
  background: #FFFFFF;
  color: #000000;
  font-weight: normal;
  font-size: 12px;
  text-shadow: 0px -1px #000;
  font-family: sans-serif;
  border: 4px solid #F5F500;
  border-radius: 50px 0px 50px 50px;
}
/*--Main Headline Style - twistblogg.blogspot.com--*/
#twist-blogger-subbox .popup-box .tagline {
  padding: 0;
  line-height: 2em;
  font-size: 26px;
  height: 50px;
  font-weight: normal;
  font-family: "Oswald",sans-serif;
  text-shadow: 0px -1px 0px #F5F500;
  color: #3A3939;
  text-align: center;
  background: #FFFF00;
  border-right: 7px solid #F5F500;
  border-left: 7px solid #F5F500;
  border-bottom: 15px solid #3A3939;
}
/*--Paragraph Style - twistblogg.blogspot.com--*/
#twist-blogger-subbox .popup-box p {
  font-family: "Oswald",sans-serif;
  font-size: 15px;
  color: #EFEFEF;
  text-shadow: 1px -1px 0px #000;
  line-height: 35px;
  padding: 10px 110px 0px 20px;
  text-align: left;
  letter-spacing: 0.5px;
  margin: 0;
}
#twist-blogger-subbox .popup-box .rssform {
  padding: 15px 20px;
  margin: 15px 0px 0px 0px;
}
/*-- Button Style - twistblogg.blogspot.com --*/ 
#twist-blogger-subbox .popup-box .rssform .button {
  cursor: pointer;
  margin: 0px 0px 0px 5px;
  border: none;
  overflow: hidden;
  width: 35%;
  height: 37px;
  background-color: #FF0;
  font-size: 14px;
  font-weight: normal;
  color: #121212;
  letter-spacing: 0.5px;
  text-transform: uppercase!important;
  font-family: "Oswald";
  float: right;
}
#twist-blogger-subbox .popup-box .rssform .button:hover {
  background: #FFE800;
  padding: 7px;
  border: 1px solid #fff;
}
#twist-blogger-subbox .popup-box .rssform .email-bg {
  background: #FFE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTikDTeJG_bt5zl-PIowdSX078FQdKmR3YK0auqPerAeUvYlrubOB-aMs4-wkEJLYTKZD1gYUNeUwRatvpmJTGIb-nk6QaJtHrPFJJfqCpUPQpcf9JgANKngq3_oRXgELrxEOXe3ecHyo/s1600/1envelope.png') no-repeat 5px 8px !important;
  padding-left: 30px;
}
#twist-blogger-subbox .popup-box .rssform input {
  padding: 8px;
  font-size: 13px;
  font-family: Oswald;
  font-weight: normal;
  display: inline-block;
  width: 60%;
  height: 37px;
  text-transform: uppercase;
  outline: none !important;
  border: none;
  border-radius: 1px;
  box-sizing: border-box !important;
}

Ok so now we're done with adding CSS code and only remaining step is to add HTML part of email subscription popup box to your blog template.

Add HTML Code of Subscription Popup to Your Template


7) Now just find out this closing </body> tag which is at the end of your template code and paste the HTML code just before this closing tag after making required changes.

<div id='twist-blogger-subbox'>
            <div class='popup-box'>
<div class='exit-button-subbox'></div>
            <div class='tagline'>
            Wait! Leech off my best
            </div>
                 <p>Get latest Blogger Widgets, Plugins and much more straight into your INBOX for free. Just Enter your email address, Verify and join our Newsletter!</p>
            <div class='rssform'>
            <form action='http://feedburner.google.com/fb/a/mailverify' method='post' target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TwistBlogg', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type='text' class='email-bg' name='email' placeholder='Enter your email address... :)' />
            <input type="hidden" value="TwistBlogg" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input value="Add Me" class="button" type="submit" />
            </form>
            </div>
</div>
</div>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('feedburner_popup_box') != 'yes'){
$('#twist-blogger-subbox').delay(25000).fadeIn('medium');
$('.exit-button-subbox, .button').click(function(){
$('#twist-blogger-subbox').stop().fadeOut('medium');
});
}
$.cookie('feedburner_popup_box', 'yes', { path: '/', expires: 15 });
});
</script>

*Required Changes: Now you need to make few changes to the above HTML (you don't have to code anything).

1. Change the Main Headline text "Wait! Leech of my best" to whatever you want.

2. Change the Paragraph text to your own text and that is what where you describe why visitors should become subscribers.

3. Change my Feedburner address TwistBlogg to your blog's address (twice).

4. You can change Add Me button text to your own like as boring as Subscribe.

5. Change the delay time which is 25 seconds by default (I made it default :p) to your own. To change it, just modify the value of 25000 where 1000 value = 1 second.

6. Set the expiry date for cookies which is 15 days by default. To change it, just modify the value 15 to any number where 1 number = 1 day.

That is it!

Visit your blog now and be the first to see it live. :)
It must be working fine if you did not miss any step. The process is little long but well worth the time.

If you're unable to get it working then you can leave a comment with your blog URL and I'll surely check it.

Give me a favor, do share if it really helped you and you liked my Feedburner email subscription popup blogger widget. Stay blessed!

Share this post

Explore more articles by Satbir

96 comments

Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

  • To insert an image, add [img]image_link[/img]
  • To insert a block of code, add [pre]parsed_code[/pre]
  • To insert a link, add [link=your_link]link_text[/link]
  • To insert a quote, add [quote]quote_text[/quote]
  • To insert a code, add [code]parsed_code[/code]
  1. Hello Satbir!

    In my blog also did not work, I followed the recommended step by step.

    Could you check it for me please?

    This is my blog: http://www.passagensaereascomofertas.com
  2. i am tried it for long but there is nothing working no popups show please help me http://www.kg2pgeduall.co.in
  3. sir its not working on mine even after doing all this please help. my blog is http://tourismlines.blogspot.com
  4. i am sorry tried it for long but there is nothing working, no popups!!!!!
    please help me out on https://tourismlines.blogspot.in
    thanks in advance
    1. I think javascript Problem CSS and HTMl are ok
  5. Hi, i used all the steps accurately but this popup box comes only at the bottom of the page than popping up.
  6. IT's not working for me can you check my website www.greatsays.com
  7. hello sir this email subcribe i want use but after putting this code not work in my blog
  8. Hey there!
    It isnot working! could u help me?
  9. Hello i put it on 5 sec and its not working
    blog url- www.techteel.com
  10. thanks.. i will test it on my blogger blog and replay here.
  11. I don't think this code is working any longer... Tried it n my new blog Prosandconsblog but not working...
  12. Din't work for me. My site www.madeinandroid.net
  13. Failed for me, directions which need one answer to work not specific enough. I can see why you recommend backing up things.
  14. That was super its realy work and thanx for sharing this blogspot problem and Blogger tools
  15. Nice Tips
  16. i tried it again, but its not showing up for a 10 second or a 20 second delay!
  17. NOT WORKING, MY LAYOUT GOT MESSED UP AND I HAD TO DELETE THE CODE! PLEASE HELP
  18. not workingggggggg
  19. Hello Sir.
    I have done every thing you have told in this blog article still not working.
    Kindly check and suggest me please. http://www.lucentgk.com
    Hope you will reply.
    thanks
  20. Hello Satbir,
    I followed all the mentioned steps on my blog www.mrajobseekers.in

    But its not working :) can you please look into this ?

    Thanks in advance.
  21. Hi Satbir, I followed all the steps and it didn't work for me either: www.commoncoremoney.com.
  22. Has this been updated for the new Blogger template format? I can't find some of the markers "head" and ]] you mention on this post. I really want a feedburner email subscription pop up as I know I'm losing potential subscribers without one.

    I tried MailChimps subscriber opt-in code and pasted it using html widget but it only worked once, AND this only gets your subscriber on your mailchimp list, not your feedburner so they don't get the feed's email. I'd rather have a feedburner pop up opt-in.

    Can you help? Thanks!
  23. Hello...Satbir can you give me a link of your template on mmahendra904@gmail.com
    I promise that I will give your blog credit link..
  24. Well that is a very nice pop up but unfortunately its not working for me

    www.techinsense.com
  25. Not working on mine
  26. Thank you! Gave this a try today and just changed the expiry to 3 and the delay to 5000 but the popup still doesn't come up.
  27. Nice sir but its not working in my blog.. Can you make the non popup of the email subscription? I like the design
  28. hey thanks so much for this piece of code but i followed step correctly didnt work fo me, here is my blog www.solenzoblo.com.ng
  29. Very useful information thank you for posting...
  30. Followed the instructions....but id didn't work :(
    Can you please help? Thanks!
    URL: www.lamaisonjolie.com.au (blogger based)
  31. my browsers say the conexion is not secure... I think I'm gonna undo everything... I'm just a beginner html user, not sure what I'm doing... thanks anyway
  32. Hi, it works in my iphone but not in a chrome browser... may be I have the pop-ups locked?
  33. HI, thanks for the tips, I may have jumped some step.... it's not working in my blog, Can you please have a look at it? thank you www.pepadelosmares.com
  34. Hi, Mate its not working on mazterpieze.com
  35. Not. working brah. check this www.linuxshare13.blogspot.com
  36. I followed all your instructions but yet the pop up is not showing I need help by blog is http://www.austinemedia.com/
  37. Hi, if i would use this popup, but with another form, not feedburner. How can i set up the cookies?
  38. hello help me install it in my template i have done all u said and i get errors
  39. thanks man... tried it and it works perfectly...

    you are the bomb..

    more knowledge to your brain

    www.obagoblog.com
  40. i admin when i change the url of blog it cannot working plz can help me
    http://www.ibuildblog.com
  41. i Just uploaded it once and it worked straight out. The interface is really great and somehow to tallies with my blog look. Thanks for the tips. Am subscribing on your blog right away.

    Check out wat i have

    http://bloggerpays.blogspot.com.ng/
  42. Hi Satbir, Thank you for providing such great information, I have tried my level best to do as per the instructions, but all efforts in vain, I was not able to find ]]: so i did as u suggested to California cupcake, still no pop-up.
    Can you please check my blog http://investkiyakya.blogspot.in
    1. Hi Vipul:: Sorry there was a mistake in my code = ]]></b:skin>. Please find the ]]></b:skin> code again this time you'll find it and follow the instructions!
    2. Thanks Satbir, It is working fine now , but i am not able to see the X (cross) button on the POP-Up , can you please help
    3. Hi Satbir, Thank you for your response, It worked fine but i am unable to see x (cross button) on the Subscription Pop-Up
  43. nice one bro
  44. I cannot get this to show up. Please help.
    http://www.grosgrainfab.com
    1. KATHLEEN:: Hi, I jst updated the JavaScript Code link, please update them and check again.
  45. hey! i can't find ]]: on my template. Please help me with this
  46. Hey Satbir
    I am using a wordpress blog. How to use this email subscription pop up in my website. Can you please tell me.
  47. Pretty cool man. Thanks a lot Great article!
    God bless you
  48. California Cupcake :: Hi,
    You can also paste the CSS code before </head> but you have to use style tag and put all the css code inside it. For example =
    <style> Paste The CSS Code Here </style>
  49. Hi,

    Love your site. I can't seem to figure out this coding. I have a template from designerblogs.com and I cannot for the life of me find ]]: in my html. So i have no idea where to put the CSS code...HELP!
  50. Hi !
    How do I get the http://feedburner.google.com/fb/a/mailverify?uri=My-Value ?

    www.thehinhnam.com
    Thanks
  51. Hi, I did everything for my blog with your instructions, but I didn't get any popup..can you pls check my blog
    http://trendiworld.blogspot.in/
  52. Hihi, I've managed to get it work finally since I didn't hear from you. Looks cool now! Is there anyway I can change to a lighter yellow instead, it's too bright. Thanks again!
    1. Shirley Tay :: Sorry for late reply. I am not active on my blog but soon I'll get back to work.
      You can change the colors easily just by replacing the color codes. For further help regarding customization of this widget, you can contact me using contact form.

      Regards!
  53. Managed to copy the error msg, "The feed does not have subscriptions by email enabled". Pls advise.
  54. Hi, so glad I stumbled upon your widget! I've installed in Luxury Haven & test out. It popped up on Chrome but not on IE8. Also, when I entered an email to subscribe, an error msg popped up. It was so fast I couldn't really read the msg. Could you kindly check & advise. Thanks!
  55. thanks bro, I liked it..
    Bless you
  56. Hi! I followed the instructions and it doesn't work for me :( could you please check out? THANKS!

    www.savingmilky.com
    1. Milky :: It works buddy... You forgot something or messed up with coding. I am busy with other stuff this month so can't really help you out personally. Sorry!
  57. Hi! I followed the instructions and it doesn't work for me :( could you please check out? THANKS!

    www.savingmilky.com
  58. You rock! Not only did it work, it's super cute! Thank you so much! Borei Design
  59. Hi
    can you change the direction into Right to lift <to use is in Arabic sites .
    thanks
  60. ]]: i cant find this on my blog
    1. MOULI !, Acuually there is mistake, the Real code is ]]> hope you find it!
  61. Hi satbir,
    Your blog is very nice and you are doing good job.your widgets are unique and looks nice.
    Please vist my blog Digit Only.com
  62. hi.. i used this widget but i cannot see the subscription box pop up into my blog.. how come? please help.......thanks.
    1. Blacklabel :: Hi,
      This is cookies enabled for 15 days means it will popup only once to same user for next 15 days so please disable the cookies and then try reloading the page to see if is really working or not.
  63. thankss........nice post .


    www.techmash.in
  64. where can I find twissblogger of feedburner?
    Sorry I really cannot find it.
  65. I made it ready.. :)
  66. Gotcha,

    Thanks for such a nice and awesome tutorial. I loved it and implement in one of my blog. Thanks for the help :)
  67. satbir please reply if possible.
  68. hello admin,
    i am waiting for your reply on my first comment.
    i want to edit this widget , i want to disable cancel button for strict subscription. so can you please how to do this modification.
    again a big thanx to you to provide such a good looking widget.
  69. hello admin,
    i loved your widget and i subscribe you with another email.
    today i add this feature but popup is not working. it is showing at just after the footer.
    please visit: www.karaokekart.in and check why this occurring.
  70. 684
    This comment has been removed by the author.
  71. Not working on my blog
    1. Please Note::
      This widget works perfectly and I have checked it again. The reason for you not working is this= If you have followed all the steps, it is working perfectly for 200% sure.

      This widget uses 25 seconds delay time so after you have installed it, visit your blog and wait for atleast 25 seconds to see the popup appearing. This timing is default set my me and you can change it (read the tutorial).

      If you refreshed your page before 25 seconds then it will not appear again because cookies are set for 15 days.
      Just clear your cookies and visit your blog again then wait for 25 seconds to see it working.

      Thanks!
  72. Hi Satbir?
    Recently I took a short visit to this page and your widget looked so amazing,thats why I installed it to my blog step by step.But at the end when I see my blog there is nothing happen How is it possible ? Do you feel such circumcentenses ?
    Any solution or idea ?
    1. Abdullah Malik:: Hello Bro,
      Am so sorry for late reply. Actually I tried to reply to your previous comment on "How To Create Landing Page On Blogger" but then suddenly my Internet connection stopped working (I am in home these days) so I could not reply but today I am replying to all the comments.

      back to your question:: If you have followed all the steps clearly then it should definitely work for you.
      Can you send me your template code so that I can check it or add it for you?


    2. Yeah its my pleasures seriously :-D
      Here is the link https;//urdublogginghub.blogspot.com take a look shortly.

      Thanks
    3. Abdullah Malik:: I checked it and found no code. Probably you have not installed it on your blog template yet.
    4. Sorry I checked it shortly,when there is nothing happen I just remove whole piece of code.

      Thanks.
  73. hey! once anyone subscribe, the popup still remains and one has to click on the cut link. is there any method that it automatically disappear once the visitor has subscribed.
    1. Faulty Minds:: Hello buddy, I just updated the JavaScript code and now it automatically fades out after someone clicks on Subscribe button. All the Credit goes to you. :)
    2. One someone subscribes the popup should never show up for them again. I subscribed as a test then logged back in the the popup showed again even though I have already subscribed.
  74. Hi Satbir,

    I have wordpress based blog, and I wan to add one feed based subscription popup, can you suggest me code by which I can create these type popup or any pugin thanks in advanced.

    Regards
    Mohd Arif
    1. Mohd Arif:: Hello buddy,
      You can use the code above for WordPress Too. Follow these simple steps given below:-

      1) Create A Subscriptionbox.php file in your THEME folder and put the css code inside using <style> </style> and HTML+JavaScript Part as it is (after making required changes) altogether in it.

      2) Now include this Subscriptionbox.php file in the footer.php file by using this simple code:

      <?php require ("subscriptionbox.php");?>
      <?php wp_footer(); ?>

      I hope this helps!
  75. Hi Sabir ,
    I set delay time to 5sec and I find its not working for me .Can you please help?

    my blog url:
    http://www.geekystones.com/
    1. Hi,
      It should work fine.
      I have just checked your blog and it seems like your template code is messed up. Did you play with its code? I would recommend you to use a simple fast loading template rather than packed with hell lot of JavaScript codes. And you haven't even edited it properly.
    2. Hi geekystones.com my blog is working well using this popup code. Maybe you have another jquery script such as 1.8.3 latest version that will impact into .cookies function doesn't works. so try using 1.7.2 version and it's works for me. Cheers.
  76. Hi Satbir,

    Nice popup. I love it. I will get it installed on my blog and will share the results with you. Thanks a lot for sharing this awesome plugin.

    - Rohan.
    1. Nice to see you there Rohan :)

      And please let me know you experience. If you face any problem while installing this widget, I am there to help you for sure.

      Thanks for visiting and taking time to leave your comment :)
Post a Comment