Add Author Box With Rotator Effect

Add Author Box With Rotator Effect

So friends today i will show you how to add AUTHOR BOX WITH ROTATOR EFFECT.Now a days you can see it on every blog.It looks preety cool when some one mouse over on it and it rotates.So lets start, copy all the steps carefully...!

STEP 1:

Goto your DASHBOARD and select your BLOG

STEP 2:

Now click on LAYOUT

STEP 3:

Now click on ADD WIDGET and select JAVASCRIPT/HTML

STEP 4:

Now a windows will poup and add the following Code to it:::

        <style>.BSprofileBorder {margin:0 auto;padding:5px;width:290px;border-radius:5px;border: 5px #000000 solid;min-height:70px;}.BSprofileBorder1 {margin:5px auto;padding:5px;width:auto;border-radius:5px;border: 5px orange 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='90' width='90' src="YOUR IMAGE URL HERE" align="left"/>YOUR TEXT GOES HERE</span> <a style="color:#888;" href="YOUR ABOUT ME PAGE URL HERE" target="_blank">Read More »</a><a href="http://hacking-articles.blogspot.com" title="Get This Widget"/><font size="1" color="white">GET THIS</a></font></div></div>

STEP 5:

Now save it.....Dats it

Wait wait wait!!!! You have to made some customization.

CUSTOMIZATIONS

Change YOUR IMAGE URL HERE to your image url.
Change YOUR TEXT GOES HERE to your desired text to show in author box.
Change YOUR ABOUT ME PAGE URL HERE with your ABOUT ME page...So when a visitor clicks on Read More >> ,he will be redirected to your ABOUT ME page.

After saving ur widget....You will see a cute AUTHOR BOX WITH IMAGE ROTATOR EFFECT on ur blog.
Enjoy and Keep visiting cox new TUTORIALS are on the way.