October 11, 2011

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 »

37 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. AWESOMEEEEEEEEE !!!!!!!!
    I am using it now :)
    Great Mustafa Bhai
    May Allah Bless You

    Regards
    www.skfanclub.com

    ReplyDelete
  2. Mustafa can you please make an article about Google Webmaster 404 error for blogger............????

    ReplyDelete
  3. nice post........ :)

    http://www.freeaccalectures.blogspot.com/
    http://www.accountancystudents.net/

    ReplyDelete
  4. nice post waiting for your seo articles......
    Free gprs tricks

    ReplyDelete
  5. 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
  6. 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
  7. @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
  8. thanks bro,its works in my blgger
    www.techradarinfo.blogspot.com

    ReplyDelete
  9. 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
  10. @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
  11. 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
  12. Wow!! amazing post, this will really helps us to drive traffics to our blog/websites... thanks for sharing

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


    http://internetricks4u.blogspot.com/

    ReplyDelete
  14. 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
  15. Hey...plzz...say.... How Can i get a Feed Link ???

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

    ReplyDelete
  17. thanks man,,

    alhamdulilah, firts try and succes...

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

    ReplyDelete
  18. 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
  19. This comment has been removed by the author.

    ReplyDelete
  20. 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
  21. nice working in my game blog http://www.game4cb.co.cc

    ReplyDelete
  22. 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
  23. Oh this is my blog link btw, just incase you need it

    www.the-finalrevelation.blogspot.com

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

    ReplyDelete
  25. 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
  26. A great and simple subscription box. I have been looking for something like this.

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

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

    ReplyDelete
  29. 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
  30. Thanks for the nice widget keep posting I am adding it to my tech blog Visit my home page:)

    ReplyDelete
  31. 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
  32. Yep, also not working for me. Bummer. Did everything correctly as instructed. :-(

    ReplyDelete
  33. Cannot find the

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

    Pls help

    ReplyDelete

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!