Dropping in the Image

Now that you have an image you can use in your blog and a URL that points to it on the Net, it's time to place it on the template somewhere interesting. This example places it in the sidebar shown previously in Figure 13.6.

In the Blogger.com template, the sidebar is shown clearly in the HTML section by this code:

<!-- Begin #sidebar --> <div >     <!-- Begin #profile-container -->    <$BlogMemberProfile$>   <!-- End #profile -->     <!-- Begin .box --> ...

But we have to modify the CSS part of this template to add our image because the background for the sidebar is a design element. You can't simply drop in an <img src=> statement in the body of the HTML. Rather, you need to find the sidebar CSS between the <style> </style> tags near the top of the template page. Search for something that indicates the styles for the sidebar on your blog. In this case:

/* Sidebar Boxes --------------------------------------- */ .box {   background:#fff url("http://www.blogblog.com/rounders/corners_side_top.gif")       no-repeat left top;   margin:0 0 15px;   padding:10px 0 0;   color:#666;   } .box2 {   background:url("http://www.blogblog.com/rounders/ corners_side_bot.gif") no-repeat left bottom;   padding:0 13px 8px;   } .sidebar-title {   margin:0;   padding:0 0 .2em;   border-bottom:1px dotted #9b9;   font-size:115%;   line-height:1.5em;   color:#333; ...

The .box item in the template is a class, which is a CSS attribute you can use to group together items on an HTML page that use the same design. You can read more about CSS classes and how to work with them at

http://en.wikipedia.org/wiki/Cascading_Style_Sheets

Right now we just want to change some graphics, specifically the background graphic. See the line below .box that says

  background:#fff url("http://www.blogblog.com/rounders/corners_side_top.gif")  no-repeat left top;

Note

The background property in this example points to a graphic that draws rounded corners around the sidebar. You can replace this graphic with your background graphic, but it's a little sloppy. Regardless, let's try it in this exercise so that you can see what's possible. Later you can download the rounded corners, add them to your image, and then upload the combined image to fix any problems.

Replace the current URL in the background property with your new URL. Highlight this URL; then press Ctrl+V (+V on the Mac) to paste your new URL address. In the example, the new background would look like the following:

  background:#fff url("http://www.geocities.com/pkuhns/sunflower_lightened.gif")  no-repeat left top;

Copy the entire template in your text editor and paste it into the Template web page from your blog host. Preview the change. You should see something like Figure 13.12.

Figure 13.12. A background for your blog roll and blog history sidebar!

Success! You are on your way to modifying your blog. You can experiment with uploading graphics or changing colors for other parts of your blog.