How To Add Default Author Bio Widget In Blogger ?

It has been a long time we posted something about the blogger platform and this post is all about a new introduction by the Blogger platform. Now,the blogger lets you add author’s bio under each of your post, seems more like WordPress, isn’t it?

Previously we had the contact form update which lets you add contact forms as a widget in blogger and also the template editor update ,all of these are summing up to make Blogger user friendly. Blogger is known for its support by Google, if you apply for an AdSense with a blogger blog, it probably takes much less time for the approval than any other platforms.  If you are looking for some SEO,there are about 4 effective SEO Codes For Blogger Blogs, there are many,but the four which i have listed out are pretty effective.

what are waiting for? Lets try the new feature out!

The code used in this tutorial is written by Akshay from TechByMak.

How To Add Author Bio Box In Blogger Blog?

Step #1. Go to your Blogger Dashboard and Choose a blog.

Step #2. Now Go To The Lay out section and choose Edit For The post Widget-

How-To-Add-Strylish-Author-Bio-Box-Blogger

Step #3. Once you click the edit button, a new windows will pop up where you’ll be allowed to tick and un-tick various option, scroll down and tick the”Show Author’s Profile After the post” option.

Add-Author-Bio-Box-To-Blogger

Step #4. If you are using a default Blogger template or a modified version of the default template, then you won’t have any problems in getting the author box, just go check any of your posts and you’ll see the Author Box.

Step #5. but, if you are using a custom Blogger template, you’ll have to add some codes to your Blogger template. Go to Template>Edit HTML, then find (use CTRL+F) –

[sourcecode language=”plain”]<div class=’post-footer-line post-footer-line-3’/>[/sourcecode]

If you can’t find that thing, try finding-

[sourcecode language=”plain”]<div class=’post-footer-line post-footer-line-3>[/sourcecode]

Step #6. Paste the following code below the previously given code-

[sourcecode language=”plain”]<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>[/sourcecode]

Step #7. You’re done, Click Save!

Blogger-Author-Bio-Preview-widget

How To Edit The Blogger Bio Box?

Author Bio Box Edit

That’s really easy, just go to your Google+ Profile and move on to the “About” section, edit your details as you want and to change you can customize your Author picture by changing your profile picture.

Why Should You Add The Author Bio Box in Blogger?

  1. One of the main advantages is that,its compiled by the folks at Google, so it won’t have any errors or spammy links to a third party sites like the other Author Boxes do.
  2. Organised Schema- Once you add it, there’s no need of adding the rel=author’ tag in each of your posts, this widget takes care of everything related to the Structured data markup (Specially, the Authorship markup).
  3. Multiple Authorship support- As it collects info from the Google +,there’s no need to add additional HTML tags for each and every author in your blog.
  4. When you hover over the name, it shows you your Google + Profile!

Google -Authorship-markup-Author-Bio-Box-Blogger

Share the Author Bio Box For Blogger-

I know, you’re gonna implement it on your blogger blog, share it so that even your friends can try it too! Stay tuned for many other tutorials related to blogger.

Summary
How to Add Default Author Bio Box in Blogger Blog ?
Article Name
How to Add Default Author Bio Box in Blogger Blog ?
Description
Tutorial to Add the Author Bio widget to Blogger blogs below the post along with the Google Authorship markup- rel="author". This works with multiple author blogs too.
Author

Hari Charan

Hari Charan is the founder and CEO Le Geeks. He’s a geek who fell in love with the world of Blogging, SEO and marketing at an early age of 12.

You may also like...

9 Responses

  1. hi hari i have custom template but the above given code is not working here
    http://www.techknowblogging.com

  2. hwllo pls solve my problem my auhtor bio is not showing

  3. rohan says:

    Great, A custom bio is a must to connect. But I am facing difficulty adding one. I added the code but it seems I have messed up somethings. I hope this is all that needs to be done.

  4. Jon Derek says:

    It work in my site @ http://www.pearltemplates.com/ but i put the code in not

  5. Mit says:

    Thanks Hari! I was messing with this for long time but thanks to your post I finally solved it. It was way too simpler than I thought. I tried custom author box but that was too fancy. I tried to mess with default widget but that didn’t work. Now it works perfectly! Thanks 🙂

  6. finally ! I found a simple solution for adding an author box on every posts. Thank you ! Warm greeting from Indonesian blogger 🙂

  7. Thanks for the code man. I was looking for this everywhere.

  8. Hi there!

    This is not working for me. I have completed all the steps but I can’t see any author box. Would you be kind enough to help me?

    Regards,
    Yashraj

Leave a Reply

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

CommentLuv badge