Beautiful Author Bio Box For Blogger

author bio data box widget for blogger, best blogger widgets

This blog aims to provide best blogger resources to all of you who want to decorate their blogger blogs with beautiful widgets and effects. Today, I have a small but beautiful author bio box for your blogs, This author widget is actually added to the home page of your blog. This is not something, which you add below each post in Blogger, but this will be a nice widget, which you can easily add in the footer of your blog's home page. It will contain a short bio of the author of the blog and a link to read more about him. Moreover, it will be having a picture of the author which will rotate upon user mouse hover. Let's start how to add this widget to your blogger blog.

Before adding this small piece of blogger widget to your blog, kindly have a look at the footer of this blog, you'll find an author bio box at the left side of the footer, so you are gonna add the same widget to your blog. 

How to Add Author Box in blogger? 

The procedure of adding this widget is just simple and easier. Just take below steps in order to add this widget to your blog:

• Go to Blogger Dashboard >>> Layout 
• Add a widget >>> Add HTML/JavaScript Widget
• Copy and Paste Below Code into HTML/JavaScript widget 

<h3 class="title">About Me</h3>
<div class="widget-content">
<!--[if !IE]> -->
<style>
}
#bbc:hover
 {
border:2px solid #ccc;
cursor:pointer;
}
.opacity
{
opacity: 0.5;
margin-right: 50px;
-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);
}
.opacity:hover
{
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
</style>
   <!--[endif]---->

<style>
#bbc
{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profileAditya:hover
 {
border:2px solid #ccc;
cursor:pointer;
}
.opacity:hover
 {
opacity: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
</style>
<img class="opacity" id="bbc" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM1nT7oUJfAUlSE4q81CO0IP_7vSFM5mnkpK9-xwZnCMjlJCU87BRAjcjNjt617jgFKDgMf4DDgI8B8mRA-N_X4lbJ0avZSUiRDtF93hIB7-PJ8qwuXOBp-RugFBwmPLj5pfi4e9LuiNs/s1600/0000.jpg" width="100" />
<div style="font-family: Arial Tahoma Verdana; font-size: 13px; text-align: justify; margin-top:-110px; padding-left:120px;">
<b>Founder & Author:</b> Abdul Wali is a web designer, web developer and SEO expert currently working on several web projects, he is managing several blogs from his living </div>room alone. He has passion to create video tutorials. He currently makes video tutorials in English, Urdu and in Pashto..<a style="color:#5634;" href="http://www.bestbloggercafe.com/p/about-me.html" target="_blank">...Read More</a><!--![endif]---->
</div>

Just make these customization:

• Change the Blue color image URL to your image URL
• Change the Red color link to your About Me Page Link
• Change the Description of the author to your description

Save the widget and all is done! Now view your blog you'll see the widget live. 

Remember:

This widget is always added in the footer of your blog, where it looks fine and don't interrupt other content.