Subscribe for FREE Updates.

Monday, 18 March 2013


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

Add Author Box
This is my first time to share a tutorial 
how to Add Author Box with Rotator Image
Effects in Blogger Sidebaror Footer. 
This author box contains rotator image effect 
that means when your mouse cursor come on
image then it will rotate. I have tried to bring 
little variety I include colored border your can 
easily change color of border and other things.
This widgets Have great css effect.

How can you Add Author Box in bloggers blog?

  •  Click on blog title in which you want to add This Author  box.
  •  Go to layout and then click on Add a Gadget.
  • Select "HTML/JavaScript" Widget.
  •  Copy the below code and paste in it then Hit save.

<style>.KHprofileBorder {margin:5px auto;padding:10px;width:auto;
border-radius:5px;border: 2px #3322dd
#KHprofile{border:2px solid #888;
margin:2px 5px 0px 5px; padding:2px;


    #KHprofile:hover {border:2px solid #ccc;cursor:pointer;


    .KHprofileopacity  {opacity: 0.5;margin-left: 50px;
-moz-transition: all 0.5s ease-out;
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(8deg);
 -o-transform: rotate(8deg);
 -webkit-transform: rotate(8deg);
 -ms-transform: rotate(7deg);  transform: rotate(8deg);
sizingMethod='auto expand');
zoom: 1;  }
.KHprofileopacity: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);

sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 2px 2px 8px #000;
box-shadow: 2px 2px 8px #000;} </style>

<div class="KHprofileBorder">

<img class="KHprofileopacity" id="KHprofile" height='65'



/429379_242610719163393_2098735386_n.jpg "

width='50' align="left"/>I'm
<a rel="me" href=

title="Shakeel Asghar" target="_blank"> Shakeel Asghar
</a>from Lahore Pakistan. Founder of
<a href="">KutebKhana</a>
I love to blogging and
sharing tips and tricks with my readers.
 am a Part time blogger.
Design Blogger template,               
 Web Developing and Designing.>>><a style="color:red;
page.html " target="_blank">Read More &#187;</a>


  •  Change 116054827022382240041
    with your G+ ID and write your own information.
  • Change

    with your Image link. 
  • If you want to change height and width of
    width then simply change for
        125px For width 275px.

Enjoy You Are Done!

Shakeel Asghar ADMIN
Posted By: Shakeel Asghar

Shakeel Asghar is the owner and founder of I love to blogging, Design Blogger template, Web Developing and Designing.i like to learn and share tips with you.

Do you Like this story..?

Get Free Email Updates Daily!

Follow us!

9 Responses to “Add Author Box with Rotator Image Effects in Blogger Sidebar or Footer”

Nitin Maheta said...
20 March 2013 at 14:08

Hello, your google adsense will disabled in 1-2 month because you have not permission to add adsense in popup box in your blog. it's against of google adsense Terms and Conditions i just inform you otherwise as you wish
for more visit this link :

Ali Bajwa said...
20 March 2013 at 15:24

Good Work Bro if you want a free domain for your website contact me

shakeel asghar said...
20 March 2013 at 16:20

@ nitin mehta
Brother thanks for inform me

shakeel asghar said...
20 March 2013 at 16:22

@ Ali Bajwa
thanks for your appreciation keep visiting for more tricks

Best Blogger said...
31 March 2013 at 00:33

ThanQ dear.. it very Great full for me

Shanta Dsuza said...
2 April 2013 at 15:59

Really this was an awesome way to add Author Box Blogger Widget for the new blogger. It must be very easy to use any of the blog. Thanks for the sharing this useful things.

shakeel asghar said...
2 April 2013 at 17:17

@ shanta dsuza
you are always welcome buddy enjoy happy blogging!

Ady Bobs said...
1 May 2013 at 07:56

Very nice article thanks for sharing.

shakeel asghar said...
1 May 2013 at 22:16

@ ady bobs
thanks for your nice commenting

Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
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. If you have a problem check first the comments, maybe you will find the solution there.

Shakeel Asghar

Are you Awesome? Legend has it that Awesome people can and will share this post!
Add Author Box with Rotator Image Effects in Blogger Sidebar or Footer