How to Add Author's Profile Image Beside Every Post Title

Search Engine Optimization (SEO) is always the heart of   every blogging  career, no doubt that as a goal oriented one, you must have to maximize your blog to be visible in the Search Engine Results Page (SERP). One of the best things to work with is putting your profile photo beside  every post title, in that way the people that land to your pages will think that somebody (YOU) is working your blog and not through robots who work for you. Please take look with the screenshot of this post to have a glance for what we are going to achieve in this tutorial.

Adding Author's Image Before Post Title

Step 1. Choose a picture of yours and upload it via Blogger and get  the URL or the picture link You don't want to see a huge image next to your post title. Best sizes are 24 px by 24 px to 28 px by 28 px

Also read:
How to upload Image in Blogger and get the URL

Step 2. Go to Blogger Dashboard >> Template >> Edit HTML (back -up Template for your reference)
Step 3. Look for the  opening code below

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

until you reach these closing code below just a few lines from the code above

<data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

Step 4.  After you find that opening and closing code please  delete all the codes being enclosed on it including the opening and the closing code.
Here is the complete set of code to be deleted.

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

Step 5. Paste the following code in the place of the deleted code in Step 4.

 <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'><a href='http://www.bloggingtipsandtrix.blogspot.com' target='_blank'>
          <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYAS7NywmEOZ-z_8YX5eAZraE7H-b-_dXf837BD3KuczrnzHUP3EFTrXPYOMJpi0Fctw_oJA8XQTB-Gm87iVibwX2jVi91fvvy-JTR5F9b2ph4JpXJdI3mVFGeCxOk9SUBZbRvNnHeQnE/s1600/cerwen+profile+pic.png' style='margin-bottom: 0px; margin-right: 3px; padding: 2px; height: 28px; width: 28px; border:1px solid #d0d0d0; '/></a> </td>
        <td><h2 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>
      </h2>
        </td>
        </tr></table>
   
      <style>
        h2.post-title {
       
          margin-left: -10px !important;
        }
      </style>
<style>
        posttitle {
       
    border: 5px solid #000000;
        }
      </style>
 
    </b:if>

Step 6. Replace the orange highlighted text with your G+ link or any link like facebook fan page or to your blog's home page URL. This is the link when you click your image icon beside the post title.
Step 7. Replace the IMAGE-URL  highlighted text in pink color from above with the URL address of your image (the one that you've gotten from Step 1).
Step 8 . Save the Template and that's it! Enjoy :)

Also  Read:

• How to add guest poster profile photo below post title

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook