How to Design Attractive Subscription Box With Hover Effects Using CSS Sprites

IN Shoutmeloud

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.

demo-image

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 == &#39;Enter your email address...&#39;) {this.value = &#39;&#39;;}" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email address...&#39;;}" 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&amp;fg=FFFFFF&amp;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.

[css]

#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}
[/css]

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 on Youtube

Click to activate Offer & visit site Discount added automatically

Subscribe to SML Newsletter

Receive Blogging Tips & Strategies

Get WordPress Guide eBook for free in the 2nd newsletter

100% privacy. we will never spam you

  • Author Bio

  • Latest Post

Blog post by Mukund

Mukund has written 22 articles.

Follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


Testimonials
Send Us Inquiry

Comments

  1. says

    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.

  2. Rajesh kumar says

    very niyce tip ..i will implement it sure and it also looks attractive
    also add g+.
    thanks

    • Mukund says

      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:)

  3. rakesh says

    Dear Mukund, CSS with Image Sprite can enhance the layout of any website as well as help us to load our page faster.

  4. Sara@WebLoverz says

    Hey Mukund S…Nice tutorial thanks for sharing…i have learned a lot from that…Subscription box have a great importance to attract subscribers…

    • Mukund says

      Yup! I’m glad to know that you learned a lot from the above tutorial! Any way, thanks for the comment!

  5. Mukund says

    @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).

  6. Rahul says

    Is there any online programs that allows users to create their own custom subscription boxes?

    • Mukund says

      Online programs??? Definitely not! You’ll be provided with the basic subscription box from FeedBurner. It’s up to the individual to style it!

  7. Sagar says

    Mukund u’re a genius, I wanted the same widget like on your blog. Thank you for the awesome article :)

  8. SmashinGeeks says

    Nice Tutorial, the more attractive your Subscription Box, the more readers will engage in that part.

    • Mukund says

      I accept with your statement to an extent! The whole design plays a vital role rather than the subscription box alone:)

  9. Kavya Hari says

    HTML part should be more helpful for me without any error. Thank you so much for given great support on here :)

  10. Ravi Shankar says

    Expecting a similar hovered subscription box tutorial for thesis users.
    hope yopu have one soon.

  11. KBharath @ HDBloggers says

    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.

    • Pradeep Bhandari says

      @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 :)

  12. Roy C.Chukwu says

    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!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>