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;
Blogger Backup Template
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.

5 comments:

  1. Hi, I'm having trouble editing my template in blogger. Please help.

    1) Upon searching for ']]>', am seeing it occurring at 3 places, with the third one being in the form '// ]]>'. So, which one of these should I replace?

    2) By replacing, am I supposed to just erase the symbol ']]>' and insert the given code or do I have to replace the code between the first 2 occurrences of ']]>' with the given code? If so, what do I do with the third occurrence? Does the code in between mean including the symbols ']]>'.

    ReplyDelete
  2. @Alex,

    Please advise what you are trying to sprite and post all the occurrences. I'm happy to have a look.

    ReplyDelete
  3. My sprited image is at 'http://4.bp.blogspot.com/-aUgRw5e3AiE/UH-renK8FrI/AAAAAAAACDM/ci3shK83M8g/s1600/spriteme1+(1).png'.

    Also, I haven't inserted the modified code as shown in the post 'Using SpriteMe Tool example (http://thinktibits.blogspot.in/2011/05/using-spriteme-tool-example-css-sprites.html)Where do I add that?

    ReplyDelete
  4. @Alex, I need to get your requirement right. I saw your sprited image. You want to insert a part of this image into your blog, right? Have you got the positions of your image?

    ReplyDelete
  5. Beautiful tool! I'll put it on my blog.

    ReplyDelete