How to add "Author" widget to blogger blog below every post

You may see many more wordpress blog which contains "About Author" Widget under the every Posts Written by the author. From the title of this post you can understand that  today we will learn How to add "Author" widget to blogger blog. Lets start..

Steps:

• First of all, Log in to blogger account and Then go to Template..

• Now take a backup of your present template..

• And Now Choose "Edit HTML"Option....

• Now Check "Expand Widgets Templates" box..

• Now Search(Ctrl+F) for "/*SIDEBAR*/". If You get this Line then copy and paste the given code Just Above "*SIDEBAR*/ :

/*AUTHOR*/
.post-author{
margin: 0 auto;
padding: 10px;
min-height:70px;
background: #f9f9f9;
border:1px solid #fff;
font-size:13px;
font-family: Arial;
-moz-box-shadow:0px 0px 1px #d5d5d5;
-webkit-box-shadow:0px 0px 1px #d5d5d5;
box-shadow:0px 0px 1px #d5d5d5;}
.post-author h4{font-size: 15px; font-weight:bold;color:#999;text-shadow:1px 2px #fff;}
.author-avatar img{float:left; width: 60px;height:60px;margin: 0px 10px 0px 0px;padding: 8px;}

• See the ScreenShot: 

• Now Search(Ctrl+F) for This code:

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

• See the screenshot:

• If You get that code or Line just under this line Paste this Code:

<div class='post-author'>
<span class='author-avatar'><img src='Your-image-url'/></span>
<span class='author-descripsion'>
<h4>AUTHOR: Your-Name</h4>
<p>

Description
</p>
</span>
</div>

NB:

• Change Your-image-url with your own image url

• And Write here Your own name instead of: Your-Name

• And Add a small description about you instead of: Description

See the Srceenshot:

• Now click on save template and go to your blog and see whats happend...

That's all

Thanks for Visiting here.