Create Simple And Cute Email Subscription Box For Blogger

I have previously share a tutorial on adding blogger default RSS subscription box. But the default form is not so cool and unattractive. In todays tutorial i will share with you awesome subscription box styled with Html & CSS. This widget is simple and will blend in any blogger template. So lets dive into it.

How To Create Subscription Form For Blogger ?

1. Go to Blogger > Layout

2. Then click on Add Gadget and choose Html/Javascript

3. Now copy/paste following in it.

<!--MBW Email Subscription Box mybloggersworld.com-->
<style>
.mbw-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-D0WmxqmN3mGzSa0nJHKnym_9g64icnT-ZEfJXgZocpwS0kiP4D9Owx697zcvntbX_PciPEEveMcgqReWIh6PM1t7293vIYVM6oPG3_Vhaa2RtI85lO36LRR2f0yWMnaBV88F2wMqNos/s1600/subscribe.png) no-repeat 0px 20px;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbw-emailsubmit{
background:#f5bb0d;
cursor:pointer;
color:#fff;
border:none;
padding:4px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
font-size:12px;
font-family:sans-serif;
}
.mbw-emailsubmit:hover{
background:#df8228;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #e3e3e3;
resize:none;
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);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
font-size:13px;
width:170px;
color:#555;}
</style>
<div class="mbw-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=coolhackingtrick', '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 here" type="text" />
<input type="hidden" value="coolhackingtrick" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbw-emailsubmit" value="Submit" type="submit" />
<!--http://queenslodge.blogspot.com-->
</form>
</div>

4. Now many following changes to the above code.

• Replace http://feedburner.google.com/fb/a/mailverify?uri=coolhackingtrick with your feedburner url (You can get that by visiting your feedburner account then navigating to Publicize > Email Subscriptions.)
• Replace coolhackingtrick with your feed title. You can get that from end of your feed link.  http://feedburner.google.com/fb/a/mailverify?uri=coolhackingtrick 

5. All done now you will have cute email subscription on your blog.