Attractive Email Subscription Widget for Blogger Blog

If you are providing useful information in your blog then its important to add email subscription widget to your blog. Feedburner is a great choice for RSS feeds. It makes really simple to supply fresh updates of your blog to your readers. Every blogger wants to add extra ordinary email subscription widget to their blog. Today I will guide you how to add fast loading professional look email subscription widget to your blogger blog with easy steps.

Add Email or Feed Subscription Form to Blogger

• Go to Blogger Dashboard » Layout
• Click on Add a Gadget
• Choose HTML/JavaScript and Paste The Below Code In It.

<style>

.hl-email{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLs3GAlDjjYfkfugki-g0_ZbNCONiF4oeqQTj_SBYoRUzq-gL7oy9pMV6Sk60hXGadkgzV9T7lcB-U6UnupnyufXPGCc4mhpf1JW6YkjGowQTzE_caY3kuaxElCFATKRXvImJ-6kTO4lzu/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>

<div class="hl-email">

Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />

<input type="hidden" value="helplogger" name="uri"/><input type="hidden" name="loc" value="en_US"/>

<input class="hl-emailsubmit" value="Submit" type="submit" />

</form>

</div>

Widget Settings

• Adjust With Width By Changing Width Value In Pink Color (130).
• Replace http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy with your Feedburner Email Feed link. You can get it by visiting your Feedburner account then navigate to Publicize and then to Email Subscriptions.
• Replace BlogsDaddy with your feed title. It appears at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy

Now Save your widget and check your blog. If you need my help and want to give any suggestion then use comment box below. Thanks