Customize the author's name by image

Line "Posted by" one of the indispensable components of the article shows the author of the article, you can customize them according to your liking, such as putting them in position on the right under threads or in the articles, you can also use the images for this component.

Step 1:  Access to the Blogger Dashboard > Layout > Edit HTML
- Click the check box Expand Widget Templates

Step 2:  Find the code displays "Posted by"

<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

The code <data:post.author/> in the code found in step 2 is the code displays the author's name. You can:

* Replace the author by images: You change replace the code <data:post.author/> by this code below:

<a href="URL OF YOUR BLOG "><img src="URL OF YOUR PICTURE" /></a>

* Add images to before or after the author's name:

Add this code:

<a href="URL OF YOUR BLOG "><img src="URL OF YOUR PICTURE" /></a>

before or after the code <data:post.author/> to display the image before or after the author's name.