Stylish Email Subscription Widget for Blogger

Stylish Email Subscription Widget for Blogger Blog Code

by

I have previously share a tutorial on adding blogger default RSS subscription box. But the default form is not so cool and unattractive. In today 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.
<!–MP Email Subscription Box mozpk.com–>
<style>
.mbw-email{
background:url(http://1.bp.blogspot.com/-zLOxMQq0_Ac/UuiBx14E7rI/AAAAAAAABBc/oDfM96NF1ag/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.mozpk.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 different message you like (Keep it short)

Leave a Comment