Complete Guide To Add Author Bio Box/Widget In Blogger (With Pictures)

You might have seen that many bloggers are showing their profile at the end of the post and that thing is called author bio widget. Configuring this was very difficult long back, but recently blogger made some fantastic updates and this is one of them. So now if you are using the default blogger template then you just have to click on the checkbox to enable author bio widget in blogger.

The one who doesn't use default blogger templates, have to make some changes in template portion. Don't worry SolveMyHow is one of them and in this tutorial, I'll cover both the parts i.e default and custom.

First I'll go with default blogger template. So, just follow the simple steps mentioned below to configure author bio widget,

Add Author Bio Widget In Default Blogger Templates:

Ofcourse there are many other ways to do this task, but we will go with the simple one. So, just follow the steps mentioned below,

Step 1 :- Login into blogger account.
Go to blogger and simply login into it.

Step 2 :- Go to layout >> edit body widget.
In layout section, look for "body post" section and click on "edit".

Step 3 :- Now a new window will be pop up.
In that just find "show author profile below post" check box and just click on it or enable it.

That's it you're done and now you will see author bio widget below each and every post. Wasn't it was simple ?

Must Read :-

• How to Prevent Blogger Blog from Redirection to Country Specific URL To Increase Traffic
• 30 Companies/Websites Providing Free Domain
• How to Setup Custom Domain in Blogger

Alright now lets configure the same thing for bloggers who are using custom templates.

Add Author Bio Widget In Custom Blogger Templates:

In this also you have to enable the "show author profile below post" checkbox. So, just follow the steps mentioned below,

Step 1 :- Repeat the above 3 steps.

Step 2 :- Go to template >> Edit HTML.

PS. don't forget to take backup of your blogger template before editing.

Step 3 :- Find "<div class='post-footer-line post-footer-line-3'>" in your blogger template.
Simply press CTRL + F and copy and paste the above mentioned code.

Step 4 :- Now paste the below mentioned code.
Simply press 2-3 enters and copy and paste the code mentioned below.

<!-- SolveMyHow.com Author Box Code --> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.authorAboutMe'> <div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <b:if cond='data:post.authorPhoto.url'> <img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/> </b:if> <div> <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'> <span itemprop='name'><data:post.author/></span> </a> </div> <span itemprop='description'><data:post.authorAboutMe/></span> </div> </b:if> </b:if> <!-- SolveMyHow.com Author Box Code Ends -->  
  

Step 5 :- Click on save.

That's it. Just open your any of the blog post and check it. You will find author bio widget at the end of every post.

Must Read :-

• How To Create blogger Sitemap For Blogs
• How To Submit Blogger Sitemap To Google Webmaster Tools
• How To Submit Blogger Sitemap To Bing and Yahoo

FAQs:

Q) How does it works and what if we wanted to change the description ?
Well it works very simple. It just fetched your Google Plus profile description and if your wanted to change it, you just need to change your Google+ description.

How To Edit Blogger Author Profile ?

As you saw we just clicked on the check box and our profile is started appearing. This is nothing but our Google+ profile. So lets see how to edit it,

Step 1 :- Go to google plus.
Login into your account and go to your profile.

Step 2 :- Click on "about" tab.

Step 3 :- In story section click on edit.
In store section you will find one "introduction" part, which is fetched by blogger so in order to change the author profile in default blogger author box, click on edit and change it. So, it be be automatically updated in your blog posts.

Must Read :-

• How To Get Unlimited Google Plus Followers (With Pictures)
• How To Get Unlimited Google Plus 1 Votes On Any G+ Post

How To Write Own Author Profile In Blogger ?

Well if you are not satisfied with the above method and want different description for blogger then Google+. So to do that follow the steps mentioned below,

Step 1 :- Go to Template >> Edit HTML

Step 2 :- Find " ]]></b:skin> ".
Now just copy and paste the above code " ]]></b:skin> " in your template.

.tbs-author-box { background: #F7F7F7; margin: 20px 0 40px 0; padding: 10px; border: 1px solid #E6E6E6; overflow: auto; } .tbs-author-box p { margin: 0; padding: 0; } .tbs-author-box img { background: #FFFFFF; float: left; margin: 0 10px 0 0; padding: 4px; border: 1px solid #E6E6E6; }

 

Step 3 :- Press CTRL + F and find <data:post.body/>.

Step 4 :- Copy and paste the code mentioned below.

<!-- SolveMyHow.com Author Bio Code --> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.author == "Piyush Golani"'> <div class='tbs-author-box'> <p> <img alt='' class='avatar avatar-60 photo' height='100' src='https://lh3.googleusercontent.com/- WIYwFPzSQyY/VaKEi_z3oQI/AAAAAAAAC4c/Z1LnXpPYggI/w105-h140-p/Piyush1.jpg' width='110'/><b>The Man Behind SolveMyHow</b><br/> Piyush Golani is the owner of SolveMyHow.com and a young internetpreneur from Ahmedabad, India. He made SolveMyHow with one goal i.e solving people's how globally. He loves to read & write about Blogging, WordPress, SEO and Making Money online. Apart from blogging, he's also computer science student. <br/></p> </div> </b:if> </b:if> <!-- SolveMyHow.com Author Bio Code Ends -->  

Replace my name, image URL and description with yours.

PS. it may happen that you may find multiple instance of <data:post.body/>. In my case it worked it first instance only but you can try all the instance if it doesn't worked with the first 1.

Must Read :-

• How to Get Facebook Auto Likes and Comments on Facebook Status and pics
• How to get image in Google Search
• 20 Facebook Tips and Tricks you might not know

How To Show Author Bio For Multiple Authors ?

Are you allowing guest post on your blog ? or are you working in a group on single blog ? Then at that time you have too many authors right ? So, to write bio for each and every author, you need to add the above mentioned code as it is in your blogger template but by changing your name, image url and and description with his/her name and description.

So, this was all about how to add author bio widget in blogger. Hope this tutorial will help you in adding author box below your blog posts. From above mentioned techniques, which you like the most. Do let me know in the comments below. You can also subscribe for SolveMyHow newsletter to get blogging, SEO and make money online tips right into your inbox.

Found this tutorial helpful ? Then why not help us by shooting social media button below, after all "sharing is sexy" right ? Please do share :)


Also See :-

How to Hack Wifi Password in 2 Minutes

Improve Search Engine Optimization Of Your Blog In 5 Minutes For Beginners

Trick To Unsend A Sent Email From Your Gmail Account (With Pictures)

What Is Adsense Revenue Share Between Publishers And Advertisers

DoFollow CommentLuv Enabled Blogs With High Page Rank : List 2015

[Exclusive] Get PR9 Backlinks for Free

[Exclusive] Top 10 URL Shortener Websites To Earn Money