Put Email Subscribe Box Under Every Blog Post

Adding an Email Subscribe widget at the end of the Blog posts is a very good way of increasing subscribers. If people liked your articles then chances are high that they would like to subscribe to newsletter so that they can receive updates right in their inbox. Adding Email Subscribe widget under blog posts will attract visitors and will result in high number of subscribers.

Also Read: How to Get High Number of Subscribers on Your Blog.

Today I'll show you 'How to Add a Beautiful Email Subscribe Widget under blog posts'.

Widget Preview

How to Add Email Subscribe Widget Under Every Blog Post

Step 1: From your Blogger Dashboard, Go to Template > Edit HTML

Before making any changes in your Template, we recommend you to back up your template first.

Step 2: Check 'Expand Widget Template' box

Step 3: Now Search for the below code (Ctrl+F)

<data:post.body/>

Step 4: Just below the above code, Paste the following code.

<style>
#Subscribe-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)}

#Subscribe-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}

#Subscribe-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;}

#Subscribe-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;}

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

#Subscribe-box .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-box'><h1>Subscribe To Get FREE Updates!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=The-Area51', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == "") {this.value = "Enter Your Email Address...";}' onfocus='if (this.value == "Enter Your Email Address...") {this.value = ""}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='The-Area51'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>
</b:if>

Step 5: Now make the following changes to the code.

Replace The-Area51 with your Feedburner Username.
Replace Subscribe To Get FREE Updates! with your custom Tagline (Optional)

Step 6: Save Template

Now you'll be able to see Email Subscribe box under every post on your blog. If you liked this post then please subscribe for more such tutorials.

About Jimmie Luthra

Jimmie Luthra is a Mariner, Tech enthusiast, Blogger and Gadget reviewer. He is fond of technology and is usually found playing with some piece of tech. He is also a Guitarist, Music lover & fitness freak.