Add Stylish Subscription Box Below Posts in Blogger

Add Stylish Subscription Box Below Posts in Blogger


I've been asked, how to place subscription box below each blog post by one of my reader. You can increase your subscriber by placing the subscription box below every post and its best visible. Your visitors and reader can easily find subscription option. Once they come end of the post and if they liked the content then he/she feel it is important to subscribe to your blog.


So, simply I'm going to show you how can you do that one Blogger blogs. If you would like to view demo, watch subscription below this post.


Login to your Blogger account and go to Design > Edit HTML > Check Expand widget template. Find the following code:

<data:post.body/>
Paste the following code just below <data:post.body/>:

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=HackTutors&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:1px solid #DDD;padding:3px;text-align:center;background:#F1F1F1;' target='popupwindow'><span style='margin:0 auto; padding-left:24px; position:relative;background: url(http://3.bp.blogspot.com/_b0xJ7qk6DTc/TEg2iHmUivI/AAAAAAAAAu0/j9tIV5fjTXw/s1600/myrss.gif) right center no-repeat;'/>Get Free Updates: <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;}' style='width:176px;height:18px; background: #ffffa0 url(http://1.bp.blogspot.com/_b0xJ7qk6DTc/TInWwRjgSUI/AAAAAAAABC0/DWQZc1mUvaU/s1600/new-email.png) left no-repeat;padding: 1px 0px 1px 24px;border: 1px solid #8cafe3;' type='text' value='Enter your email'/><input name='uri' type='hidden' value='HackTutors'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/>
<center><i>*Please click on the confirmation link sent in your Spam folder of Email*</i></center>
</form>
Replace HackTutors your feed id. Save the template and your just done!

Let me know if you have done this work and show your blog.

37 comments :

  1. Beautiful subscribe form ! Thanks for share !

    ReplyDelete
  2. not working in my blog..http://himanshu-software.blogspot.com/...also will you tell me how to add a picture near the simple subscription widget from blogger

    ReplyDelete
  3. A great share for bloggers who use blogger as their platform

    ReplyDelete
  4. I like this.
    Thank you for the code - I'm hopeless with them. lol
    Will paste it later

    ReplyDelete
  5. THANK YOU SO MUCH working fin in my blog http://hapatchan.blogspot.com/

    Have a nice day

    ReplyDelete
  6. how can you help. I tried your script and it says "The feed does not have subscriptions by email enabled" see my feedburner id:

    http://feedburner.google.com/fb/a/mailverify?uri="blogspot/jrWzi"

    I can see the different from urs, how can I make it like ur or how can it work for me?
    http://feedburner.google.com/fb/a/mailverify?uri="HackTutors"

    if you can put me through on my blogspot I will really appreciate.

    ReplyDelete
  7. Please help me add that box only under my post not in my home page. Its also coming in my home page. See - www.RealTimetricks.blogspot.com

    ReplyDelete
  8. thnks for the tute bro but the prob is that since i am using the template in which read more option is there and all the subcription box is coming in every short summary and not in final article.
    Also how to add a share widget below the post

    ReplyDelete
  9. Working great on my blog
    http://www.tech2go.in/

    ReplyDelete
  10. Where to paste the...below or before that code (i found that code 3 times)

    ReplyDelete
  11. Thanks for sharing the button

    ReplyDelete
  12. Hi, thanks for all...

    Please,the code must be pasted directly before or after this passage that you indicated? Or should it replace?

    ReplyDelete
  13. thx a lotbro, great helping hand you brought to me!

    ReplyDelete
  14. Thanks for sharing, i was just looking for the same and i found you best i have implemented this in to my blog http://newsmeter.blogspot.com/

    ReplyDelete
  15. I tried to use this by posting this code just after data:post.body in my template but it didn't worked for me. It didn't showed any error also. Can you tell me what could be the problem? My feedburner is activated. Thanks
    http://discoverdreamland.blogspot.com

    ReplyDelete
  16. I like your share box with facebook share ,tweet,digg,stumble upon buttons, like, advertise and related posts.You can make a tutorial how to do that?PLS!!!

    ReplyDelete
  17. Where exactly in relation to the data:post.body do I post the code? There are / and brackets > etc. one line below it?

    ReplyDelete
  18. @Charles

    Sorry for confusing code. I've just updated the post with the exact code. Please refollow the above instructions.

    ReplyDelete
  19. Thank you for clarifying. I added it after and nothing changed. I will try it asap.

    ReplyDelete
  20. hey dude !! Where we have to paste the code after or before it. . .Please clarify :)

    ReplyDelete
  21. @Govind

    Just paste the code below data: post.body

    I updated the post with details.

    Thanks!

    ReplyDelete
  22. Thanks Anup, I was looking for this to tweak my email box, great tutorial.

    Thanks,
    Anshul

    ReplyDelete
  23. Looks really cool, it will be more attractive if you can add some graphics in it

    ReplyDelete
  24. Thanks for the great tip, It will increase my feedburner subscriptions

    ReplyDelete
  25. Nice Subscription box.. Can i get a subscription box on the side of my widget. http://livestreamingonnet.blogspot.com/

    ReplyDelete
  26. Finally I got this,.it's very useful,.thank you so much..;)

    ReplyDelete

Don't spam.

 

We are hosted by...

Hosted by HostGator

© Copyright 2011 Hack Tutors All Rights Reserved
Designed by Anup Kayastha