» » Create Simple And Cute Email Subscription Box For Blogger

A+ A-
HELLO SHOAIB IT READERS
TODAY MY TOPIC IS:
Create Simple And Cute Email Subscription Box For BloggerCreate Simple And Cute Email Subscription Box
THERE ARE MANY WEBSITES AND BLOGERS TODAY AND THERE ARE MANY GUESTS THAT READ THEIR CONTENTAND LOVE TO HEAR THEM A LOT ALSO WANTS TO GET UPDATED BY THE NEW POST AND COLOUMS OF THE WRITE SO THEY WANTS TO SUBSCRIBE TO THEIR FEEDS SO THAT THEY CAN GETS THE NEWS OF NEWS OF NEW POSTS AUTOMATICALY WHEN THE WRITER WRITES A NEW POST TODAY I AM SHARING A WIDGET WITH YOU THROUGH THIS YOU CAN SUBSCRIBE A NEWSLETTER FROM YOUR FAVOURITE SITE AND GUESTS ALSO GET THIS OPPORTUNITY TO SUBSCRIBE THEM AND GET NEWS IN THE FUTURE AND STAY CONNECTED ...SO THER IS THE METHOD TO CREATE A SUBSCRIBE NEWSLETTER BOX FOR BLOGGER.

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/AVvXsEg62R5I3zpNYa0mr9AlsKVxtldSk0m6yFX5ZczyIkz0ZA1f17yPihIVnd0M620CHQStdljpdMv9OtxJtyysJTY__BcbEtZtvZKXvTCX0qu2easQgP3crXyMzt73GmUw7VRBFRxFa1kk2aw/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)

Share to:

 
Top