Bloggers today want more readers for their blog, even if you are getting traffic it's not important that you will get readers for sure, you have to create a stunning and good looking gadget that will suite your blog. This tutorial will teach you how to make one.
This tutorial is good for Bloggers who are not too tech savvy and works very less with HTML/CSS, the tutorial becomes more easy because you don't need to work with those complicated JavaScript codes.
Demo
The subscribe box will be rendered under posts, so that after reading article the visitor will love to join your blog via subscribing it. But before we start you need an feedburner account and a RSS feed of your blog.
We will edit the template code in the tutorial so if something went wrong you need a backup of your blog template -Backup your Template.
You need to make some changes in the HTML code, so that visitors are redirected to your feeds not mine, i will guide you how to and where to make those changes. So here's the HTML Code.
This tutorial is good for Bloggers who are not too tech savvy and works very less with HTML/CSS, the tutorial becomes more easy because you don't need to work with those complicated JavaScript codes.
Demo
The subscribe box will be rendered under posts, so that after reading article the visitor will love to join your blog via subscribing it. But before we start you need an feedburner account and a RSS feed of your blog.
We will edit the template code in the tutorial so if something went wrong you need a backup of your blog template -Backup your Template.
You need to make some changes in the HTML code, so that visitors are redirected to your feeds not mine, i will guide you how to and where to make those changes. So here's the HTML Code.
<b:if cond='data:blog.pageType == "item"'>
<form class='feed-frm' action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MyBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div class='get-sbs'>Subscribe to our Free Email newsletter</div>
<div class='inp-btntx'>
<p class='ent-emltx'>Enter your email address:</p>
<p class='inp-ares'><input class="sbscribe-eml" type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="MyBlog" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="submit-btn" type="submit" value="Subscribe" />
</div>
<p class='fd-feedbrnr'>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>
<div class='mdt-links'>
<div class='mdt-feed'><a href='http://stramaxon.blogspot.com/2012/05/subscribe-to-this-blog-gadget-under.html' target='blank'>Add this Gadget</a></div>
<div class='mdt-feed2'><a href='http://stramaxon.blogspot.com' target='blank'>Gadget by Deepak Kamat</a></div>
</div>
</form>
</b:if>
This is the HTML that has to be pasted in your template so that it will render a 'subscribe to feed' gadget under the Post entry, that will catch your visitors eye.
Change the values
You have to change some values so that it will redirected the feed to your feed. Go to your feedburner account, you will see the list of your feeds, click on the feed name and then go to the Publicize tab. On left hand side you will see 'Email Subscription' click on it and you will get your own code, just copy the value, like here the value is 'Stramaxon', just like that you will change the HTML to redirect it to your's feed. See this edit<b:if cond='data:blog.pageType == "item"'>
<form class='feed-frm' action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MyBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div class='get-sbs'>Subscribe to our Free Email newsletter</div>
<div class='inp-btntx'>
<p class='ent-emltx'>Enter your email address:</p>
<p class='inp-ares'><input class="sbscribe-eml" type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="MyBlog" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="submit-btn" type="submit" value="Subscribe" />
</div>
<p class='fd-feedbrnr'>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>
<div class='mdt-links'>
<div class='mdt-feed'><a href='http://stramaxon.blogspot.com/2012/05/subscribe-to-this-blog-gadget-under.html' target='blank'>Add this Gadget</a></div>
<div class='mdt-feed2'><a href='http://stramaxon.blogspot.com' target='blank'>Gadget by Deepak Kamat</a></div>
</div>
</form>
</b:if>
In place of MyBlog (line 4 and line 11) in the code change it to your blog's feed name which is as follows http://feedburner.google.com/MyBlog the character in the link is your Feed Name, which is to be pasted in the HTML code, just replace the MyBlog with your feed name which you will find in the blog feed address.
Paste the HTML
The HTMLs given above is just for making you understand what to do, so you know that you have to change several values so that visitors will be redirected to your feeds.
<b:if cond='data:blog.pageType == "item"'>
<form class='feed-frm' action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MyBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div class='get-sbs'>Subscribe to our Free Email newsletter</div>
<p>Enter your email address:</p>
<p><input class="sbscribe-eml" type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="MyBlog" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="submit-btn" type="submit" value="Subscribe" />
<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>
<div class='mdt-feed'><a href='http://stramaxon.blogspot.com/2012/05/subscribe-to-this-blog-gadget-under.html' target='blank'>Add this Gadget</a></div>
</form>
</b:if>
Go to your Blogger Dashboard > Template > Edit HTML > Proceed > Expand Widgets Template > Now search for this line <div class='post-footer'> and paste the HTML given , just above <div class='post-footer'>
We aren't done yet, we have just posted the HTML, but to make it look good we need some CSS that will do the job. So let's continue with the CSS.
You won't believe but the CSS is very lengthy, so i am hosting the CSS file, you have link it.
<link href='http://fonts.googleapis.com/css?family=Judson|Poiret+One|Sirin+Stencil|Oleo+Script|Felipa|Holtwood+One+SC|Italiana' rel='stylesheet' type='text/css'/> <link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/80435960/gadget-subs.css"/>
Where to add this ? Easy, go to your Blogger Dashboard > Template > Edit HTML > Proceed > Now using browser's default search feature find </head> and paste the HTML link tag for CSS just above </head>.
If you did it right, then the it will look like this.
After pasting the link tag lines, save template ! And you are done.
Thank you for using our gadget, now it's your, hope you will start getting more subscribers with this cool looking subscription box.
If you found any glitch or errors feel free to post comment.
