Subscription box is a must have for any blog or website to let readers connect with you on various social networking site. Though to make most out of it, it’s important to have an attractive subscription box on your sidebar or at any prominent space around your blog post. In this article, I’ll illustrate the same effect but with a more practical example. I’ll be using the same technique to create an attractive subscription box with social bookmarking icons which on hover displays a grayish version.
In my previous article about sprites, I explained the basics using a simple image hover effect. Before I proceed with the tutorial, have a look at the screen shot below for the final effect.
Let’s get started with tutorial. I’ll split the tutorial into two halves – HTML part and the CSS part. If you are WP user, add the HTML part on your sidebar. I’m not a WP geek but Harsh will help you out if you one. For blogger/blogspot users, it’s the same. You need to add the coding using “Edit Layout >> Add Page Elements >> HTML/JavaScript”.
HTML PART
Download the code mentioned in text document – HTML FOR SUBSCRIPTION BOX. As mentioned earlier, add the code in the text document to your sidebar. The following lines need to be modified before you save them.
<center>
<center>
<form style="padding-top:6px;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDNAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input onfocus="if (this.value == 'Enter your email address...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter your email address...';}" value="Enter your email address..." id="subbox" name="email" style="width:200px;" type="text" />
<input value="YOUR-FEEDNAME" name="uri" type="hidden" /><input name="loc" value="en_US" type="hidden" />
<input style="padding-left:3px; padding-right:3px; border: 1px solid #333333; cursor: pointer; background-color: #000000; color: #FFFFFF; padding-bottom:0px;" value="Submit" type="submit" />
</center>
<table border="0"><tbody><tr></tr><tr><td>
<a href="http://twitter.com/YOUR-TWITTER-USERNAME" target="_blank" rel="nofollow" title="Follow Me On Twitter" id="twit1"></a>
</td><td>
<a href="http://www.stumbleupon.com/refer.php?url=YOUR-BLOG-HOMEPAGE-URL" rel="nofollow" target="_blank" title="Stumble Upon EAB" id="tech1"></a>
</td><td>
<a href="YOUR-FACEBOOK-FANPAGE-URL" target="_blank" rel="nofollow" title="Find Us On Facebook" id="face1"></a>
</td><td>
<a href="http://feeds.feedburner.com/YOUR-FEEDNAME" target="_blank" title="Subscribe Via RSS" rel="nofollow" id="subs1"></a>
</td><td>
<a href="http://del.icio.us/post?url=YOUR-BLOG-HOMEPAGE-URL" target="_blank" title="Save On Del.icio.us" id="del1"></a>
</td><td>
</td><td>
<a href="http://feeds.feedburner.com/YOUR-FEEDNAME"><img src="http://feeds.feedburner.com/%7Efc/YOUR-FEEDNAME?bg=000000&fg=FFFFFF&anim=1" style="border:0; padding-top:2px" alt="Fellow Readers" height="26" width="88" /></a>
<script type="text/javascript" language="JavaScript" src="http://twittercounter.com/embed/YOUR-TWITTER-USERNAME/ffffff/111111"></script>
</td></tr></tbody></table>
</center>
1. Instead of “YOUR-FEEDNAME” at various instances (5 instances) in the above coding, you need to substitute the name of your feed from FeedBurner. In other words, just login to your FeedBurner account and look at the title of your feed – that will serve as your feed name. For example, replace “http://feeds.feedburner.com/YOUR-FEEDNAME” with “http://feeds.feedburner.com/shoutmeloud”.
2. Replace “YOUR-TWITTER-USERNAME” at various instances (2 instances) in the above coding with your twitter user name. For example, replace “http://twitter.com/YOUR-TWITTER-USERNAME” with “http://twitter.com/shoutmeloud”.
3. Replace “YOUR-BLOG-HOMEPAGE-URL” at various instances (2 instances) in the above coding with the URL of your blog. For example, replace “http://del.icio.us/post?url=YOUR-BLOG-HOMEPAGE-URL” with “http://del.icio.us/post?url=http://www.shoutmeloud.com”.
4. Finally, replace “YOUR-FACEBOOK-FANPAGE-URL” that appears at only one instance in the above coding with your facebook fan page URL. In other words, replace “http://www.facebook.com/YOUR-FACEBOOK-FANPAGE-URL” with your fan page URL.
Once you make the above changes, save your theme/template. Take a break if you need one! Now, let’s add the CSS for the subscription box. I’ve made the job easy for you (just copy-paste the CSS) by inculcating the sprites technique in the code.
CSS PART
WP users need to add the CSS part to your “.css file” and upload the same to your server while blogspot/blogger users need to add the following code present in the text document just above </head> in your template – CSS FOR SUBSCRIPTION BOX.
#face1{width:30px; height:30px; text-decoration:none; display:block; background-image:url(https://lh3.googleusercontent.com/-T77Xez8hnhA/TiAZGkTww9I/AAAAAAAABTs/DXxlNdKL5VY/s800/subscribe-box.png); background-position:0px -78px}
#face1:hover{width:30px; height:30px; display:block; background-image:url(https://lh3.googleusercontent.com/-T77Xez8hnhA/TiAZGkTww9I/AAAAAAAABTs/DXxlNdKL5VY/s800/subscribe-box.png); background-position:-40px -78px}
#twit1{width:30px; height:30px; text-decoration:none; display:block; background-image:url(https://lh3.googleusercontent.com/-T77Xez8hnhA/TiAZGkTww9I/AAAAAAAABTs/DXxlNdKL5VY/s800/subscribe-box.png); background-position:0px -38px}
#twit1:hover{width:30px; height:30px; display:block; background-image:url(https://lh3.googleusercontent.com/-T77Xez8hnhA/TiAZGkTww9I/AAAAAAAABTs/DXxlNdKL5VY/s800/subscribe-box.png); background-position:-40px -38px}
#tech1{width:30px; height:30px; text-decoration:none; display:block; background-image:url(https://lh3.googleusercontent.com/-T77Xez8hnhA/TiAZGkTww9I/AAAAAAAABTs/DXxlNdKL5VY/s800/subscribe-box.png); background-position:0px -158px}
#tech1:hover{width:30px; height:30px; text-decoration:none; display:block; background-image:url(https://lh3.googleusercontent.com/-T77Xez8hnhA/TiAZGkTww9I/AAAAAAAABTs/DXxlNdKL5VY/s800/subscribe-box.png); background-position:-40px -158px}
#subs1{width:30px; height:30px; text-decoration:none; display:block; background-image:url(https://lh3.googleusercontent.com/-T77Xez8hnhA/TiAZGkTww9I/AAAAAAAABTs/DXxlNdKL5VY/s800/subscribe-box.png); background-position:0px 0px}
#subs1:hover{width:30px; height:30px; text-decoration:none; display:block; background-image:url(https://lh3.googleusercontent.com/-T77Xez8hnhA/TiAZGkTww9I/AAAAAAAABTs/DXxlNdKL5VY/s800/subscribe-box.png); background-position:-40px 0px}
#del1{width:30px; height:30px; text-decoration:none; display:block; background-image:url(https://lh3.googleusercontent.com/-T77Xez8hnhA/TiAZGkTww9I/AAAAAAAABTs/DXxlNdKL5VY/s800/subscribe-box.png); background-position:0px -118px}
#del1:hover{width:30px; height:30px; text-decoration:none; display:block; background-image:url(https://lh3.googleusercontent.com/-T77Xez8hnhA/TiAZGkTww9I/AAAAAAAABTs/DXxlNdKL5VY/s800/subscribe-box.png); background-position:-40px -118px}
If you are a blogspot user, then do not change anything in the CSS part. However, I suggest WP users to upload the image used in the CSS part (Image Link) to their own servers to improve their site speed.
If you exchange the background positions between a normal class and its companion hover class (#twit1 and #twit1:hover), you can achieve the reverse effect – grayish version before hover and colored version on hover. Well, I tried to keep the tutorial as simple as possible. Though if you are stuck some where, do put your queries via comment.
Subscribe Updates, Its FREE!
→ 
→ 
{ 27 comments… read them below or add one }
Mukund, you are a Geek, yes this is great. What a nice tip here.
But don’t you thing +G needs to be there too?
Hope to hear from you.
Cheers!,
Roy!
Hey Mukund Thanks for This, but i am a thesis user how to add this in my blog if you share it will be helpful.
@KBharath create a new widget from widget section and add the css style tags for i.e your css and after that put your html code…or just add the css code in custom.css and put the html in your widget and place it where ever you want i hope this will help
Expecting a similar hovered subscription box tutorial for thesis users.
hope yopu have one soon.
Thanks for sharing this. I’m facing one problem with it. There is no space between the social icons. See this-
http://dl.dropbox.com/u/513475/7-26-2011%205-34-03%20PM.jpg
and background color is not coming in ‘Enter you email address’ field. How to solve this problem?
@plaban may be you should again copy and paste the codes for fixing the space issue even if you are not able to fix it then pls share the link where you using the code and about the background color of the input box just add the following code at the end of the css code
#subbox{background: none repeat scroll 0 0 #E3E3E3;}
note** #e3e3e3 is the color which will be displayed you can use your own color…I hope this might helped you. Thanks
HTML part should be more helpful for me without any error. Thank you so much for given great support on here
Yup! Thanks for the comment! Enjoy the other articles as well!
gr8 tut. i implemented this on my blogger blog!
Yup! I hope you enjoy the upcoming tutorials as well!
Nice Tutorial, the more attractive your Subscription Box, the more readers will engage in that part.
I accept with your statement to an extent! The whole design plays a vital role rather than the subscription box alone:)
Mukund u’re a genius, I wanted the same widget like on your blog. Thank you for the awesome article
Ah! I know you very well buddy! Yes! Enjoy the widget:)
Is there any online programs that allows users to create their own custom subscription boxes?
Online programs??? Definitely not! You’ll be provided with the basic subscription box from FeedBurner. It’s up to the individual to style it!
ok so can u do a custom style for me. For my new tech blog so taht it matches with the design.
Why not? I’ll design one for free provided you need a simple one!
@Roy C.Chukwu : Well, I guess I should add the same! But, it’s pretty easy! You just need to modify the image and get the Google+ icon up there!
@KBharath: I’m not a WP expert! So, I’ll consult with Harsh and then let you know it should be done! Just ping me on gtalk:)
@Ravi Shankar: Yes! I’ll ask Harsh to update the same article!
@plaban: The reason why the background color did not appear is because I missed out the css for id=”subbox”! So, add this css code along with the other css to get the background as well!
#subbox{background:#eee !important; width:175px; color:#202020; font-size:12px; font-family:Georgia,Times New Roman,Trebuchet MS; font-weight:normal; margin:5px 0 0; padding:3px 0 3px 5px; border-top:1px solid #666; border-right:1px solid #ddd; border-left:1px solid #666; border-bottom:1px solid #ddd; display:inline}
I’ve just provided the code which I used on my site! The padding and margin positions might vary! I hope you know to adjust them! Regarding the space, you can simple add some padding (either in the css part or in the HTML part with your anchor tag).
Hey Mukund S…Nice tutorial thanks for sharing…i have learned a lot from that…Subscription box have a great importance to attract subscribers…
Yup! I’m glad to know that you learned a lot from the above tutorial! Any way, thanks for the comment!
Dear Mukund, CSS with Image Sprite can enhance the layout of any website as well as help us to load our page faster.
Yes! That’s what I mentioned in the earlier article about Sprites:)
very niyce tip ..i will implement it sure and it also looks attractive
also add g+.
thanks
Yup! Thanks for the comment! If you want to add a “Google+” button, then download the sprite image that’s used in the CSS. later, remove one set of social buttons and add Google+ there using Photoshop! Later, upload the same and use it on your CSS part! Difficult to understand, then wait for few more weeks and I’ll update the article:)
Nice tutorial mukund. I hope to see more tutorials.
Can you please share how you make red subscription box at end of post.? I know hot to add at end of every post. But I would like to know code for particular that Design with red background.