Stylish And Attractive Email Subscription Box For Blogger

feedburner email subscription box/widget for blogger (fully responsive).

"Subscribe to newsletter" I think this is the most common term you have seen almost on every blog and as you already know feedburner is the free email service powered by google.

I guess you have already configured your blog with feedburner right and maintaining one mailing list to send free newsletters to your loyal readers.

Must Read :- Trick To Automatically Tweet Your Blog Posts Using Google Feedburner 

Why maintain mailing list is important ?

Well when any visitor came to your blog he/she just reads and disappears forever. So your whole efforts has been wasted at that moment only. 

But what if instead, you just keep one stylish and very attractive email subscription box on the right side of the blog ? So, they can enter their email id's and subscribe to your blog. Now you can reach to them in future whenever you publish any new post.

You just have to remember one simple math. "More email id's = More traffic".

Isn't it cool and profitable ?


Two more ways to collect more and more email id's is by keeping popup email subscription box or by adding stylish email subscription box below every post. If you are the regular reader of solvemyhow then you might had read that post already. Due to popup email subscription box, I'm able to collect almost 30% more email id's.

So, you can also configure that on your blog. You can visit the above links to do so.

If you haven't configured your blog with feedburner then you do it first. I will write one complete tutorial on it very soon. But for now you can ping me via contact us form. I would be glad to help you :)

Must Read :-

• Complete Guide To Create Professional Contact Form In Blogger
• How To Create Social Content Locker In Blogger Blogs
• Complete Guide To Make Professional 404 Error Page In Blogger
• How To Add Floating Social Media Buttons To Blogger

But for now lets remain to the point and lets create best subscription box for blogger. The o/p (look) you had already seen in the above snap shot.

Stylish Feedburner Email Subscription Box/Widget For Blogger :

This widget is created by using html and css that's why it looks this stylish and attractive. I hope you liked this widget. Please follow the simple steps mentioned below to install the same on your blog.

Step 1 :- Go to blogger.
I recommend you to take backup of your blogger template.

Step 2 : Go to layout.

• Blogger dashboard >> Layout >> Add a gadget 
• Add HTML/JavaScript

Look at the snap shot below.

Step 3 :- Copy and paste below mentioned code.

<style> .newsletter-inner { margin-top:15px; } .newsletter-inner .newsletter-address{ color:#fff !important; width:100%; font-size:16px; border:0; background-color:#2B4052; padding:20px 0px 20px 25px; border-radius: 0px; -moz-border-radius:0px; -webkit-border-radius:0px; } .newsletter-inner .newsletter-submit{ width:100%; margin:0px 85px 0px 10px; border:0; background:#a3d14f !important; color:#1E2D3A; font-size:16px; z-index:0 border-radius: 0px; -moz-border-radius:0px; -webkit-border-radius:0px; font-weight:bold; padding:20px 20px 20px 20px; } .newsletter-inner .newsletter-submit:hover{ background:#93bc47 !important; } .grid a, .grid a:visited {color:#eeeeee} .grid a:visited {text-decoration:underline} .grid a:hover {color:#cccccc} #footer-newsletter-wrap { background:#1E2D3A; margin: 0 0 0 0; padding: 50px 0 60px 0; } #footer-newsletter-wrap a { color:#66665f; } #footer-newsletter { color:#5b5b5e; width: 520px; margin: 0 auto; } #footer-newsletter h2 { margin: 0px 0 10px 0; padding: 0; border-bottom: none; font-weight: bold; text-transform: none; color: #fff; font-size: 26px; text-shadow:2px 2px #151f28; } #footer-newsletter ::-webkit-input-placeholder { color: #fff; } </style> <div id='footer-newsletter-wrap'> <div id='footer-newsletter'> <h2 class='title'> Subscribe to our newsletter<span style='color:#f54000;'>.</span></h2> <span>(Get latest updates into your inbox. Unsubscribe at anytime)</span> <div class='newsletter-inner'> <!-- ********************************************** Change Feedburner Name********************************************************** --> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=SolveMyHow", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'> <table> <tr> <td width='100%'> <!-- ********************************************** Change Feedburner Name Ends********************************************************** --> <input class='newsletter-address' name='email' placeholder='Enter Your Email Address' type='text'/> </td> <td> <input class='newsletter-submit' type='submit' value='Subscribe'/> </td> </tr> </table> <input name='uri' type='hidden' value='solvemyhow'/> <input name='loc' type='hidden' value='en_US'/> </form> <span>We respect privacy <a href="http://goo.gl/6aoAJa" rel="dofollow" style="text-decoration:none; color:#1E2D3A">Subscription Box Widget</a> </span> </div> </div> </div>

Step 4 :- Change feedburner name
Now look for the comment,

<!-- ********************************************** Change Feedburner Name********************************************************** -->


<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=SolveMyHow", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>
 <table>
<tr> <td width='100%'>

 
<!-- ********************************************** Change Feedburner Name Ends********************************************************** --> 

Change the highlighted part with your feedburner name.

For example :- http://feeds.feedburner.com/SolveMyHow

The above mentioned is my feedburner link. 

Step 5 :- Save the gadget.

Congrats. Widget is successfully installed. Now visit your blog to see.

If you wanted to share this code on your blog then please give proper credits to solvemyhow else you may be caught and google may penalized your blog and may be de-indexed it forever. 

So, this was all about adding stylish and attractive email subscription box for blogger. I hope this will help you to get many email id's and with this you will be able to increase your blog's traffic too. If you have any query regarding this code please do let me know in the comments below. I would be happy to help you. In the mean while, you can also subscribe for solvemyhow newsletter to get latest updates about blogging, SEO and hacking.

Found this post interesting and helpful ? Then why not help us by shooting those social media buttons on the left side. After all "sharing is caring" right !


Also See :-      

Improve Search Engine Optimization Of Your Blog In 5 Minutes For Beginners

Complete Guide To Add Author Bio Box/Widget In Blogger (With Pictures)

Trick To Unsend A Sent Email From Your Gmail Account (With Pictures)

DoFollow CommentLuv Enabled Blogs With High Page Rank

How To Find Commentluv And Keywordluv Enabled Blogs

[Exclusive] Top 10 URL Shortener Websites To Earn Money

How To Install Google Analytics Property In Blogger