How To Add Stylish Hover Author Profile to your blog or site

In this post you can learn how you can design your blog or site with author profile and little description with it. This widget is stylish and advanced with mouse (cursor) hovering effect on Author's Profile Photo and name of author and also with social icons , facebook and twitter icons are included in this widget.

You can see this widget in in my blog under any post or click here

Steps To Add This Widget: 

Step 1 : login to your blogger home and than goto Layout

Step 2 : Click "Edit Gadget" where you want to display your Author Profile and select the "html/java script"

Step 3 : Copy the given below code and paste it into Content

<div class='aboutauthor'>
  <h3><i class='fa fa-user'/>  About the Author</h3>
<style>
#profilevinay{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profilevinay: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>
<style>
#profilevinay{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profilevinay: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="profilevinay" src="YOUR-IMAGE-URL-HERE"  width="60px" height="60px" align="left"/><h2><b><u>YOUR SITE NAME HERE</u></b></h2>YOUR DESCRIPTION HERE <br/></div>
 
<a class='ttip' href='https://twitter.com/your-twitter-url' original-title='how_to_do_tricks  on Twitter'><img alt='' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_jCi6RYzljqGSL2tnsq4W4BTbNElGX05csO_jGAIj4bzm0KUzTzZmczDqXBnKDdTVdNaj0IJSqxvsxPXFIoRR8sK3w9eckKutKV8WCx6zRhjekL_NCK4GCfTbQXpu_nK7GiwfAbQJNjA/s1600/Twitter_logo_blue.png' width='30'/></a>      <a class='ttip' href='https://www.facebook.com/your-facebook-profile-link' original-title='Saif-Ur-Rehman on Facebook'><img alt='' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNlGlNqxBreFJLaZYKiPnozusshsNRYwoOqQ8d3Io2c-ot8Ay4FrmaKhiSG5Mj_Qk_x2X-bvDDJj0WdyQO3OMNYwJPIeRKdThoGpqL09loHzO3DSck8B06nwF64iN30YEU2V5byhqzRc/s1600/fb_icon_325x325.png' width='30'/></a>     <a class='ttip' href='http://howto-dotricks.blogspot.com/' original-title='Saif ur rehman &apos;s site'><img alt='' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeUygxNUM1NF7GJY3nCu-Tzd_p64EnjMFEnj-JWMxN1DimkdeDISulAlxAPV9lnLnYyKuE3jDE23nes_90H_EdVqliURPkgV-LQu6wa7IhL43ayzQUIjPwMQUZpApDnKwAQiopuJohs_c/s1600/zagorod.png' width='30'/></a>

Step 5 : Change

"YOUR-IMAGE-URL-HERE " with your image url
"https://twitter.com/your-twitter-usr" with your twitter username
"Saif ur rehman" with your admin name
"https://www.facebook.com/your-facebook-profile-link" with your facebook profile link
"YOUR SITE NAME HERE" with your site name
"YOUR DESCRIPTION HERE" with your description

and save the gadget your author's profile widget is successfuly added to your site