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/AVvXsEheLeUtz-NQ9OlHZA1tq7lZP-ensUGZU_ldrUCWMDL1dksKllxAZBwB9t7xyoB1-3aUynSdH1HF7guYGPmROSQSSpi55tCVNM1c30a9ggSigORAaRlY-pd9MiY2IbJeEyZejCHryUfJ58lN/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 replaceTntByStc 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/AVvXsEheLeUtz-NQ9OlHZA1tq7lZP-ensUGZU_ldrUCWMDL1dksKllxAZBwB9t7xyoB1-3aUynSdH1HF7guYGPmROSQSSpi55tCVNM1c30a9ggSigORAaRlY-pd9MiY2IbJeEyZejCHryUfJ58lN/s400/MBT-RSS-FEED.gif
  • Replace TntByStc with your own Feedburner Feed Title
               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

Leave a Reply