Beautiful About Author Widget For Blogger

To make a simple and attractive template design of  blogger is to add low but useful widgets in blogger template. And About The Author widget is good idea to tell your visitors about yourself and your skills, So

 only for this purpose we only show useful widgets for your blogger template and today we introduce “About Author” widget for blogger users which is very simple and attractive, so you can use it on footer in

 your blogger template so let’s go

How To Add About Author Widget In Blogger?

To add this widget follow these simple steps:-

• First log in to your Blogger Account
• Go to Layout and click on add a gadget
• Now add HTML / JavaScript gadget
• Now paste the below code in HTML / JavaScript gadget

<!--[if !IE]> -->
<style>
#profile{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profile:hover {
border:2px solid #ccc;
cursor:pointer;
}
.opacity  {
opacity: 0.5;
margin-left: 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); 
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1; 
}
.opacity:hover  {
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;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
</style>
   <![endif]-->
<style>
#profile{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profile:hover {
border:2px solid #ccc;
cursor:pointer;
}
.opacity  {
opacity: 0.5;
-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;
zoom: 1; 
}
.opacity:hover  {
opacity: 1;
zoom: 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="profile" src="http://1.bp.blogspot.com/-fTNIaDlonig/UiqH-XkMc3I/AAAAAAAAAzg/3Y9bES3sDD0/s1600/Austan+Faryad.jpg" align="left"/>
Austan is a young Blogger, Web Designer, Graphic Designer running a number of Blogs/Sites from his living room. <a style="color:#888;" href="YOur About Us Page Link">Read More..</a>  <br/> </![endif]-->

• Change Green color URL with your image URL
• Change Orange color text with your bio
• Change Your about us page link to your link 
• Click save button and you are done enjoy !!

Note:-  Make an 60*60 pixel picture of yours have great impression on widget and give a suitable response.