Blogger Introduces Wordpress Like Professional Author Profile Boxes

Recently after updating the comment features, blogger is still moving on. You have seen many sites and blogs hosted on wordpress having a author profile box just below where the post ends. It is auto generated box linked to the wordpress account profile. Blogger too has created such thing for it's users. Now you don't have to add it manually in all your sites hosted on blogger it will be automatic. All you have to do is activate this feature from the control panel of your blogger account.
Before working in blogger first you must know that The About Story Written In Google+ will be displayed under your Blogger Posts after activating this Author Profile feature. So if you wish to edit what is to be shown in your author's profile box in your blogger site then do edit the about story page of Google+

Open Blogger Dashboard → Layout

Now Check in the box of Show Author Profile Below Posts

Now open Template → Html Editor and search for following piece of code.

<div class='post-footer-line post-footer-line-1'/>
Or 
<div class='post-footer-line post-footer-line-2'/>
Or
<div class='post-footer-line post-footer-line-3'/>

Add the below code just after any one of it.

Xml

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img expr:src='data:post.authorPhoto.url' itemprop='image'/>
</b:if>
<div class='author_name'>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>
</b:if>

Now find the code ]]><b:skin> and add the below given code just above it.

Css

/* Author Profile */

.author-profile {
margin: 5% 0 0;
overflow: hidden;
padding: 2%;
border: 1px solid #ddd;
font-size: 14px;
}

.author-profile img {
border: 1px solid #bbb;
float: left;
margin-right: 1.5%;
width: 85px;
}

.author_name {
font-size: 18px !important;
font-family: arial, verdana, sans-serif;
font-weight: bold;
margin: 0 0 2px;
display: list-item;
overflow: hidden;
}

Final Words

Well this widget is quite simpler in working but to add some special look we have done a little bit of customizations using Css and division classes. If you liked what we do then share your voice with us. We are eager to hear you.