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

Having a problem on how to add your (author) profile picture beside the line "Posted By"in your Blogger blog? You are not wrong in landing this page since I will tell you you the details on how to do that. Just follow the four steps below.Click here for the demo first.

Note:

This tutorial will not take effect if you uncheck your blog post to have a "Posted By". See the screenshot shot below to know what  I mean.

Adding Author's Profile Picture Below Post In Blogspot

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML (Back-up your Template)

Step 2. Find the code below using the Control F. Please select the second occurrence of that code.

<div class='post-footer-line post-footer-line-1'>

Step 3. After finding the code in step 2, please paste the code below just  after it.

<b:if cond="data:post.author == &quot;Cerwenlloyd Gefjun&quot;">
<span class="author"><a href="https://plus.google.com/110772451841046895789/about"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYAS7NywmEOZ-z_8YX5eAZraE7H-b-_dXf837BD3KuczrnzHUP3EFTrXPYOMJpi0Fctw_oJA8XQTB-Gm87iVibwX2jVi91fvvy-JTR5F9b2ph4JpXJdI3mVFGeCxOk9SUBZbRvNnHeQnE/s1600/cerwen+profile+pic.png" style="border: 1px solid #d0d0d0; height: 28px; margin-top: -12px; margin-bottom: 0px; margin-right: -13px; padding: 2px; width: 28px;" /></a></span>
</b:if>

Customization:

• Replace the red bold text with your own profile name. It must be the EXACT name of your profile name  as it appears in the Blogger profile.


• Replace the orange bold texts with your Google  plus profile ID.


• Replace the pink bold texts with your image URL. Click here for help in getting your  image link.


• And lastly adjust the css which is responsible of the appearance of picture.

         border size and color- increase in number will make your border bigger also.
         height- this your image size
        margin- I set it with top 10px, bottom 0, and right 13px
        padding- which set by 2px
        width- this is the image width

Step 4. Save your Template and you're done.
If you have some questions regarding this post , try to drop some comments at the comment box below.
Thanks for the your valauble time with us!