Create Simple And Cute Email Subscription Box For Blogger

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 http://realpctrick.blogspot.com/-->
<style>
.mbw-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIsqD_SWJ3ypJdu6ve6-XQgx5kgFUBvfF9dG6-NjD9v-QNjggd7fKrV6arI-dxaczuc19G-QNo0aiNChux4TedkerQk93Gknd-XV0mwI4TKCR2zFSilRl1_8zgBmeI5zzfg-29CskWP4I/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=allrealpctricks', '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="allrealpctricks" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbw-emailsubmit" value="Submit" type="submit" />
<!--http://realpctrick.blogspot.com/-->
</form>
</div>

4. Now many following changes to the above code.

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

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

Further Customizing

If you wish to further customize the RSS Subscription box then make following changes or leave a comment below i will be glad to help you out.

• change #f5bb0d to change background of submit button
• change #df8228 to change background of button on hover effect.
• change "Subscribe Via Email" to any diffetent message you like (Keep it short)

Watch the video to learn More