Subscription Box: Add an Attractive One Below Posts

rss formAlhamdulillah I am back to work and today we are going to make a high quality RSS subscription box with no images or complex scripts. Alerting your visitors to subscribe at the bottom of your posts often help in increasing the number of your blog subscribers. The more readers you get the faster your blog grow. Providing visitors with easy and clean options to subscribe and bookmark should always be your first priority. I managed to design a simple box using CSS3 gradient and text shadow effect to create a container with RSS form inside it. The widget will stick to the bottom of your post and will let your visitors to submit their email addresses and subscribe to your FEED updates. Surely the best way to draw attention!

 


Live Demo

Add it to Blogger

  1. Go to Blogger > Design > Edit HTML
  2. Backup your template
  3. Check the "Expand Widget Template" box
  4. Search for this,

<data:post.body/>

    5.   Just below it paste this code,

<style>
#mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:1px
solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}

#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}

#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}

#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}

#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}

#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
</style>

 

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mbt-sub-box'><h1>Subscribe To Get FREE Tutorials!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=tntbystc&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='tntbystc'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>
</b:if>

 

Now make these changes,

  • Edit the highlighted yellow text to anything you like. It will appear at the top of the input box.
  • Now replace http://feedburner.google.com/fb/a/mailverify?uri=tntbystc with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
  • Replace tntbystc with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=tntbystc

       6.    Save your template and you are all set!

Visit your blogs to see the new eye-catching change. I am sure this will greatly increase the number of your blog subscribers. My coming posts will share different color variations of the same widget. I hope you find it help. :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

34 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Mustafa can you please make an article about Google Webmaster 404 error for blogger............????

    ReplyDelete
  2. Hi Mustafa bro,

    I am unable to find that '' :(
    Is there any other tag that we can find istead of .

    One thing more I want my blog to be in certain design like I want my post to be shown in some specific manner.Would you please guide me to solve that??
    If yes then how can I contact you?

    I would be greatly thankful to you.

    ReplyDelete
  3. Hi Mustafa,

    This is definitely the best among the subscription box below post for blogger that i've seen. Thanks for sharing this, I've already add this to my computer tips and tricks blog. I'll be waiting for more greats tips and widgets for blogger.

    ReplyDelete
  4. @afridi
    Always welcomed haider :)

    @total clicks
    Please read this:

    http://www.mybloggertricks.com/2011/09/remove-blogger-sitemap-errors-in-google.html


    @Anonymous never forgive
    Make sure you have check the "expand widgets template" box
    Else search for this data:post.body
    This code exists in all templates pal.
    To show your posts in some ordered manner like columns and rows then you will need to edit your template thoroughly. However I recommend the magazine look which I am using on this blog.
    You can ask me all related problems on this blog pal. Always welcomed :)

    @Rommel
    My pleasure buddy. I am glad you found it useful :>

    @yahya
    Thank you pal. :)

    ReplyDelete
  5. thanks bro,its works in my blgger
    www.techradarinfo.blogspot.com

    ReplyDelete
  6. bro how to change the Background Color ??
    check my blog site www.techradarinfo.blogspot.com,

    give me the color code to my blogger backgroud bro

    ReplyDelete
  7. @Tamil

    USe this CSS code instead


    #mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1A3820));;border:1px
    solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1A3820)}

    #mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}

    #mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}

    #mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #8FC323) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}

    #mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #86BB18) repeat scroll 0 0 transparent}

    #mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}

    Hope this suits :)

    ReplyDelete
  8. It's the best Blogger widget I've seen yet. Thank you very much for this amazing and stunning widget. You can see this widget hanging in my site: http://freshtips.blogspot.com

    ReplyDelete
  9. Wow!! amazing post, this will really helps us to drive traffics to our blog/websites... thanks for sharing

    ReplyDelete
  10. hmmm...... thats amazing it will make blog more attractive


    http://internetricks4u.blogspot.com/

    ReplyDelete
  11. Top notch bro.May Allah reward you. Excellent work. Thanks to you, the number of my subscribers increased.Just one question.Some of them forget to activate subscription.Could I somehow make the widget higher and then below write in my language that they need to respond to a verification mail?

    Thanks man. Wish you all the best.

    ReplyDelete
  12. Hey...plzz...say.... How Can i get a Feed Link ???

    ReplyDelete
  13. I was unable to find the feedburner email feed; help please

    ReplyDelete
  14. thanks man,,

    alhamdulilah, firts try and succes...

    maybe tomorrow, i'l change the color..and add some effect..

    ReplyDelete
  15. hey bro,,this is not working on my blog...is it so because i have applied hack related posts with thumbnails??
    www.jobsonchoice.blogspot.com

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

    ReplyDelete
  17. Hi Mohammad,

    I really like your blog and consult it for every modification on my blog. I tried adding this subscription box form but it is not showing on my blog. Can you please help me?

    My blog is www.womanatics.com

    ReplyDelete
  18. nice working in my game blog http://www.game4cb.co.cc

    ReplyDelete
  19. Assalmualikum. Mustafa Bhai i tried everything. but im unable to get it.

    see this is what i did

    1. found the "" using search. i Found 2 entries in the HTML

    2. Pasted your code and edited as you asked me to.

    3. clicked on preview - didn't work :(

    4. pasted your code under both the

    5. repeated the procedure, didn't work.

    im sure of the feed link im using. go it from my feed account as you instructed. please help :) jazakAllahu khairan.

    ReplyDelete
  20. Oh this is my blog link btw, just incase you need it

    www.the-finalrevelation.blogspot.com

    ReplyDelete
  21. you have made my way very easy by this posts and gadgets..my blog.. www.upscarena,blogspot.com

    ReplyDelete
  22. I want "Enter your email address here" to disappear when a mouse is clicked in the input box. How do I do? Please help

    ReplyDelete
  23. Buddy It's Not Working

    ReplyDelete
  24. A great and simple subscription box. I have been looking for something like this.

    ReplyDelete
  25. how to decrease the width???????????

    ReplyDelete
  26. works for me
    nice tutorial mustafa bhi
    thanks alot

    ReplyDelete
  27. thanks for this widget but I also want to add some social media button follow buttons this widget how is it possible can some one please tell me?

    ReplyDelete
  28. Hi... I inserted the code and did everythihg, but cant view it in my blog. The stuff isnt showing. Please what do I do?

    ReplyDelete
  29. Yep, also not working for me. Bummer. Did everything correctly as instructed. :-(

    ReplyDelete
  30. Cannot find the

    The blogger has changed "edit Template"
    Now there is no more a "Expand Widget".

    Pls help

    ReplyDelete
  31. Trumendous post. Dear Mustafa

    can you please provide a mobile responsive pop up subscription box for blogger in your current responsive series. Please provide if possible.

    ReplyDelete
  32. It is a very good Widget. My advice is not set it at sidebars. Place it below the post.

    ReplyDelete