Mouse Hover About Author Widget For Blogger

Add Simple About Author Widget on your Blog

SCREEN SHOT

About Author widget is best part of your template, because from this widget your visitors know about yourself and your skills.so in this post i am going to introduce you a simple and good looking About author widget for your blog
,which is very simple, attractive and easy to add. if u like this widget and want to add on your blog then follow below steps.

:Installation instruction: 

Step 1. First log in to your  Blogger Account

Step 2. Go to your blogger Dashboard
  

Step 3.Then Go to  Design >Layout.

Step 4. In layout option Choose Add A Gadget > 

Step 5. Now a popup windows will display in popup windows Choose 

               HTML/Javascript. 

 
Step 6. And now copy below code and and paste in html box.

 <!--[if !IE]> -->
<style>
#profile{
border:2px solid #888; margin:2px 5px 0px 0px; padding:px;
}
#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:1px 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/AVvXsEgIluO4piiFVaevakoKyfOB_V1hFcyGdEAxluFfg9_i9qjbc6JxOSy_LFQEUthqvZHVa2H5ajFOaAbAE6B1gGZvFLvKIyNPbOEq-Q-Xr2Ym6V51GtMscGYYHgs4F8NH6BuZ5VMMzWnzjRjB/s1600/99pcsoft.blogspot.in+Prince+chaudhri.jpg" align="left"/>prince is a young Blogger and Web Designer. He is aslo like to play with html and android roms.<a style="color:rgb(255, 144, 0);" href="Enter here your about us page link/p/about.html">Read More..</a>  <br/> </![endif]-->

Step 7. Now click on save button.. Done

Note:- Change red line with your image url

Note:- Change green line with your own text

Note:- Change blue line with your about us page link

Note:-If u like this post please give comments for your feedback suggestion or help.Thanks..!!