How To Add An Authors Bio With CSS Hover Effect in blogger

If you’re looking to do something different for displaying your author’s information (a.k.a. author’s box) you can try out this nice HTML/JavaScript widget created by Mohammad Fazle Rabbi. It’s basically an author’s bio that features a nice CSS hover effect on your image.
You can check out his demo here.
Trying this out on your blog is as easy as adding a new gadget. Here’s how:

• In your Blogger dashboard, head over to the Layout tab.

• Select and click on an Add a Gadget button then choose HTML/JavaScript.

• Copy and paste the code below:

<style>
 .BSprofileBorder {
 margin:0 auto;
 padding:5px;
 width:290px;
 border-radius:5px;
 border: 5px #009999 solid;
 min-height:70px;
 }.BSprofileBorder1 {
 margin:5px auto;
 padding:5px;
 width:auto;
 border-radius:5px;
 border: 5px #80C8FE solid;
 min-height:70px;
 }#BSprofile{
 border:2px solid #888;
 margin:2px 5px 0px 5px;
 padding:2px;
 }
 #BSprofile:hover {
 border:2px solid #ccc;
 cursor:pointer;
 }
 .BSprofileopacity  {
 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;
 }
 .BSprofileopacity: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>
<div>
 <div>
 <img id="BSprofile" height='50' src="YOUR_IMAGE_OR_PICTURE" width='50' align="left"/>
 I'm <a rel="me" href=https://plus.google.com/u/0/GOOGLE_PLUS_ID/ title="YOUR NAME" target="_blank"> YOUR NAME </a> YOUR OTHER INFORMATION </span> >>>
 <a style="color:#888;" href="ABOUT_ME" target="_blank">Read More &#187;</a>
</div>
</div>     

Change the following details highlighted in red above:
YOUR_IMAGE_OR_PICTURE – the URL/link to your image or profile picture
GOOGLE_PLUS_ID – this is where you put your 21-digit Google+ ID
ABOUT_ME – the URL/link to your ‘About Me’ page
YOUR NAME – this is self-explanatory
YOUR OTHER INFORMATION – this is where you can put your country/location, your title (ex. Admin, Writer, etc.) or any other basic information about yourself.
NOTE: if you know enough about CSS, you can also edit the border color to your liking.

• Save the widget and you’re done.

• View your blog to see the result.