Every blogger wants to grow his subscribers list and build huge fan base and subscribers. Everyone is not successful with it. Do you know one of the reasons? it is placement of subscription box.
If you put subscription post under a post then there are higher chances of making the visitor subscribe to your blog. The visitor comes at the end of the post only after reading it and enjoying it. If he finds that “Get more such articles in your inbox” at the end with subscription box, then there are higher chances of making him/her subscribe.
Also the design of subscription box matters. Here is the simple cute subscription box design I made which I’m going to share with you all. Scroll at the end of this post to see the subscription box live. Here is a screenshot:
How to Add Simple Cute Subscription Box Under Every Post in Blogger
Here is the step by step guide to add it in your own blogger powered blog.
1. Go to Blogger > Template.
2. Click on Edit HTML > Proceed > Check Expand Widget Templates
3. Place below code right after <head> tag.
<link href=’http://fonts.googleapis.com/css?family=Droid+Sans|Open+Sans+Condensed:700′ rel=’stylesheet’ type=’text/css’/>
4. Find
<data:post.body/>
and paste below code right below it
<style>#Subscribe-boxRBT { border: 1px solid rgba(221, 221, 221, 0.43); border-radius: 10px 10px 10px 10px; box-shadow: 0 0 30px #EEEEEE inset; margin-bottom: 10px; padding: 10px; text-align: center;}#Subscribe-boxRBT h1 { color: #000000; font-family: 'Open Sans Condensed',sans-serif; font-size: 30px; line-height: 35px; margin-bottom: 5px; margin-top: 5px; padding: 0;}#Subscribe-boxRBT input { border: medium none; border-radius: 5px 5px 5px 5px; box-shadow: 0 0 5px #C2C2C2 inset; color: #666666; font-family: georgia; font-size: 14px; margin-bottom: 5px; padding: 10px; text-shadow: 1px 1px 0 #FFFFFF; width: 280px;}#Subscribe-boxRBT .submit { background: none repeat scroll 0 0 #B12D2D; border: 0 none; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 2px #B6B6B6; color: #FFFFFF; cursor: pointer; font-family: georgia; font-weight: bold; margin: 0 auto; text-shadow: 1px -1px 0 rgba(0, 0, 0, 0.4);}#Subscribe-boxRBT .submit:hover { color: #FFFFFF; opacity: 0.8;}#Subscribe-boxRBT .submit:active { background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent;} </style> <b:if cond=’data:blog.pageType == "item"’> <div id=’Subscribe-boxRBT’><h1>Did You Enjoy this Article ?</h1><p>If yes, Then enter your email below to get </p><p>more such great articles in your inbox</p><p>For FREE !</p><form action=’http://feedburner.google.com/fb/a/mailverify’ method=’post’ onsubmit=’window.open('http://feedburner.google.com/fb/a/mailverify?uri=Rightblogtips', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true’ target=’popupwindow’><center> <input name=’email’ onblur=’if (this.value == "") {this.value = "Enter Your Best Email";}’ onfocus=’if (this.value == "Enter Your Best Email") {this.value = ""}’ size=’30’ type=’text’ value=’Enter Your Best Email’/> <input name=’uri’ type=’hidden’ value=’Rightblogtips’/> <input name=’loc’ type=’hidden’ value=’en_US’/> <input class=’submit’ type=’submit’ value=’Subscribe’/></center></form></div></b:if>
5. Change the Red text with your Feedburner Username.
6. Click on Save Template and You’re done.
I hope you liked it. Be sure to implement it in your blog to increase number of subscribers of your blog.
Also Read: Author hReview Plugin for Blogger Blogs
Do share with friends too.
Hi, is there a way to change it from feedburner to mail chimp? I'm really trying to include a "sign up for our newsletter" below each post but I'm only finding tutorials that show how to sign up for email updates.
I'd be so grateful if you could help me figure this out. Thanking you so much in advance.
Jessi
Hi Jessica,
Sorry, but I don't know how to change the form for mailchimp.
Again, Sorry!
@Jessica, It is easy! Just add your Mailchimp form code instead of feedburner. After the closing paragraph tag near "FREE", delete the code till closing form tag, and add your mailchimp form code. That's it 🙂
Didn’t Worked For My site http://www.rechargians.com/
Show Error –
Error parsing XML, line 1328, column 12: Open quote is expected for attribute “{1}” associated with an element type “cond”
Any Suggestion?