How to Use CSS Sprite Blogger Tutorial Example - Part 3

This is Part 3 of the blog post series, that provides an introduction to using CSS Sprites in your blogger blog. This tutorial can be applied to any website for that sake, but we target Blogger because of the complexity involved in editing the blogger template. Till this point,we have a sprite image with us and we are after using it in our blogger in a way so that it improves the performance of the blog considerably.

Now, before editing the blogger template refer to the tutorial on SpriteMe that will explain how to generate the Sprite CSS code for the single image which we will be using. It is essential to get a basics on the SpriteMe example; otherwise it would be tough for you to understand how we have ended up generating the CSS. To use sprites for blogger, follow the step by step instructions below;

a) Navigate to Design -> Edit HTML. Click on "Download Full Template" and take a backup of your current blogger template.Refer to the image below for instructions;

Backup your template Before Using CSS Sprite

b) Click on "Expand Widget Templates" on the page.You are now ready to edit the template to add the required style definition. To do this, do a search on the page, and find the following tag:- ]]>

c) Replace that with the style definition provided below;

.a6
{
width:82px;
height:55px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizr4sQR4ZkM8a_lYyAH3B2o9elGd_OJQNwJ0s1Xdhl2zL1v0PyG4gSh7NQjgedCx_vtJ21S_Dfih7m95sLGo4fcuoZJBns7b3c1tm9G-NBtbk9Uw1QFpcV9X-WIEAxq_c4_lFBgJiYH1Ez/s320/spriteme1_singleimage.png");
background-position: -10px -10px;
}
.a7
{
width:82px;
height:55px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizr4sQR4ZkM8a_lYyAH3B2o9elGd_OJQNwJ0s1Xdhl2zL1v0PyG4gSh7NQjgedCx_vtJ21S_Dfih7m95sLGo4fcuoZJBns7b3c1tm9G-NBtbk9Uw1QFpcV9X-WIEAxq_c4_lFBgJiYH1Ez/s320/spriteme1_singleimage.png");
background-position: -10px -85px;
}
.a8
{
width:82px;
height:55px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizr4sQR4ZkM8a_lYyAH3B2o9elGd_OJQNwJ0s1Xdhl2zL1v0PyG4gSh7NQjgedCx_vtJ21S_Dfih7m95sLGo4fcuoZJBns7b3c1tm9G-NBtbk9Uw1QFpcV9X-WIEAxq_c4_lFBgJiYH1Ez/s320/spriteme1_singleimage.png");
background-position: -10px -160px;
}
.a9
{
width:82px;
height:55px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizr4sQR4ZkM8a_lYyAH3B2o9elGd_OJQNwJ0s1Xdhl2zL1v0PyG4gSh7NQjgedCx_vtJ21S_Dfih7m95sLGo4fcuoZJBns7b3c1tm9G-NBtbk9Uw1QFpcV9X-WIEAxq_c4_lFBgJiYH1Ez/s320/spriteme1_singleimage.png");
background-position: -10px -235px;
}
.a10
{
width:82px;
height:55px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizr4sQR4ZkM8a_lYyAH3B2o9elGd_OJQNwJ0s1Xdhl2zL1v0PyG4gSh7NQjgedCx_vtJ21S_Dfih7m95sLGo4fcuoZJBns7b3c1tm9G-NBtbk9Uw1QFpcV9X-WIEAxq_c4_lFBgJiYH1Ez/s320/spriteme1_singleimage.png");
background-position: -10px -310px;
}
]]></b:skin>

d)Click on "Save Template" once you are done with this. What you have essentially done till this point is, you have edited your template and added the required style definitions.

e) You can now add a HTML area to the blog and use the definitions as explained in the SpriteMe tutorial. This will make sure that your blog uses CSS Sprites. A sample HTML code to be placed inside the HTML area is shown below;

<div class="a6"></div>
<div class="a7"></div>
<div class="a8"></div>
<div class="a9"></div>
<div class="a10"></div>

Now, you need to note down the following important points:

1) If the dimension does not fit you blog layout you can use SpriteMe tutorial to construct and find the right dimensions for your blog.
2) This technique is only for background images and not for foreground images on your blog.
3) Test your blog with Google Page Speed Online tool once this is done to see the relative improvement in your blog performance.