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 !!
