Blogger Dynamic Views tips and tricks: Adding an Image Next to Blogger Post Title in Dynamic View

Friday, November 2, 2012

Adding an Image Next to Blogger Post Title in Dynamic View

The title of this post is self-explanatory. By default, Blogger's post title is a plain text. In this tutorial, I'll show you how you can easily add an image next to your post title.

Step 1:

First thing first. Prepare an image. You need a direct link to an image before you proceed further. Click here if you're not sure how to get the direct link for your image. Also, make sure your image is sized appropriately. You don't want to see a huge image next to your post title.

Step 2:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Expand Widget Template

If you're using the new Blogger interface: Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template

Next, find and delete the following lines:

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <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>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

The code to be deleted:

Step 3:

Paste the following lines in place of the deleted line in Step 2:

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
    <table><tr>
     <td class='ssybyposttitle'>
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAz2tkrE5c2FnNBnjFDvz_5L9c5IX8TevnDrhG2UyoxN1XI1qupHupMrn_vAb50Gjr3b_yHJms2ULOCrTS1dYN87ReIIQTqCPtQMsImLOdFwZUvjf9kUq-P6XRC1UkUDDX5jI5V8ERZfg/s50/autobot.png'/></td>
     <td><h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <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>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
     </td>
    </tr></table>
     <style>
       h3.post-title {
       margin: 0px !important;
       }
     </style>
    </b:if>