How to Add Author's Profile Picture Below Post Title In Blogger

Adding author's profile image below post title or above post body is quiete professional in looks since your reader will see or know first who wrote such particular article in your blog.This tutorial will  not be applicable if your blog is run with multi authors but don't worry because I have a separate  tutorial on that topic.
You can see it above this post for the live demo.

Also Read:

How to Add Author's Profile Pic Beside Post Title
How To Add Author's Profile Picture Below Post In Blogger

Adding Author's Profile Image Just below Your Post Title

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML (back- up your template for your reference)
Step 2.  Find the code below by using the Control F of your keyboard.

Note: There are two occurrences of the code, please choose the second one.

<span class='post-author vcard'>

Step 3. Next to the code in step 2 is a set of codes which may look like the code below:

<b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>
                </a>
              </span>
            <b:else/>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <span itemprop='name'><data:post.author/></span>
              </span>
            </b:if>
        </b:if>
<span class='post-timestamp'>

        <b:if cond='data:top.showTimestamp'>

          <data:top.timestampLabel/>

        <b:if cond='data:post.url'>

          <meta expr:content='data:post.canonicalUrl' itemprop='url'/>

          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>

        </b:if>

        </b:if>

      </span>

We should remove the code above because that is responsible for line " Posted By" with the corresponding date of the post. You can see this line just below your post or article written. See the screenshot below.

Step 4.  After deleting the code above the next  thing is you are going to find the code below. Again choose the second occurrence of the code.

<div class='post-header-line-1'/>

Step 5. Just below it, paste the following code:

<span class='post-author vcard'>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.author == &quot;AuthorName&quot;'>
<span class='author'><a href='Author-Profile-URL'><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: -3px; margin-right: 1px; padding: 2px; height: 24px; width: 24px; border:1px solid #d0d0d0; '/></a></span>
</b:if></b:if>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span>

<span class='post-timestamp'>

        <b:if cond='data:top.showTimestamp'>

          <data:top.timestampLabel/>

        <b:if cond='data:post.url'>

          <meta expr:content='data:post.canonicalUrl' itemprop='url'/>

          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>

        </b:if>

        </b:if>

      </span>

Also Read:

How To Get Image link (URL) of the Uplaoded Image in Blogger

Customization:

1. Replace the Author Name with your own author name. This must your  Blogger Profile name. In my case 2. my author name  is Cerwenlloyd Gefjun.
3. Replace the image link (URL) with your image URL. Click here on how to get image url
4. And finally customize the css of your profile image:

         margin- I set it with bottom -3px, and right 1px
         padding- which set by 2px
        height- this your image size (24px)
        width- this is the image width  (24px)
        border size - increase in number will make your border bigger also
        border color- you choose another hexadecimal color here

Questions about the post above are always welcome. Please leave it at our comment box below.
Thanks pal for your time!
       
     

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