Add Cute Feedburner Email Subscription Form On Your Blog

Add Cute Feedburner Email Subscription Form On Your Blog

On my previous post i had publish about adding Feedburner email subscription box on the blog and below blog post. Here I am discussing about adding cute Feedburner email subscription form on your blog. It looks nice and can attract the visitors to subscribe to your blog feed. You just need to add a code on your blog. I will discuss here adding email subscription form on both old blogger interface and on new blogger interface. So lets starts the process step by step. But first see the demo:

For Older Blogger Interface: How To Add?

• Go to Blogger>Design>Page Element
• Click Add a Gadget option

• Select HTML/JavaScript option. Copy the Code provide below and paste that code in it.
• Save the Gadget.

For New Blogger Interface: How To Add?

• Go to Blogger (Note: If  you are managing more than one blog then choose the blog you want to add email subscription form)
• Then go to Layout option

• Click Add a Gadget option
• Select HTML/JavaScript option. Copy the Code provide below and paste that code in it.
• Save the Gadget.

Add This Code On Your Blog

<style> .tips-email{ background:url(http://1.bp.blogspot.com/-awcigZfcTCs/T3lsXiluCJI/AAAAAAAAA8U/gwm9JEQ_BV8/s1600/maillogo.png) no-repeat 0px 12px; width:300px; padding:10px 0 0 63px; margin-top:10px;float:left;  font-size:18px; font-weight:bold; margin:0 0 10px 0; color:#36393A; }.tips-emailsubmit{ background:#9B9895; cursor:pointer; color:#fff; border:none; padding:5px; text-shadow:0 -1px 1px rgbaundefined0,0,0,0.25); -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; font:12px sans-serif; } .tips-emailsubmit:hover{ background:#F88017 } .textarea{ padding:2px; margin:6px 2px 6px 2px; background:#f9f9f9; border:1px solid #ccc; resize:none; box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); -moz-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); -webkit-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); font-size:13px;   width:140px; color:#666;}</style><div class="tips-email"> Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=GulmiResungacom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="3" class="textarea" name="email" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;Email address here&quot;;}" onfocus="if undefinedthis.value == &quot;Email address here&quot;) {this.value = &quot;&quot;;}" value="Email address here" type="text" /> <input type="hidden" value="GulmiResungacom" name="uri"/><input type="hidden" name="loc" value="en_US"/> <input class="tips-emailsubmit" value="Submit" type="submit" /> </form> </div>

• Replace GulmiResungacom with your Feedburner id
• You are done.

Happy Blogging :)