How to Enable Author Bio Box in Blogger? Step By Step

If you do blogging and if you are sharing article on your blog, then you should add your name photo and your details in every post of your blog. So that visitors can recognize you and know who is the author with the help bio box in your blog.

Today in this post “How to Enable Author Bio Box in Blogger? Step By Step”, I am going to tell you about how to add the author bio box to every post of your blog.

Why you should add Author Bio Box in your Blogger Blog?

 

If you want your readers/visitors to recognize you and let them know that they are active on whose website or blog, this will also give your name and it will be easy for people to remember your website.

There are many advantages to enable the author bio box in the blog so let’s us now know, how to add author bio box in your blog?

If you haven’t yet made your free blog check this out, How to Make a Free Blog and Website? Step by Step Guide

How to add author box to all blogger posts?

Step 1:

First go to your blog’s dashboard >> Layout.

1. Select layout.
2. Click Edit on the blog posts widget.
3. Now a new popup window will open in which you have to tick on show author profile.

Step 2:

Now a new page will open, tick it in front of the show author

profile.

1. Click on Save and click on Save Template.

Step 3:

1. Now go to the dashboard of your blog.
2. Click Template >> EDIT HTML.
3. Now click anywhere in the code box and press [Ctrl + F] button. ]]> </b: skin> search.
4. ]]> </ b: skin> over here copy & paste below code instead.

 

/* css Author Box start by https://www.helfindia.com */
.articleAuthor{overflow:hidden;margin-bottom:10px}
.authorContent{overflow:hidden;background:#f1f1f1;padding:0;margin:1px;margin-bottom:0;border-top:2px solid #e9e9e9;}
.authorLeft{overflow:hidden;float:left;margin-right:10px;}
.authorLeft .authorAvatar{overflow:hidden;}
.authorLeft .authorAvatar img{background:#f1f1f1;display:inline-block;}
.authorDetails{overflow:hidden;margin:14px 0 0 0;}
.authorDetails h2{font-size:12px;color:#222;font-weight:400;text-transform:uppercase;}
.authorDetails h2 a{color:#4db2ec;background:#f1f1f1;padding:4px 8px;display:inline-block;font-size:15px;margin-left:5px;border:double #f1f1f1;}
.authorDetails h2 a:hover{color:#71c5f6;background:#f1f1f1;}
.authorDetails span{display:block;padding-top:3px}
.articleAuthor .authorContent p{color:#222;line-height:20px;margin:0 10px;font-size:15px;}
/* css Author Box start by https://www.helfindia.com */

You can change the color of your choice instead of Background: #f1f1f1.

Step 4:

1. Now search this code <data: post.body />.
2. <data: post.body />, below this code paste below given code.

<div class='articleAuthor'>
<div class='authorContent'>
<div class='authorLeft'>
<div class='authorAvatar'>
<img alt='' class='avatar avatar-120 photo dontshowit showit' height='120' src='https://3.bp.blogspot.com/-N2mOOAsAbMI/Vdxr_5yH76I/AAAAAAAABbU/eMdnoOf6DrU/s1600/jume%2Bdeen%2Bkhan.png' width='120'/>
</div>
</div>
<div class='authorDetails'>
<h2>
About Author<a href='https://https://www.helfindia.com' rel='author' title='Admin'>your name</a></h2>
</div>
about you
</div>
</div>

1. Paste the link to your photo instead of the link facing the src.
2. ” helfindia.com”instead our website URL, enter the URL of your website.
3. Write your details in place of about us.
4. After setting the code, click on Save Template.

 

How to find the link of your photo?

 

1. Go to the option to write a new post and upload your photo in the post.
2. Now click on HTML from the Compose / HTML option.
3. Now there will be 2 types of links in coding href and src you have to use the link in front of src.

 

Note:- The <data: post.body /> code is in many places in the template

of the blog, if the trick does not work, then check it again by pasting the code

below <data: post.body />.

Now once you done, open a post on your blog and check the result, if you are having any problem somewhere, then you can ask your problem in the comment section below, I will be happy to assist you.

Also read our other post:

• How to Remove “Powered By Blogger” attribution? – Step By Step
• How to add Category Widget in Blogger? Step by Step Guide
• Easily Add or Change Favicon Icon of Blogger – Step By Step

I hope with the help of my post “How to Enable Author Bio Box in Blogger? Step By Step” you can now enable author bio box, if yes, then do share this post on social media, so somehow it will be helpful to someone.