Modifying Images in Blogger CSS Templates

Erika Smith from the Wedding Blogsent 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. 

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

How to expand or change the width of header of  blogger or blogspot