Add Author Bio Box or About Me Widget In Blogger Home Page

We have already learned about facebook widget in previous article. Today's post it is very essential for those viewer who want to make a professional design of blog and want to make a attractive blog for visitors. I have a small tutorial about how to add author bio box widget to blogger footer. This is a beautiful author bio box widget which will be added in the blogger footer. As you know an author box can include information such as author's name, profile, blog and will be having a picture of the founder & author in the blogger footer which will move upon user mouse cursor. It is very stylish widget for a blog or website and it will make attractive for viewer eyes who are landing on your website. so let's start how to add author bio box widget in your blogger blog.

How To Add Author Box Or About Me In blogger

Before adding a author bio box widget, You just need to add below code in your blog site home page footer. Please follow the simple tutorial step by step.

1. Go to Blogger > Layout.

2. Add a gadget > Add HTML/JavaScript.

3. Copy the below code and Paste into HTML/JavaScript widget.

<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/AVvXsEgaXcpMdNU7rrDp-FMaEJByN8sl5B5XlKmBg55mVgZkm9MZYtkkt7vCHtXHcIMYe5oGry6RFMsUgaO3uYuZtSebsZMrbzEJcUSMpOwP50P4e3f5EhU_Q16UuJqSo0Iz9yJtjJdqWWveTMSy/s1600/63943_521688851207047_20876973_n.jpg" />
<div style="font-family: Arial Tahoma Verdana; font-size: 13px; text-align: justify; margin-top:-110px; padding-left:120px;">
<b>Founder & Author:</b> The Guy behind this blog is called <b>"ADIL"</b>. I am 24 years old. Currently, I am living in Karachi, Pakistan. I can speak two Languages Urdu and English. I am managing blog myself &amp; I love to..<a style="color:#5634;" href="http://www.earnbloggercafe.blogspot.com/p/about-me.html" target="_blank">...Read More</a></div></div> <!--Please Do not Remove the Credits --><p style=" float:left;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.thebloggercafe.blogspot.com"><strong>Blogger Widgets</strong></a></p></div></div></div>

Customization

•  Replace the Blue Color image URL with your image URL.
•  Replace the Red Color about me page link with your about me page link.
• Replace the Green Color author description with your author description.

You are almost done.

Need Help

If you are facing any problem to add author bio box please let me know in the below comments section.