Create Simple And Cute Email Subscription Box For Blogger

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/AVvXsEjNujQ2jZyJp45dB0C5jjWR5FB4ZuKeXPbjO1xFye-d52-vKS9rx-U209X4dxbdXogWavN5OFF3iQd0-z51jU_DWZZ7SmqfyYwPm0oxMuWgHOGwBhJolyVyq9OIsyBipjfRmtD1ep5q2m0/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" />
<!--www.mybloggersworld.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.

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)