03 January 2011

Add author information box below post to Blogger blog.


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;'/>


That's it.

Just edit the enformation from Step 2 code.

Related Posts


March 1, 2012 at 8:20 AM

I done but it do not show my blog please see my blog and give me some suggestion. http://hdmoviewallpaper.blogspot.com/

March 2, 2012 at 2:46 AM

It is working , check here


Post a Comment


Twitter Delicious Facebook Digg Stumbleupon Favorites More