ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu

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

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

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.


#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.

  • Author Bio

  • Latest Post

Article by Mukund

Mukund has written 26 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


{ 25 comments… add one }

  • Kanan

    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.

    Reply
  • Sudheer Ranga

    Nice tutorial mukund. I hope to see more tutorials.

    Reply
  • Rajesh kumar

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

    Reply
    • Mukund

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

      Reply
  • rakesh

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

    Reply
    • Mukund

      Yes! That’s what I mentioned in the earlier article about Sprites:)

      Reply
  • Sara@WebLoverz

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

    Reply
    • Mukund

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

      Reply
  • Mukund

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

    Reply
  • Rahul

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

    Reply
    • Mukund

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

      Reply
      • Rahul

        ok so can u do a custom style for me. For my new tech blog so taht it matches with the design.

        Reply
        • Mukund

          Why not? I’ll design one for free provided you need a simple one!

          Reply
  • Sagar

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

    Reply
    • Mukund

      Ah! I know you very well buddy! Yes! Enjoy the widget:)

      Reply
  • SmashinGeeks

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

    Reply
    • Mukund

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

      Reply
  • Gautam Doddamani

    gr8 tut. i implemented this on my blogger blog! :)

    Reply
    • Mukund

      Yup! I hope you enjoy the upcoming tutorials as well!

      Reply
  • Kavya Hari

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

    Reply
    • Mukund

      Yup! Thanks for the comment! Enjoy the other articles as well!

      Reply
  • Ravi Shankar

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

    Reply
  • KBharath @ HDBloggers

    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.

    Reply
    • Pradeep Bhandari

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

      Reply
  • Roy C.Chukwu

    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!

    Reply

Leave a Comment