How To Add Together An Picture Adjacent To Blogger Transportation Title

It has ofttimes been said that a film says a thou words, thus inwards the combat for the reader's attention, nosotros tin add together a film or icon side past times side to the postal service titles, equally I bring added on the left of the postal service championship - run into the screenshot below.

Show Image Icon earlier Blogger Post Title

Step 1. First affair you lot bring to produce is to railroad train an image. After that, you'll quest a straight link to the picture earlier you lot continue further. You tin upload it to tinypic.com together with thus re-create the URL located inwards the Direct Link for Layouts box. Also, brand certain your picture is sized appropriately. You don't desire to run into a huge picture side past times side to your postal service title.

Step 2. Go to Dashboard, "Template" together with click the "Edit HTML" button.

Step 3. Click anywhere within the code surface area to honour (using CTRL + F) the next code:

<b:includable id='post' var='post'>

Step 4. After you lot constitute it, click on the left arrow side past times side to it to expand the HTML code

Step 5. Then delete it until you lot run into <div class='post-header'>

              <b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <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 that needs to live on deleted:

Step 6. Paste the next code instead of the deleted code from pace 5:

<b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <table><tr>
        <td class='posttitle'>
           <img src='IMAGE-URL'/></td>
        <td><h3 class='post-title entry-title' itemprop='name'>
      <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>

Step 7. Replace the IMAGE-URL text from inwards a higher identify alongside the URL of your picture (the i that you've gotten from Step 1).

Step 8. Save the Template together with this is how you lot tin add together an picture side past times side to the Blogger Post title. Enjoy!

Share this post