In blogs where there is more than one author, some distinction often becomes necessary. A good way of achieving this is by displaying each author’s personal image right next to his or her post title.
This is what I will explain in this post. Though this effect can be done with JavaScript (as explained -in Spanish- in El Escaparate), it can also be done just by adding Blogger conditional tags.
Installation
From our Template Editor (Layout, Edit HTML) in our Blogger Dashboards, we must look for the following code:
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
And immediately after the line in red, add the following lines:
<b:if cond='data:post.author == "Author1_Username"'> <span class="author"><img src="Image1_URL"/></span> </b:if> <b:if cond='data:post.author == "Author2_Username"'> <span class="author"><img src="Image2_URL"/></span> </b:if>
(You can repeat this code and keep modifying it, in case your blog has more than two blog authors.)
This code is case sensitive. So, Fernando is not the same as fernando or FERNANDO. The username we have to insert in the code above must match exactly the one displayed in our Blogger Profile. Also, the ideal image size is around the 30×30 – 50×50 pixels.
Customization
In order to style the image, we need to copy and customize the following code, right before ]]</b:skin>:
.author img {
padding: 0;
float: left;
border: none; /*We may add some border to the images.*/
margin: 0 10px 10px 0;
}
The float property, as well as the margin, might change according to where we want the images to be displayed.
Demo
You can take a look at the result right here.