Sliding Author Bio Widget For Blogger

This a very simple process just follow the below simple steps
Go to blogger dashboard:
Go to Layout >> Add Html/
javscript widget:
Add Past the below given code:
<h2 class="title">About Me</h2>
<div class="widget-content">
<!--[if !IE]> -->
<style>
}
#probloggertricks:hover
{
border:2px solid #ccc;
cursor:pointer;
}
.opacity
{
opacity: 0.5;
margin-right: 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);
}
.opacity:hover
{
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
</style>
<!--[endif]---->
<style>
#probloggertricks
{
border:2px solid #888; margin:2px 5px
0px 0px; padding:2px;
}
#profileAditya:hover
{
border:2px solid #ccc;
cursor:pointer;
}
.opacity:hover
{
opacity: 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="probloggertricks"
src="http://m.ak.fbcdn.net/photos-e.ak/hphotos-ak-prn2/603013_153123684874975_528779376_n.jpg " width="100" />
<div style=" font-family: Arial Tahoma
Verdana; font-size: 13px; text-align:
justify; ">
<b>Founder & Author:</b> Hi Friends,My Name Is ......About Your Self<a
href="http://allin1-web.blogspot.com">
<b>Allin1-web</b></a> who
based out of the wonderful country
name "INDIA". He is a Professional Blogger & running a number of sites from his living room</div><a style=" color:#5634;" href="http://pradeepsingh181.blogspot.com" target="_blank">...Read
More</a><!--![endif]---->
</div>