Using CSS Sprites On Blogger - Introduction

Save on del.icio.us Add to Technorati Digg this article! Add it on Reddit! 14 Comments

I'm sure many of you would have visited websites like Yahoo!, YouTube, Facebook, etc.. Have you ever wondered how quick these websites load though they possess a lot of images in the background? How is it possible? Is it possible only for websites - not for blogs on blogger? Definitely not, we can have these effects on blogger too. But how? Answer: Using CSS Sprites!!!

WHAT ARE CSS SPRITES? ARE THEY USEFUL?

Well, the name might be little misleading. Sprites are not small tiny pictures as you imagine. A sprite is one big image - usually a cluster of small images used on a website. By using CSS Sprites, we achieve the following advantages.

• Total image size is generally less when compared to the size of the combined individual images. So, a considerable bandwidth is saved. 
• Few images for the browser to load which means fewer HTTP requests (per page view). Multiplying this with the number of visitors per day, per week, per month, per year. Definitely a lot of saving... Isn't it?
• Most important - no JavaScript, no jQuery - only CSS!!!

Well, I guess the question of "Whether Sprites are useful?" has got erased from your mind now. Moreover, we recently heard from Google that page speed will be reflected on the respective blog's PageRank. So, if you wish to have a better PR by increasing the page speed of your blog, then Sprites would come in handy!

SIMPLE HOVER EFFECT

In this article, I will just illustrate the very basics of CSS Sprites - to get hold of "What's CSS Sprites". In the upcoming articles, you will find a detailed explanation about how sprites could be applied to all the images in a blog. Here, we restrict ourselves to one simple trick - Hover Effect Using Sprites. Take a look at the demo before we proceed to the tutorial. Hover your mouse onto the tweety bird to the right. Cool Effect! Isn't it?

TUTORIAL

Wondering where to use this effect? It's most effective on navigation bars. Other areas include highlighting a link (or) usage in the header of your blog - anywhere you need a hover effect. I would like to illustrate this effect with my very own example - tweety bird. Before we get into the coding part, make sure you have identical images - same width and height.

The first image (PREVIEW) which I used is just the outline of the tweety bird while the second one (PREVIEW) is filled with colors. Later, I clubbed both the images onto a single file using Photoshop. Clubbed??? It's just placing one image below an another. You place the images horizontally one after another (or) place them one below another. I chose to place them one below another. Have a look at the final image - PREVIEW. The final image is the one which will be used for the hover effect using CSS Sprites.

HTML PART
The following piece of code is the HTML part for the above effect.

<a href='#' id='logo-link1'/>

Note: Make sure the ID used is unique (code highlighted in pink). You may place it anywhere in between your body tags to invoke the effect. I have used it in my post area in this article. You may point to any URL by replacing # with the link your wish to point to - it's pretty self-explanatory.

CSS PART
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Place the following piece of code just above the line mentioned in step 1.

#logo-link1
{
width:271px;
height:288px;
text-decoration:none;
display:block;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidWYLWE03eetknHKFghyphenhyphenTAq2frq5FjvdgYEuJrgBOn4LW8OIIV72h4JkcMpdctKA5TaDtzacr2hzPwyx64gn7ZYQFXHz5NWFJCaORIBH9WfhmB90ZVSB6LY9eSYku_B54aPn7x79H87Mc/s800/tweety-sprites-tutorial.png);
background-position:0px -288px;
}
#logo-link1:hover,#logo-link1:active
{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidWYLWE03eetknHKFghyphenhyphenTAq2frq5FjvdgYEuJrgBOn4LW8OIIV72h4JkcMpdctKA5TaDtzacr2hzPwyx64gn7ZYQFXHz5NWFJCaORIBH9WfhmB90ZVSB6LY9eSYku_B54aPn7x79H87Mc/s800/tweety-sprites-tutorial.png);
background-position:0px 0px;
}

Note: When the browser loads the image, I want the outline alone. For this reason, I set the background position of the image to 0px horizontally & -288px vertically (code highlighted in green). On hover, I need the colored version. So, I just move the vertical position from -288px to 0px (code highlighted in orange). That's it!
3. Save your template. That's it!

Pretty simple!!! Isn't it? Since this is an introductory article on sprites, it looks very easy.  Moreover, we have dealt with only one image. Imagine when it multiplies for all the images on your blog. It will be very difficult to exactly position your images and get the padding right. We will illustrate with better examples in the upcoming articles. Share your opinions or clear your doubts about sprites via comments!

Enjoyed the article?

Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Save on del.icio.us
Add to Technorati
Digg this article!
Add it on Reddit!
Leave a comment

Other Recommended Posts

• CSS Sprites, CSS Tricks, Web Design