2 ways to add image beside blogger post title

View demo.


There are two ways to insert an image next post titles on blogger. One is using CSS and the other, through "Expand Widget Templates" mode. Before doing the coding and the actual adding of the image next to the title, check out these simple guidelines.

Guidelines.

1. It is advised to save the picture in transparent PNG or GIF format to retain transparency especially for non-white backgrounds. Observe the difference. The "Test Post" on the right shows a transparent image.

2. Upload your image to a free image hosting site like PICASA WEB or PHOTOBUCKET. Get the link.

3. Back up your template! If unsure how to go about this, check this tutorials:
How to Back up your Blogger blog - Classic Template
How to Back up your Blogger blog - New Template

Technique #1. Insert Image Using CSS.

1. Open EDIT HTML page.
2. Press CTRL + F. On the search bar, type in .post-title.
3. Once you see a style declaration similar to this,

h3.post-title  {
font: $(post.title.font);
margin: .75em 0 0;
font-weight: bold;
}

    Add in the highlighted lines:

h3.post-title  {
  font: $(post.title.font);
  margin: .75em 0 0;
  background-image: url(yourimageURL.png);
  background-repeat: no-repeat;
  padding:0 0 4px 50px;
  font-weight: bold;
}

    What it means.
    -background-image:url refers to the URL of your uploaded image
    -background-repeat: no-repeat means the image will not be repeated
    -padding: 0 0 4px 50px is the space between the element border (0px for
     top padding, 0px for right, 4px for bottom and 50px for left padding)

To learn more about CSS styles, visit W3Schools. You can also check Trick for New Blogger's post for better understanding on how to set paddings on images.

4. Save template.

Technique #2. Insert Image Through "Expand Widget Templates" Mode.

1. Open EDIT HTML page.
2. Press CTRL + F. On the search bar, type in  

<a expr:href='data:post.url'><data:post.title/></a>

3. Once you see a similar code like this,

<b:if cond='data:post.url'>
      <b:if cond='data:blog.url != data:post.url'>
           <a expr:href='data:post.url'>
           <data:post.title/></a>
      <b:else/>
      <data:post.title/>
</b:if>

    Add in the highlighted lines:

<b:if cond='data:post.url'>
     <b:if cond='data:blog.url != data:post.url'>
          <a expr:href="data:post.url" href="">
          <img src='yourimageURL.png' style='border: 0'/>
          <data:post.title></a> 
     <b:else/>
     <data:post.title/>
</b:if>

        -'yourimageURL.png' refers to the URL of your uploaded image

4. Save template.

Related Blog.

Image beside Blog Post Title