Add Author Information Box in Blogger

Make your blog more attractive by adding Author information widget as you must have seen below each post on wordpress blogs, but actually its not much seen in blogger. So, get raedy for the tutorial.

To add this widget follow some simple steps:

Go to your blogger account.
Navigate to : Dashboard >> Layout >> Edit html

And find the following code

]]>

And immediately ABOVE/BEFORE it, paste this code:
.author-box { background:#eee; border:1px solid #DDDDDD; padding:20px; margin-bottom:30px;}
.author-box img.avatar {float:left; border:1px solid #ccc; padding:3px; margin:1px 10px 0 0;}
.author-box .author-name {padding-bottom:0px; font-style:italic; font-weight:bold; font-size:17px; color:#00000;}
.author-box .author-description {font-family:verdana, arial, helvetica; font-size:11px; line-height:16px; color:#666666;}
.author-box .author-links {margin:14px 0 2px; font-family:Verdana, arial, helvetica; text-transform:uppercase; font-size:11px; border-top:1px dashed #ccc; padding-top:14px;}


Next  Find code of HTML below:

<div class='post-footer-line post-footer-line-1'>


OR


<p class='post-footer-line post-footer-line-1'>


And immediately BELOW/AFTER it, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<img alt='' class='avatar avatar-59 photo' height='59' src='http://www.gravatar.com/avatar/6448ba2a746d8ba641acbdf76293e998?s=80&d=http://www.gravatar.com/avatar/6448ba2a746d8ba641acbdf76293e998.png%3Fs%3D59&r=G' width='59'/><div class='author-name'>About Author</div><!--author-name-->
<div class='author-description'>YOUR DESCRIPTION.
Catch on <strong><a href='http://www.facebook.com' title='Facebook'>Facebook</a></strong> and<strong><a href='http://twitter.com/' title='Twitter'>Twitter</a>.</strong></div><!--author-description-->
<div class='author-links'>
<center>Visit <a href='http://www.esoftload.info/'>Website</a>.</center></div><!--author-links-->
</div><!--author-box-->
</b:if>


Edit the above HTML codes

-Replace http://www.gravatar.com/avatar/6448ba2a746d8ba641acbdf76293e998 with your gravatar hash id.
- Replace http://www.gravatar.com/avatar/6448ba2a746d8ba641acbdf76293e998.png With your gravatar image.
-Write your description in place of  “YOUR DESCRIPTION”.

Click Save and your are done.