Subscription Email Form For Blogger Equipped With RSS Feed



Blogger-Subscription-Form

I am extremely sorry for delaying this post. Due to burden of studies I was finding it difficult to publish posts but now everything is fine. Now without wasting your time lets jump straight to the tutorial of adding a beautiful Subscription form to the sidebars of your BlogSpot blogs.


Before Proceeding make sure you have burnt your feeds at www.feedburner.com
Now do the following,

  1. Go To Blogger > Layout
  2. Click Add a Gadget or Add a Page element
  3. Choose HTML/JavaScript Widget
  4. Inside this widget paste the code below,

<a href="http://feeds2.feedburner.com/TntByStc" rel="alternate" title="Subscribe now to avail the unthinkable" type="application/rss+xml"><img border="0" alt="" style=" padding-bottom:20px; margin: 0pt 10px 10px 0pt; float: left; width:100px; height:100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigg3R-lSU1tDATD4xem9iYoTScpXvqdZBeTN0Q1xmi3LTeWVRxPTvUtHJtiGGb20NawpJr9HeBS5aKpE8tcrzOCI8EvAOVUqAhOHQKo3J2fM2wXOrWSc1o4hZpVIcc-0sW4llpStb5M9u-/s400/MBT-RSS-FEED.gif"/></a><p><a href="http://feeds2.feedburner.com/TntByStc" rel="alternate" title="Subscribe to my feed" type="application/rss+xml">Join the team! </a><span style="color: #5C6AA4; font-weight: bold;">By Submitting your email address:</span></p>
<style>
input.mbt1 {
color:#fff;
font: bold 10px Arial, sans-serif;
background:#F39100;
border:0;
padding:3px;
}
input.mbt1hov {
color:#fff;
font: bold 10px Arial, sans-serif;
border:2px solid #F39100;
padding:3px;
}
</style>
<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 5px; " target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style=" color:#5C6AA4; background: #fff; border:1px solid #5C6AA4; width: 90px;" name="email" type="text"/><input value="TntByStc" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input onmouseover="this.className='mbt1 mbt1hov'" onmouseout="this.className='mbt1'" value="GO!" class="mbt1" type="submit"/></form><br/>
Now you need to make some important changes to customize the widget.

  • Replace http://feeds2.feedburner.com/TntByStc with your Feed URL that Feedburner has provided you. If you don’t now how to get it simple replace TntByStc with your Feed title like this,
http://feeds2.feedburner.com/Paste-Your-Feed-Title-here
  • To use a different RSS Feed Icon simple change the URL below with that of yours,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigg3R-lSU1tDATD4xem9iYoTScpXvqdZBeTN0Q1xmi3LTeWVRxPTvUtHJtiGGb20NawpJr9HeBS5aKpE8tcrzOCI8EvAOVUqAhOHQKo3J2fM2wXOrWSc1o4hZpVIcc-0sW4llpStb5M9u-/s400/MBT-RSS-FEED.gif
  • Replace TntByStc with your own Feedburner Feed Title
  • The Color code #5C6AA4 refers to the text colour and border colour of the Subscription Box. May be Color Chart will help you. If you are using Buster Themes than change the colours as follows,
               For Buster Theme 1 leave the code #5C6AA4 unchanged.
               For Buster Theme 2 replace #5C6AA4 with #64A6E4
               For Buster Theme 3 replace #5C6AA4 with #37BD07
               For Buster Theme 4 replace #5C6AA4 with #7CA2C4
               If you are using Church Theme then replace #5C6AA4 with #7CA2C4
That’s it. Hit Save and Preview Your Widget!
I hope it was simple to understand :|
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)