Add dynamic avatar after post title in blogger

Are you bored with "Posted by author" text.Here is the sexy way to show a post author name with specific avatar.its really very easy can be done with css and html.lets do that.

STEP 1. UPLOAD YOUR AVATAR

1. Select  your awesome avatar upload it.I used 50x50px image.u can use smaller than that.but  not very  big image.
2.Get the direct link of your image.

STEP 2.PLACE THE HTML

1.You have to add a html code into your template. i use new template system and blogger watermark template.
it can be used in other template as well(i hope so).
2.Login your blogger a/c.go to template>edit html>proceed.
3.Find below code.

<h3 class='post-title entry-title' itemprop='name'>

4.Just add below code before  <h3 class='post-title entry-title' itemprop='name'.  You will find this code twice.You just have to add below code twice and  test which one works.then delete the other one.

<b:if cond='data:post.author == &quot;YOUR AUTHOR NAME HERE&quot;'>
<div class='avter'><img alt='autobot' height='50px' src='IMAGE LINK HERE' width='50px'/><h1 class='author'><a href='Author link'>AUTHOR NAME HEREt</a></h1></div>
          </b:if>

5.Click on save template.

 UNDERSTANDING THE CODE

1.The code is very simple basic HTML code.a div that contain img and h1 tag.
2.The code checks who is the author of the post.and adds the html code  after that.
3.if you have multiple author in your blog you have to repeat  the whole code over and over again
for example if you have 2 author in your blog you have to add this code

<b:if cond='data:post.author == &quot;YOUR AUTHOR NAME HERE&quot;'>

<div class='avter'><img alt='autobot' height='50px' src='IMAGE LINK HERE' width='50px'/><h1 class='author'><a href='Author link'>AUTHOR NAME HERE</a></h1></div>

</b:if>

 <b:if cond='data:post.author == &quot;YOUR GUEST AUTHOR NAME HERE&quot;'>

<div class='avter'><img alt='autobot' height='50px' src='IMAGE LINK HERE' width='50px'/><h1 class='author'><a href='Author link'>GUEST AUTHOR NAME HEREt</a></h1></div>
          </b:if>

 4.One thing u must remember post author name and author name here <b:if cond='data:post.author == &quot;YOUR AUTHOR NAME HERE&quot;'> must be same otherwise code wont work.you should copy the author name from your post page.As shown in the image.

 Here is the example.Below code checks if the post is by sambit sengupta or not if yes it adds the html code after that otherwise not.

<b:if cond='data:post.author == &quot;sambit sengupta&quot;'><div class='avter'><img alt='autobot' height='50px' src='IMAGE LINK HERE' width='50px'/><h1 class='author'><a href='Author link'>Sambit</a></h1></div></b:if>

Step 4. Add some CSS

1.Adding CSS is simple on new template system.
2.go to Customize > Advance >Add CSS
3.Add this code

div.avter{
float:right;
height:50px; /*SIZE OF DIV*/
width:50px; /*SIZE OF DIV*/
padding-right:2px;
}
div.avter img{
float:right;
height:50px;/*SIZE OF IMAGE*/
width:50px;/*SIZE OF IMAGE*/
border-radius:5px 5px 0px 0px;
border:5px solid #D54937; /*BORDER AND ITS COLOR YOU CAN CHANGE THE HEX CODE*/
}
h1.author{
font-size:12px; /*AUTHOR NAME FONT SIZE U CAN CHANGE IT*/
height:20px;
width:60px;
float:right;
background-color:#D54937;/*BACKGROUND COLOR OF H1 TAG U CAN CHANGE IT*/
text-align:center;
border-radius:0px 0px 5px 5px;

}
h1.author a{
color: #fff;/*LINK COLOR*/
}

4. you can add a  h1.author a:hover rule if you want.

You are done.if you are facing any problem let me know.Dont forget to share this tutorial.