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 highlighted 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 width="60px" height="60px"class="opacity" id="profile" src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-prn2/960211_623939167645143_1522439722_n.png" align="left"/> TechsumSha is a young Blogger, Web Designer, Technician running a number of Blogs/Sites from his living room. <a style="color:#888;" href="#">Read More..</a> <br/> </![endif]-->

  • Change Red color URL with your image URL
  • Change Orange color text with your bio
  • 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. -
To get new updates Like us on FaceBook