0 Add Author Box with Rotator Image Effects in Blogger Footer or Sidebar

I have already shared a tutorials that how to add Author box end of blog posts. Now I am sharing another Author Box for your templates footer or sidebar. This author box contain rotator image that means when you will mouse over on image then it will rotate. And I have also included double colored border. I have tried to bring little variety. 

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Widget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.

<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 class="BSprofileBorder"><div class="BSprofileBorder1"><img class="BSprofileopacity" id="BSprofile" height='50' src="http://4.bp.blogspot.com/-AUlnsFGtuYA/UMIYuhZF76I/AAAAAAAAAVc/VEbCdsa08ZM/s1600/Rabbi.jpg" width='50' align="left"/>I'm <a rel="me" href=https://plus.google.com/u/0/102331886274459115104/ title="Mohammad Fazle Rabbi" target="_blank"> Mohammad Fazle Rabbi </a>from Bangladesh. Founder of BloggerSpice.com</span>>>><a style="color:#888;" href="http://www.bloggerspice.com/p/authors-profile-hi-readers-this-is.html" target="_blank">Read More &#187;</a></div></div>

Customization:

• Change  102331886274459115104 with your G+ ID And write your own information.
• Change http://www.bloggerspice.com/p/authors-profile-hi-readers-this-is.html link with your About Us Page.
• Change http://4.bp.blogspot.com/-AUlnsFGtuYA/UMIYuhZF76I/AAAAAAAAAVc/VEbCdsa08ZM/s1600/Rabbi.jpg with your Image link.