How to add an image next to your sidebar and post titles(Updated Dec. 2012)

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:

  1. Create the graphic that you want to use. It must be no larger than 20 pixels by 20 pixels saved as a .png  file.
  2. Upload it to a graphics host such as Photobucket or Imageshack.
  3. Log into your Blogger account.
  4. From your dashboard, click “Template”
  5. Click “Edit Html” and then “Proceed”
  6. Back up your template if you haven’t done so already.
  7. Do a search (Ctrl + F) for “h2″
  8. 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!

 

                                                                                                                                  

2 Comments

  1. 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

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>