Stylish Email Subscription Box Widget for Blogger

Email subscription is an another must have widget for every bloggers. This is an another way to keep your readers updated with your blog. If anyone comes to your blog to read any article of your blog and if he/her like your blog and your articles then Email subscription will be helpful for your readers as well as for you too. To make this free service available in your blog, you just have to add Email subscription box widget to your blog. And tell your readers to subscribe with your blog in order to receive updates directly their inbox.

Now, if you are ready and want email subscription widget to be installed to your blog, follow the steps give below to make this job done, it will take only few minutes.

Also read : Add an Instagram Widget In Blogger

How to Add Email Subscription Box Widget to Blogger?

Go to Blogger Dashboard > Templates > Edit HTML
Search for <data:post.body/> tag.
Copy and paste below code just after it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.mtc-newsletter-box {width:500px; height:222px; background:#f5f5f5; border:10px solid #ABABAB;padding:5px;}
.mtc-newsletter-box h1{font-size:20px; font-weight:bold; color:#444; text-align:center;}
.mtc-newsletter-box p{font-size:16px; font-family:georgia; text-align:center;line-height:25px;}
.mtc-newsletter-box input{background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY7ffrtmv7cOqwqIVk9oVW1YAVnPmI2lAsItOqZ6NQCrFsm3HstVBM1fEyGBsentVzDlC5NV1PBGmDARSBpJGsCwDcciXE4vZe0o-0Y1FNed9cmqsNe3KZwEwczo7PP382EXPmlI6kVrEN/s1600/subscribe-email.png) no-repeat right;font-family: Georgia, Times, &quot;Times New Roman&quot;, serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px; border: 1px solid #111 !important;font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important; box-shadow:2px #ABABAB;}
.mtc-newsletter-box .submit{background:#ABABAB;}
.mtc-newsletter-box .submit:hover{background-color: #444;border: 1px solid #444;color: white;text-decoration: none;}
</style>
<div class='mtc-newsletter-box'>
<h1>Join Our Email Newsletter Now!</h1>
<p>Join over 1,000 people who get free and fresh content delivered automatically each time we publish.</p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Feed Burner ID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><div align="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='Feed Burner ID'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submit' type='submit' value='Subscribe Now!'/></div>
</form><a href="http://www.bloggerwidgetgenerators.com/" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih-cjptFYxT3lsBfRoTssAlvcCaOOy0WPdX5_rPn60xSmVl5mzJiMbhXkjtwHXJYjxN2jcZov8HhcOuDiIOqhkQPtaGQ0WgHgeyDcOWaBpEkCu9OjBm9jGf8remvr9ZKKRqyfetdiDDF0/s1600/blank.png" /></a></div></div>
</b:if>

Replace the red colored text "Feed Burner ID" with your feed burner ID.
Finally, Save your template. and you're done !

Drop your comments and questions below :)

Add Comment

Blogger Tutorial Blogger Widget

Quicker BD

How to Add Email Subscription Box Widget to Blogger?