How to add a Custom Author Box in Blogger

byDebashis •August 01, 2021

3

Friends, Are you want to know How to add a Custom Author Bio Box in Blogger with Social icons? If answer is Yes! Then this article going to very helpful for you.

$ads={1}

In this article I Will share with you How to add an custom author bio box in blogger with social icons. By using this method you should easily add author's avatar, author's Description and social media accounts details. This Custom author bio box can make your blog more attractive and professional.

{tocify} $title={Table of Contents}

How to add a Custom Author Bio Box in Blogger

We all know Everyone want to make their Blogger website more professional and beautiful. A Author box in below every blog posts of blogger template already available. But in this toturial we are going to add a Custom Author Bio Box in Blogger sidebar and can make your blog more beautiful and professional.

In this blogger widget most interesting thing is, you can promote your social media accounts with round shape social icons.

Although this icons are used with Fontawesome icons. Author box widget for blogger can make your blog more professional So, lets start the tutorial...

How to add a Custom Author Bio Box in Blogger

We can add this Custom Author Bio Box helps of some CSS code and html code on blogger template. lets follow the below mentioned Step:—

Step 1. Go to Blogger Dashboard > Template > Edit HTML and past the below code above of

/* Custom Author box by pixelnatures.in*/
.bt-author{
border: 1px 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 design*/
.bt-button {
background-color: #4CAF50;
border: none;
border-radius: 26px;
color: white;
padding: 15px 26px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
/* Social button CSS */
.bt-social a {
    font-size: 26px;
    text-decoration: none;
    padding: 5px 5px;
    display: inline-block;
    transition: all 400ms;
}
.bt-social a:hover {
    transform: scale(1.1);
}
/* Official icon colors*/
.bt-social .fa-facebook {
    color: #3b5998;
}
.bt-social .fa-twitter {
    color: #1da1f2;
}
.bt-social .fa-telegram {
    color: #0088cc;
}
.bt-social .fa-linkedin {
    color: #0077b5;
}

Step 2. Now Copy the below HTML code And past it on Sidebar of your Blogger Template.

Blogger Dashboard » Layout » Add a Gadgets

How to add a Custom Author Box in Blogger

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

<p style="font-size: 16px;"> Hi there! I'm Ashish and the owner of BloggerThemes my free time, I enjoy making blogging tutorials. </p><br />

<a href='https://www.pixelnatures.in/'>
        <button class="bt-button">
            Follow me ⬇️
        </button>
    </a><br/>

$ads={2}

Now Save Template!

Before Save the Template please Change all “#” tag into author social accounts details with your social icons. The social icons are, Facebook, Twitter, Telegram and Linkedin. Also change Author Bio discription.{alertWarning}

You'r done. If you found any problem then inform me on comment section. By the way, do not forget to share this post with others. Thanks.

For more updates on Blogger Templats, Blogging tutorial like this, please Follow this Blog.