AUTHOR-BOX WIDGET FOR BLOGGER[ROUND+LOT OF EFFECTS]

                      

   Every blogger want to show the author details on their blogs. That widget is commonly said as 'About-me' widget. New visitors to our site want to know more about it before they determine whether or not it’s worth clicking around.
                                  Look here, what I recommend including in those few sentences that can write on about me page for better understanding.they are A link to your full About page,about you,what you doing and your social profile id's. Here I'am showing a simple author box with massive effect. It is my personal author-box widget that i use in my blog.
DEMO OF WIDGET

You can see the widget at end of my blog.

Steps to follow to add the widget 

• 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.Change all green line text to your name and codes 

<!--[if !IE]> -->
<style>
#profilemohammad{border:4px solid #ccc;margin:7px 15px 7px 0;padding:6px;width:60px;height:60px;border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px;-o-border-radius:100px;-ms-border-radius:100px;text-align:justify}#profilemohammad:hover{border:4px solid #888;cursor:pointer}.opacity-profile{opacity:.5;margin-left:50px;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out;-moz-transform:rotate(15deg);-o-transform:rotate(15deg);-webkit-transform:rotate(15deg);-ms-transform:rotate(15deg);transform:rotate(15deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand');zoom:1;margin-right:5px}.opacity-profile:hover{opacity:1;margin-left:0;-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}

#profile{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profile: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>
   <![endif]-->
<style>
#profile{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profile: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-profile" id="profilemohammad" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3iaxy_z5YhzSMLYNLpUGX4ctP_oNU4zl1qCPafx4pP7puheFiBL21e2vva2RDGpD46tiXcNXx9M07q5yfcUTGKh_y0bMFBexDLwBlqb8LuZ04Er_q03asjD5ItUK-VTLmQsUAXuMsd2o/s1600/upd.jpg"width="90px" height="90px" align="left"/>

Hello Friends, A warm welcome to <i><b>TechnoHacking</b></i>. I'm <i><b>PRANAV</b></i>, a young Blogger from India.I'm also a Web Designer, Graphic Designer. For any help related to my post,you can contact me @<i><b> TechnoHacking@gmail.com </b></i><a style="color:#888;" href="http://www.blogger.com/blogger.g?blogID=2417902037691757324">Read More..!</a><br/></![endif]-->

•  Steps 5
•   Replace
  
  "Hello Friends, A warm welcome to <i><b>TechnoHacking</b></i>. I'm <i><b>PRANAV</b></i>, a young Blogger from India.I'm also a Web Designer, Graphic Designer. For any help related to my post,you can contact me @<i><b> TechnoHacking@gmail.com </b></i><a style="color:#888;" href="http://www.blogger.com/blogger.g?blogID=2417902037691757324" with your personal details details
  • Replace "
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3iaxy_z5YhzSMLYNLpUGX4ctP_oNU4zl1qCPafx4pP7puheFiBL21e2vva2RDGpD46tiXcNXx9M07q5yfcUTGKh_y0bMFBexDLwBlqb8LuZ04Er_q03asjD5ItUK-VTLmQsUAXuMsd2o/s1600/upd.jpg" with your image URL

Do you like this story?