How to Add Author Bio Box Widget to Blogger

Your users/visitors always like to know the actual person behind the website, that's why most of the popular blogs have their author boxes on their blogs. Brief author bio widget enables the readers to make a better connection with the author. Adding an author bio box allows users to connect with an actual person behind that website. It also helps them learn more about those authors by following them on social media. Whatever, an author bio box is much better than a tiny name of the author. In this tutorial we'll show you that How to Add Author Bio Box to Blogger.

How to Add Author Bio Box to Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Click Add a Gadget, scroll down and select HTML/JavaScript gadget from the list. Now copy the below code and paste it in the empty widget box

<style>
#bgt-profile{
border:2px solid #888;
margin:2px 5px 0px 0px;
padding:2px;
}
#bgt-profile:hover {
border:2px solid #ccc;
cursor:pointer;
}
.bgt-opacity {
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
opacity: 0.5;
margin-left: 50px;
}
.bgt-opacity:hover {
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
}
</style>

<img class="bgt-opacity" id="bgt-profile" src="https://lh4.googleusercontent.com/-dnCb_BUDdMs/AAAAAAAAAAI/AAAAAAAABDw/7jji-LgPQ_s/s46-c-k-no/photo.jpg" align="left"/><a href="https://plus.google.com/u/0/106747776208858917783" target="Zohaib Liaqat"> Zohaib Liaqat </a>Write About Yourself or Your Blog here<br/>

Customization:

Replace https://lh4.googleusercontent.com/-dnCb_BUDdMs/AAAAAAAAAAI/AAAAAAAABDw/7jji-LgPQ_s/s46-c-k-no/photo.jpg with the URL of your Picture that you want to show in the Widget/Author Bo

Replace https://plus.google.com/u/0/106747776208858917783 with your Google+ or any other Profile URL

Replace Zohaib Liaqat with your Name and Write About Yourself or Your Blog here with your description

Note: If you want to add more links use this code and add it anywhere you want

<a href="Link Address Here">Text Here</a>

Finally click Save button and you're done!

We hope this article may have helped you in learning How to Add Author Bio Box Widget to Blogger. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum