Hello my blogger friends, I have seen so many times when I crawl on the blogs/sites, that there is a About The Author Box under every post which shows some description and social links of the author of the article. Unfortunately blogger doest gives us this option by default .
Dont worry guys I m gonna share a beautiful hack with you which will allow you to add a fully customizable About The Author Box below your every post .
So the tutorial for How To Add About The Author Box Below Every PostGoes Here
Implementation steps….
1.Go to Your Blogger DashBoard->click Design -> Edit Html (Backup First)
2.Now Press Ctrl+F and Find the following code
]]></b:skin>

3.Now copy the below code and paste Just above the previously finded code
(above/Before  ]]></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;
}

Tip: You can edit this code this is the box code,try to understand ,modify according your need.If unable to edit ,comment below your problem i’ll try to sort it out.
4. Preview it, error free , save Template.

To Put the box under Every Post follow step 5.

5. Now again goto Edit Html and check expand widget box
Search for the following code

<data:post.body/> 

6. Paste the following code after <data:post.body/> 

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div class=”author_info”>
<div class=”author_photo”>
<img alt=”author” src=”The Image Link Goes Here” /></div>
<h3>
About the Author</h3>
This article is written by: Description about the author.</div><span style=”font-size:75%;”><a href=”http://step2problogging.blogspot.com/2011/07/how-to-add-about-author-box-below-every.html” target=”_blank”>Get This Box</a></span></div>
</b:if>

Replace the RED text with yours.
thats all….preview, and save it….. If you want to put the box on particular posts.

Paste the code given in step 6 in the EDdit HTML of your post editor section.

Having any problem in implementing tell me in your comments, I’ll try to sort out…. Dont forget to follow and like us

Share:

administrator

I am a full stack software engineer and a blogger. Primarily, I work on Python, Java and React.js. I am an autodidact with a strong passion for new technologies. I love to build new things from the ground up. I have about 7 years of dynamic experience gained by working in early stage startups to mid-sized organizations in an Agile environment.

2 Comments

  • Ivin, July 5, 2011 @ 4:50 pm Reply

    Hello Abhi. I don't like blogger myself, but I would definitely appreciate it to have this tutorial to make them look or become more professional. I'm sure blogger bloggers will greatly appreciate it. 🙂

  • Abhi Balani, July 6, 2011 @ 5:58 am Reply

    @Ivin : thanks a lot for appreciation.I made this blog just for new bloggers to have professional looks to their blog,pro widgets and pro hacks….
    Thanks for your comments..

Leave a Reply

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

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