LATEST: We are offering PENTESTING and WEB DEVELOPMENT service with low price Learn More

6/15/2013

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 &#187;</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.

About Author:

Hi, Its me Aamir Khan, Owner of HACKING ARTICLES. I am an Ethical Hacker, Pro Blogger, addicted Web Developer and Security Researcher with experience in various aspects of Information Security. I am from Pakistan.Hacking is my passion and i wanna myself to be called as a LEGEND in this field.

Follow him @ Twitter | Facebook


0 comments:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.