Customizing your Blogger Template

August 31, 2006 - Alternative Forms

Customizing Your Blogger Template

Adding an image to your header

1. In Photoshop, create an image with a title for your Blog. A good width is 600px; a good height is anywhere between 150 and 300px.

2. Go to Layer→Flatten image. Then go to File→Save for Web. Here, choose your format (GIF or JPG) and settings, paying attention to the size of your file in the bottom left hand corner. Try to keep it 30K or smaller. Save the file.

3. Now, upload the file to Blogger, who will host it for us. In Blogger, go to the “Posting” tab, and select the “Upload image” button. Choose the file under “Add image from your computer” and click OK. Blogger will tell you when it’s done.

4. Instead of publishing your post, click on the “Edit HTML” tab. You’ll see the code for your post, including the URL for the photo you just uploaded. Highlight and copy this URL. Save your post as a draft for future reference.

5. Go back to your Template. Scroll down until you see code that looks like this:

<$BlogTitle$>

</h1>

Now replace <$BlogTitle$> with the following code:

So your code will look like this:

You can also choose to delete your blog description by deleting all the code from </hl> to </p> in the example above.

6. Hit “Preview” to make sure everything seems to be working OK.

7. Save your template settings and republish your blog. Voila! Your image is there. You may need to change your image size or do some other tweaking to make it work perfectly, but these are the basic steps.

Adding a tiling background to your blog

1. Find or create an image you want to use as a background, and save it for the web as a GIF or JPG.

2. You can either use the image as a tile as-is, which will repeat across the entire background of your page, or you can create a tile that will run down the left and right margins of your blog, leaving the middle part white.

To do this, create an image in Photoshop that is 982px wide and as high as the image you want to tile. Place your image on the far left and right

sides of your image, leaving the middle part white. It will look something like this:

This new image becomes the tile that will serve as the background on your blog.

Upload this image to Blogger as described in the section above and copy the URL.

Now, go back into your Template and look for this code near the top:

body {

background:#fff

On the line directly after this, insert this code:

url(http://YOURIMAGEURLHERE) repeat-y;

(The “-y” indicates that you want the tile to repeat down, but not across the web page)

5. Preview your work, and then save your template settings and republish. Voila! A swanky new background.