SimpleBloggerTips: Adding a cute Subscription Form Widget for Blogger V2

This is my second post for subscription form Widget for blogger version 2.In my first post i am given Adding a cute Subscription Form Widget for Blogger V1 and now today we have yet another but beautiful and easy to edit subscription form dozed with new CSS effects hope you like it.

                                   

Follow this steps to add this widget to Blogger:-

• Go to Design and click on Page Elements.
• Click add a Gadget.
• Now in add a Gadget window, select HTML
• Copy the code below and paste it inside the content box.

<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh64ksvd5bok140eMb-5dBZywbn5p6GUOzPXkc58kKuUruhuFG23bk6jOtePc67FLFRx1rraZUfXivreFSYpOwGpcuOIlqTV1Pfy_MgKslJ3Pnro2z6lOALxHnVRSdfl25bgeIelim76QhZ/s1600/email.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;
}
.mbt-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;
}
.mbt-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:170px;
color:#666;}
</style>
<div class="mbt-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=TntByStc', '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="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Make these changes

• Now replace http://feedburner.google.com/fb/a/mailverify?uri=TntByStc 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 TntByStc with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=TntByStc
• Now save templates and see your blog you are done!!!!