Blogger tricks, Tutorials, Blogging tips

for Creating a Better Blog


Adding Author Profile Picture In Blogger Post is really easy. If you have a Blog with multiple authors and want to show different profile pic for each author then you came at right place. Because in this post I am going explain a few easy steps that can be really helpful for you. So what you have to do for adding a stylish author avatar In Blogger Post is just follow the below steps. You may like to read: How To Add A Signature To Blogger Post.      
Easy Steps To Add Author Profile Picture In Blogger Posts




Add Author Profile Picture In Blogger Post

  1. Go to the Blogger.com and log in your account.
  2. From your blogs list select your Blog where you wanna Add Author Profile Picture.
  3. Now click on the theme tab from your Blog dashboard.
  4. From the next page click on Edit HTML Button.
  5. Now you will see your template code click anywhere on the code and search the following line by pressing CTRL+F.
<span class='post-author vcard'>

After finding the above line paste the following code right after that line.


<b:if cond='data:post.author == &quot;Author Name&quot;'>
<span class='author'><a href='Author-Profile-URL'><img src='Author-Image-URL'/></a></span>
</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>

Customization: In the above code you can see some colorful text that you have to change. Author Name Replace it to the exact Author name that is displaying in posts and comments.

Author-Profile-URL  Replace it with the Profile link of an author.
Author-Image-URL  This is the last text that you have to replace in this code. So Replace it with the Author Profile Picture URL. That's it.
For adding multiple authors pictures just add the code again and change the information that is highlighted with colors.

That's it thanks for reading our post on How To Add Author Profile Picture In Blogger Post. And keep visiting for more useful Blogger Tricks, Blogger widgets, Blogger Template and much more. If you have any question about this post feel free to ask me by dropping your comment below.


No comments:

Post a Comment