Author Bio Box Widget New Style For Website And Blogger

1.  Go to blogger.com
2.  Add gadget  --- HTML --- javascript.
3.   Paste inside Empty box
4.  Save it done

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
#profiletricksteacher{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;

}

#profiletricksteacher: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>&nbsp;


<style>
#profiletricksteacher{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;

}

#profiletricksteacher: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 align="left" class="opacity" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYkZzauB86Se6WbKy3eCrCbtL5VAki_Dmv7utzxj8Ye6ttXMpsOn5d8p3QbSchiZ36yRC4YoKCPEY1APVa6-BDG9nKBj6xPmSNQXQ1mYJ104h77Y0lTo17KJZaoow9bueNiegxe88RwFGk/s1600/a1.jpg" id="profiletricksteacher" />

Hi! I am tricksteacher a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer.

<a href="http://tricksteacher.blogspot.com/" style="color: #888888;">Read More..</a>  </div>

Replace all yellow mark Your Img URL 50*50 And URL Change

Live Demo

  Hi! I am tricksteacher a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. Read More..