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 widgets. 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?

                          DEMO

To add this widget follow these simple steps :-

• * First login 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBlhmVKOcqefK89aiSf5-FGY2pGWnp-mWWOAYWULNjmrdu31Hcdz_Z8ucFeSrT8ARgkd4P84n1eSWxQoID_OWnKflp3S3Q0uAY0E8dYT4h-oYBOQ8If46Seqv603AoEvroRHTkvHQUU2U/s1600/Lakshya+Dhillon.png" align="left"/>   
 Lakshya Dhillon is a 13 years old blogger currently studing in 8th. He is a Skilled blogger and Web Devloper.  
 . <a style="color:#888;" href="YOUR ABOUT US LINK">Read More..</a> <br/> </![endif]-->  

• * Change BLUE color URL with your image URL
• * Change RED 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.