How To Add Attractive Email subscription widget to blogger blogs

In this post i am gonna do email subscription widget for blogger blog,. Well you know that adding email subscription box increase the traffic of your website when someone get updates through the emails. This widget is the best to add on your blog, once the username you got from the feed-burner you will able to add widget to blog. (I explain it letter that why we use feed burner for email subscriptions). So look at below the method to add it to your blogger blog.

1. First step Go to your blogger blog and select your blogger if you have multiple blogger site.
2. Click on "Layout" from the dropdown menu
3. A new windows is appear click on "Add Gadget"
4. And now select "HTML/Javascribe" Options
5. Now simple add the code in the box shown blow

<style>.hl-email{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIIrEKgjRN53do6CznOOgIVIqcHHJPRPLHc85x1K8-izXN4Slxb7QfIMsGEFEIJPvD2YbxC5JVpwt0HP_8SWw8a65vlujc_CPcLOjbOvh6kxNZq-hYSwyhrXMhH106hGILKbQYHiM8ZAM/s1600/mail.png) no-repeat 0px 12px ; width:300px; padding:10px 0 0 55px; float:left; font-size:1.4em; font-weight:bold; margin:0 0 10px 0; color:#686B6C; } .hl-emailsubmit{ background:#9B9895; cursor:pointer; color:#fff; border:none; padding:3px; text-shadow:0 -1px 1px rgba(0,0,0,0.25); -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; font:12px sans-serif; } .hl-emailsubmit:hover{ background:#E98313; } .textarea{ padding:2px; margin:6px 2px 6px 2px; background:#f9f9f9; border:1px solid #ccc; resize:none; box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px; width:130px; color:#666;} </style><br />
<div class="hl-email">
Subscribe via Email <br />
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=OnlineGuru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input address="" class="textarea" email="" enter="" gtbfieldid="3" here="" name="email" onblur="if (this.value == " onfocus="if (this.value == " this.value="" type="text" value="Enter email address here" /><input name="uri" type="hidden" value="mbgsub" /><input name="loc" type="hidden" value="en_US" /><input class="hl-emailsubmit" type="submit" value="Submit" /></form>
<a href="http://www.onlinecomputerinstitute.com/"> Online Guru </a>  </div>

6. Now you have to find OnlineGuru word at end of the code to replace it with your feed-burner id, Its very easy to do you just have to copy the code and go at end,
Now Save the Gadget and review your blogger site there is successfully has been added