Add "About the Author" Box Below Every Blogger Post

How to add About the Author Box below every Blogger Post?

Very easy process, just follow my steps given below:

STEP 1.

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

STEP 2.

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

]]></b:skin>

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

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/> <a href=’ Your Twitter Link ‘>Follow Me on Twitter</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> </p></div></p> </div> </b:if>

Change the following things as you wish them to be displayed

• Your Photo Link
• About the Author text (In my case it’s “About Ritesh“)
• Write Something About Yourself
• Your Twitter Link
• 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′/>

DONE!

Now check out at the last of every post, you will notice your Achievement. I hope you enjoyed. For any query or doubt, don’t hesitate to ask it in comment.