Add "About Author" box below every blog posts in Blogger | How to

This is a tutorial on adding a simple and clean About Author below every posts in Blogger that only appears on post pages. I am sure that all of us would have seen this feature mostly in WordPress blogs. But now, Blogger users can have this feature too. You may have a look at my latest Blogger template, Charisma where I’ve implemented this feature. Follow easy steps below to add it.

1. Go to Edit HTML page in Blogger and tick the “Expand Widget Templates” checkbox above the top right corner of the template code box.

2. Now find for the ]]></b:skin> code using CTRL+F and replace it with the code below.

/***** Author Box ********************/

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}

.author-box p {
margin: 0;
padding: 0;
}

.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}

]]></b:skin>

3. Then, search for <div class=’post-footer-line post-footer-line-1′>. Immediately after that, paste the code below.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div class=’author-box’>
<p><img alt=” class=’avatar avatar-70 photo’ height=’70’ src=’http://1.bp.blogspot.com/_b8IA1ajBJG8/TCNHNhq1KSI/AAAAAAAABME/W9v1xQsqxZc/avatar.png‘ width=’70’/><b>About Author</b><br/>
Write anything about you here!<br/></p>
</div>
</b:if>

4. Click “Save” and done.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>….</b:if> is to make sure that the box is only visible in post pages and won’t appear in Home Page. If you want to show your own image, just replace the default image source shown in green colour text in the code with your IMAGE URL.

8 Replies to “Add "About Author" box below every blog posts in Blogger | How to”

  1. Nice bro.. My blog ready About Author too.

    Btw, nice template from you and i posted in New Free Blogger Template Everyday

  2. Your link blog ready in blog with anchor name Intro Blogger. Please confirm to me if anchor name is wrong.

    (Sorry, just link not image)

  3. Hi Dhe Template,

    Thanks for adding my template to the gallery and giving me a link. =)… A text link is enough, dude.

    And your site's template is amazing…Are you the one who designed it?

  4. Hi Bro..

    Yupp.. im a blogger template makers too but original from Blogger Platform not convert from WP Theme (i can't bro. Would you teach me??)

    You can see some my blogger templates here

  5. @DheTemplate, yeah sure…Basically, I'm using default blogger templates and editing their CSS according to the WordPress theme that I convert.

    My latest theme (Modern Clix) is actually based on the Urban Elements template. I've converted Urban Elements into Modern Clix.

  6. yeh.. it was really a good addon for blog owners and thanks for providing the code.. indeed very useful tip..!

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.