This tutorial will show you how to add an image next to your sidebar and post titles:
This is what a Post Title Image looks like:
Follow these steps:
- Create the graphic that you want to use. It must be no larger than 20 pixels by 20 pixels saved as a .png file.
- Upload it to a graphics host such as Photobucket or Imageshack.
- Log into your Blogger account.
- From your dashboard, click “Template”
- Click “Edit Html” and then “Proceed”
- Back up your template if you haven’t done so already.
- Do a search (Ctrl + F) for “h2”
- You are looking for a code that looks like this:
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;}
Replace the entire code above with the code below:
h2 {
background-image: url(INSERT DIRECT LINKE HERE);
background-repeat:no-repeat;
border: 0px double #FFFFFF;
margin-bottom: 5px;
padding: 2px 3px 2px 28px;
font:$headerfont;
font-weight: bold;
line-height: 2.0em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
Now you will insert your url into the space that says INSERT DIRECT LINK HERE. Preview and save!
I just tried the steps but first couldn’t find the “edit html” so I went to template but still couldn’t find it even after doing the CTRL-F search and looking through all 17 that it found. I found the 17 “H2″s but not the code after. Is there another way it could be written that I am not seeing?
HI LaDonna, thanks for the comment! Blogger has changed a few things so I updated the tutorial. You should be able to add an image to your post titles and sidebar titles. Hopefully it is easier for you now:) Let me know how it turns out. –Becky