How to Add " About the Author " Box Below Every Blogger Post

Adding About the Author box below every blog post is fairly easy. It gives a professional look to the blog. You might have come across such widgets in WordPress blogs, but unfortunately there is non for blogger so we need to add some code in Edit HTML.

After working out this post you will end up something like this :

You might have noticed such " About the Author " section on many of the posts at BLoggingeHow. This isn't meant to give all the information about the authors, instead its totally based on few lines describing authors blogging activity. It can link to other pages as per need.

So lets jump in to learn this beautiful tweak for Blogger.

Step 1:

Go to Design >> Edit HTML
Tick the check box.

Step 2:

Search for the following code : (Press Ctrl + F)


Now just above this code add the following piece of code.

.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;

By adding this code, we defined the CSS layout for the " About the Author Area ".
Tip : ( Note CSS is always added in the <head> tag.)

Step 3:

Now this is the part where you need to customize you own " About the Author Area " according to your need. Edit the following code as you want.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='author-box'>

<p><img alt='' class='avatar avatar-70 photo' height='70' src='Your Photo Link' width='70'/><b>About the Author</b><br/>

<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Write Something About yourself<br/>

Follow Me on Twitter <a href=' Your Twitter Link '>Your Twitter link Anchor text</a>

<p style='margin:-8px 0'><br/><center>

<a href=' Your Blog link ' style='text-decoration:none;font-size:70%;'>Your Blog Name</a></center>



 Change the following things as you wish them to be displayed

  • Your Picture Link
  • About the Author text ( In my case its About Hassam Ahmad Awan )
  • Write Something About yourself
  • Your Twitter Link
  • Your Twitter link Anchor text
  • Your Blog Link
  • Your Blog Name

 Step 4:

Add the above code ( once you are done with editing ) below the following code :

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

Step 5:

Chill out ! You have unlocked an achievement



AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
BloggingeHow | Making Blogging Simpler: How to Add " About the Author " Box Below Every Blogger Post
How to Add " About the Author " Box Below Every Blogger Post
BloggingeHow | Making Blogging Simpler
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy