Feedburner Email Subscription Popup Blogger Plugin

email subscription popup 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?

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>
<script src='https://googledrive.com/host/0B_PLgWpOK_wTazh0MndTeWs3c28' type='text/javascript'></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 www.TwistBlogger.com -----*/
#twist-blogger-subbox {
  display: none;
  background: rgba(0,0,0,0.5);
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
#twist-blogger-subbox .popup-box {
  padding: 0;
  margin: 0 auto;
  max-width: 600px;
  border-radius: 1px;
  border: 2px solid #F5F500;
  background: #3A3939 url('http://3.bp.blogspot.com/-7TLWGdsIYRg/VSYZtpMVpgI/AAAAAAAAA7A/eTPibGVJ4Mg/s1600/64.png');
  background-repeat: no-repeat;
  background-position: 100% 45%;
#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 - www.twistblogger.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 - www.twistblogger.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 - www.twistblogger.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('http://1.bp.blogspot.com/-h7L136qj408/VSYZtr7vDNI/AAAAAAAAA7E/F3W4M51n1mk/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
                 <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=TwistBlogger', '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="TwistBlogger" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input value="Add Me" class="button" type="submit" />
<script type='text/javascript'>
if($.cookie('feedburner_popup_box') != 'yes'){
$('.exit-button-subbox, .button').click(function(){
$.cookie('feedburner_popup_box', 'yes', { path: '/', expires: 15 });

*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 TwistBlogger 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!

Article By: Satbir Patial

I manage this blog and post tutorials related to Blogger, SEO, Plugins, Widgets, Software Tools, CSS/HTML and Social Media. Did you find this blog helpful? Would You Please Socialize? Thanks for Your Support Buddy :)

Stay connected, You'll not be disappointed!

69 Replies so far - Join Conversation

  1. 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 :)

  2. Hi Sabir ,
    I set delay time to 5sec and I find its not working for me .Can you please help?

    my blog url:

    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.

  3. 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.

    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!

  4. 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.

  5. 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.


    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.


  6. 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.


  7. This comment has been removed by the author.

  8. 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.

  9. 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.

  10. satbir please reply if possible.

  11. Gotcha,

    Thanks for such a nice and awesome tutorial. I loved it and implement in one of my blog. Thanks for the help :)

  12. I made it ready.. :)

  13. where can I find twissblogger of feedburner?
    Sorry I really cannot find it.

  14. thankss........nice post .


  15. 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.

  16. 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

  17. ]]: i cant find this on my blog

    1. MOULI !, Acuually there is mistake, the Real code is ]]> hope you find it!

  18. Hi
    can you change the direction into Right to lift <to use is in Arabic sites .

  19. You rock! Not only did it work, it's super cute! Thank you so much! Borei Design

  20. Hi! I followed the instructions and it doesn't work for me :( could you please check out? THANKS!


  21. Hi! I followed the instructions and it doesn't work for me :( could you please check out? THANKS!


    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!

  22. thanks bro, I liked it..
    Bless you

  23. 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!

  24. Managed to copy the error msg, "The feed does not have subscriptions by email enabled". Pls advise.

  25. 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.


  26. Hi, I did everything for my blog with your instructions, but I didn't get any popup..can you pls check my blog

  27. Hi !
    How do I get the http://feedburner.google.com/fb/a/mailverify?uri=My-Value ?


  28. 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!

  29. 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>

  30. Pretty cool man. Thanks a lot Great article!
    God bless you

  31. Hey Satbir
    I am using a wordpress blog. How to use this email subscription pop up in my website. Can you please tell me.

  32. hey! i can't find ]]: on my template. Please help me with this

  33. I cannot get this to show up. Please help.

    1. KATHLEEN:: Hi, I jst updated the JavaScript Code link, please update them and check again.

  34. 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

  35. 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


  36. i admin when i change the url of blog it cannot working plz can help me

  37. thanks man... tried it and it works perfectly...

    you are the bomb..

    more knowledge to your brain


  38. hello help me install it in my template i have done all u said and i get errors

  39. Anonymous11:09

    Hi, if i would use this popup, but with another form, not feedburner. How can i set up the cookies?

  40. I followed all your instructions but yet the pop up is not showing I need help by blog is http://www.austinemedia.com/

  41. Not. working brah. check this www.linuxshare13.blogspot.com

  42. Hi, Mate its not working on mazterpieze.com

  43. 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

  44. Hi, it works in my iphone but not in a chrome browser... may be I have the pop-ups locked?

  45. 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

  46. Followed the instructions....but id didn't work :(
    Can you please help? Thanks!
    URL: www.lamaisonjolie.com.au (blogger based)

  47. Very useful information thank you for posting...

  48. 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

  49. Nice sir but its not working in my blog.. Can you make the non popup of the email subscription? I like the design