Modifying Images in Blogger CSS Templates

Erika Smith from the Wedding Blog sent a question about hosting images for the Blogger Template. I am posting the reply here since it will benifit all blogspot.com users who are not comfortable modifying CSS templates that include links to web images.

Erika's Question: How or where do I add a web hosted image to a blogger or free blog template? I understand HTML but all the templates I am working with are CSS.

Erika, there are three steps involved here:

Step 1: Download the Blogger Template with the associated image files. You can easily find tons of free but professional looking blog template designs on the web.

Step 2: Upload the images files to the web. While there are tons of free Image Hosting Websites like PhotoBucket or ImageShack, I would recommend only the following sites for blogspot.com users:

  » googlepages.com - create a directory called blog_assets and under it, a new directory called images. Upload all the images to this directory using the web image uploader. [Recommended when you have just a couple of image files to upload]

  » picasaweb.google.com - create a new public Picasa web album called Blog Assets and upload your blogger images via the Picasa desktop client. [Recommened when you have way too many pictures to upload]

  » blogger.com - compose a new blog post, upload images via the "Add image" button and then save the post as a Draft. Don't publish the post. This is actually a hack for uploading images to blogger.com server, using the image url and then deleting the original post. In doing so, the images are not deleted by blogspot server. [Recommened only when the above two services are not accessible to you]

All the three services will give you a unique URL that directly points to the full-size version on the web. Keep it handy. Also, don't use Flickr for uploading Blog Template Images since their policy requires you to link back to the original Flickr image. [Flickr vs Picasa]

Step 3: This is last but the most important step - you will actually replace the image file names with the actual image URLs

Open your template and select the entire text using the mouse or pressing Ctrl+A - Now paste that in a new notepad session.

Press Ctrl+F and type .jpg or .gif or .png - this is to determine the locatioin of the image in the template if it is large in size. You will reach text like the one below:

  #main {
    width:485px;
    background:#fff url("corners_main_bot.jpg") no-repeat;
    margin:15px 0 0;
  }
  #main3 {
    background:url("rails_main.gif") repeat-y;
    padding:0;
    }

Now all you have to do is replace these image file names with the real location. So after search-n-replace, the new Blogspot template will looks something like below:

  #main {
    width:485px;
    background:#fff 
        url("http://blogger.com/corners_main_bot.jpg") no-repeat;
    margin:15px 0 0;
  }
  #main3 {
    background:url("http://google.com/rails_main.gif") repeat-y;
    padding:0;
    }

Once you finished replacing all the image file name, copy-paste the modified template back to the Blogger Template page and do a preview before saving the template. If the preview layout looks as expected, click save and republish everything.

Quick Tip: Try to include the height and width attributes when you include images in your blog posts. This decreases the rendering time since the browser gets the information beforehand.