How to Add a Custom Author box Widget in Blogger Sidebar?

 In this article, I will guide you on how to Add an Author bio box in Blogger’s sidebar with social media buttons. 

I will also show you how to write an author box description in Blogger and add social media links to it. 

So, let’s start the article. 

Why do you need an author box?

Adding an Author box in Blog posts makes your blog more authentic by letting your readers know the man behind the article. 

It also provides easy access to connect with the author via social media links and contact forms. 

It also helps increase the website credibility and helps in EAT (Expertise, Authoritativeness, and Trustworthiness). 

How to Add Author description in Blogger?

To add author description in blogger, go to blogger dashboard and click on setting. Now scroll down to the bottom and click on the user profile option. 

Now add the author description in the introduction tab and it will work as an author description for your blogger website. 

Here you can add social media links in the anchor tag format. 

<a href="https://twitter.com/Key2blogging">twitter</a>

Here you can replace the URL with your own social media links and add anchor text like twitter, Facebook, Instagram, LinkedIn, YouTube, external-link, etc. 

Here, note that the anchor text should be in lower case or it may not show properly. 

Now, if you are using templateify theme or others then the author box is shown up in every blog post with your own social media follow icons. 

How to Add custom Author box widget in Sidebar?

You can use the custom Author box widget in both Blogger and WordPress. 

Step-1: Just copy the below HTML code and paste it in the widget editor field and change the value with your own. 

<div class="k2-author">
<img class="author-pic" src="https://freesvg.org/img/winkboy.png" alt="Author bio image" width="150" height="150" />

<h2 style="font-size: 22px;" >About the Author</h2><br />

<p style="font-size: 19px;"> Hi there! I'm Abhishek and the founder of Key2Blogging.In my free time, I enjoy making blogging tutorials. </p><br />

<!-- Customize Readmore Button -->
    <a href='https://example.blogspot.com/'>
        <button class="k2-button">
            Read More ➔
        </button>
    </a><br/>

  <div class="k2-social">
    <a href="#">
    <i class="fab fa-facebook"></i>
    </a>
    <a href="#">
    <i class="fab fa-twitter"></i>
    </a>
    <a href="#">
    <i class="fab fa-telegram"></i>
    </a>
    <a href="#">
    <i class="fab fa-linkedin"></i>
    </a>
  </div>
</div>

Step-2: Now copy the below CSS code and paste it just below the above code. 

 
  <style>
.k2-author{
border: 2px solid #162536;
  background-color: #FFFFFF;
  text-align: center;
  padding: 30px 25px 30px 25px;
  border-radius: 10px;
  }
/*profile photo */
.author-pic{
  background-color: #4C4A4B;
  border: 1px;
  border-radius: 100px;
}
/* Button Customization*/
.k2-button {
  background-color: #4CAF50;
  border: none;
  border-radius: 30px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 19px;
  margin: 4px 2px;
  cursor: pointer;
}
/* Social button CSS */  
.k2-social a {
    font-size: 32px;
    text-decoration: none;
    padding: 5px 5px;
    display: inline-block;
    transition: all 400ms;
}
.k2-social a:hover {
    transform: scale(1.1);
}
/* Official icon colors*/
.k2-social .fa-facebook {
    color: #3b5998;
}
.k2-social .fa-twitter {
    color: #1da1f2;
}
.k2-social .fa-telegram {
    color: #0088cc;
}
.k2-social .fa-linkedin {
    color: #0077b5;
}
</style>

Now save the code and refresh the webpage. And your custom author box is added in the sidebar of your blogger & WordPress website.

This sidebar widget is fully responsive and works perfectly for all devices. You can check the video guide for more info. 

Note: To work social icons in the widget, your theme must have font Awesome stylesheet installed before. 

How to add Font-Awesome stylesheet to the website? 

To add a Font-awesome style sheet, you need to paste the below code just below the <head> tag in your theme code. 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

If you face any problem during the process, you can ask me in the comment section or you can join our Telegram group for a quick solution. 

▶ For more interesting Blogging tips and tricks, Subscribe to our YouTube channel Now. 

Read More: How to Add pros and cons Table?