Have you blog-walking and found that others blog got a very interesting subscription box? There is many variation of subscription box for website and each of them is unique and cool. Not just that, the traditional subscription box for website which only consist of email and RSS feed subscription, now become more advanced with some additional features like Facebook fan page button and Twitter follow button. I am not say that this will increase your feed reader but at least you can make them tempted. Of course there is exception with some websites though.

Well the good thing is, you can have one on your own. Here I will break it through slowly so it's understandable and easy to implement.

Scrennshot:


Now first thing first. Do this:

1. go to Feedburner.google.com and register. If you already register then get you Feed Address. Its look like this
http://feeds.feedburner.com/Your-FeedBurner-Feed

2. go to TwitterCounter.com and register. Then get your own Twitter counter button. The javascript look like this
<script type="text/javascript" language="JavaScript" src="http://twittercounter.com/embed/Your-Twitter-User-Name/111111/99CCFF"></script>

How to implement the code?

Step 0 : Go to your blogger Dashboard, Click 'Layout' ► 'Page Elements' ► 'Add a Gadget ► And choose 'HTML/JavaScript'.

Step 1 : Copy the following code and paste it
<!-- Email subsciption box -->
<form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your-FeedBurner-Feed ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><b>Like This Blog's Posts?</b> Get the Latest of It Directly from your Inbox for Free - Enjoy your Day!<br />
<div style="text-align:center">
<input type="text" value="Enter your email address..." id="subbox" onfocus="if (this.value == &#39;Enter your email address...&#39;) {this.value = &#39;&#39;;}" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email address...&#39;;}" name="email" style="width:250px;" />
<input type="hidden" value="Your-FeedBurner-Feed " name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input type="submit" value="OK" id="subbutton" />
</div></form>

<div>
<center>
<table>
<tr>
<td>
<a href="http://feeds.feedburner.com/Your-FeedBurner-Feed "><img src="http://feeds.feedburner.com/~fc/Your-FeedBurner-Feed ?bg=99CCFF&amp;fg=111111&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a>
</td><td>
<script type="text/javascript" language="JavaScript" src="http://twittercounter.com/embed/Your-Twitter-User-Name/111111/99CCFF"></script>
</td>
</tr>
</table></center>
</div>

<div style="padding-left:10px;">
<table>
<tr><td>
<a href="http://feeds.feedburner.com/Your-FeedBurner-Feed " target="_blank" title="Subscribe To The Latest Posts"><img style="float:left; margin-right:5px; width:20px; height:20px;" src="http://img243.imageshack.us/img243/2619/10rssicon.png" /></a><a href="http://feeds.feedburner.com/Your-FeedBurner-Feed " target="_blank" title="Subscribe To The Latest Posts">Subscribe to The RSS Feed</a>
</td></tr>
<tr><td>
<a href="Your-Facebook-Page-Url" target="_blank" title="Facebook time"><img style="float:left; margin-right:5px; width:20px; height:20px;" src="http://img163.imageshack.us/img163/8637/10facebookicon.png" /></a>
<a href="Your-Facebook-Page-Url" target="_blank" title="Facebook time">Connect via Facebook</a>
</td></tr>
<tr><td>
<a href="http://twitter.com/Your-Twitter-User-Name" target="_blank" title="Twitter time"><img style="float:left; margin-right:5px; width:20px; height:20px;" src="http://img189.imageshack.us/img189/6853/10twittericon.png" /></a><a href="http://twitter.com/Your-Twitter-User-Name" target="_blank" title="Twitter time">Follow Us on Twitter</a>
</td></tr>
</table></div>
<!-- /Email subsciption box -->

Now, these are some changes that you need to do:
Your-FeedBurner-Feed :- blogspot/YgOX (e.g. http://feeds.feedburner.com/blogspot/YgOX)
Your-Facebook-Page-Url :- Your Facebook Fan Page Url (e.g. http://www.facebook.com/pages/Junks-Blogger/109882239030703)
Your-Twitter-User-Name :- e.g. hedy7
width:250px  :- Adjust the width of the email subscription text box to your sidebar width.
Like This Blog's Posts? Get the Latest... :- I'm not so good to put a good word so you might want to change this. lol.
99CCFF :- Button background color (use this color)
111111 :- Buton text color (use this color)

And that's it, simple as 123. I think enough for today, don't worry, more version to come. And if you got a problem just leave a comment..

Icon courtesy from IconArchive.com



You may also like this [...]
Fellow Readers