Search Google

Thursday 18 September 2014

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.

<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="THENEWCREATOR" 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.

Furth

No comments:

Post a Comment