Add author information box below post to Blogger

Posted by: I Give U | Date: Thursday, January 26, 2012 | Category: | 0 comments

Author information box is now present on most of the wordpress blogs. It gives the info about the author and also contact info about him/her. It also makes your blog more attractive too.

Adding Author Information box:
Step 1
Go to Blogger dashboard > Design > Edit HTML. Click on expand widgets template.

Look for ]]></b:skin>

Add following code just above ]]></b:skin>
.author_info {
float: right;
width: 573px;
padding: 10px;
border: 1px solid #e0e0e0;
margin-bottom: 15px;
margin-top: 15px;
background: #eee;
}
.author_info h3 {
margin-bottom: 10px;
}
.author_photo {
float: left;
margin: 0 0 0 10px;
}
.author_photo img {
margin-right: 10px;
border: 1px solid #e0e0e0;
}

Step 2
Now look for footer-line-1
It will get <div class='post-footer-line post-footer-line-1'>
Now add following code BELOW it. 


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='http://3.bp.blogspot.com/_tbHfaj1A058/TSGc3fOc-NI/AAAAAAAAL7A/GU6dmnqINik/s1600/images.jpeg'/></div>
<h3>About the Author</h3> This article is written by: <a href='http://www.blogger.com/profile/00631616038549111257'><b>YourName</b></a> - who has already written <b>30</b> articles for <a href='http://medimania.blogspot.com/'>Medi Mania</a> YourName is a professional web designer. Catch him on <a href='http://twitter.com/yourID'>Twitter</a>, <a href='Your Facebook URL'>Facebook</a> or <a href='your e mail ID'>email</a> him <br> </br> <br> </br>
YourName&#39;s <a href='your web url'>Website</a><br style='clear:both;'/>

</div>
</b:if>

That's it.

Just edit the enformation from Step 2 code

For thank to this post Click here!


Respected Readers:
We have published many useful posts a week with our try hard. To help us go ahead with the same spirit, a small contribution from your side will highly be appreciated. Many thanks