Subscribe for FREE Updates.

Monday 18 March 2013

Widgets

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
solid;min-height:125px;
width:275px;}
#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;
  -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(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'

src="http://3.bp.blogspot.com/-61Gvbm5glB8/

UPpeVQAMZ1I/AAAAAAAAADM/oAOmgWv2GLI/s1600

/429379_242610719163393_2098735386_n.jpg "

width='50' align="left"/>I'm
<a rel="me" href=https://plus.google.com
/u/0/116054827022382240041/

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

Customization!


  •  Change 116054827022382240041
    with your G+ ID and write your own information.
  • Change http://3.bp.blogspot.com/-61Gvbm5glB8
    /UPpeVQAMZ1I/AAAAAAAAADM/oAOmgWv2GLI/s1600
    /429379_242610719163393_2098735386_n.jpg

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


Enjoy You Are Done!

Shakeel Asghar ADMIN
Posted By: Shakeel Asghar

Shakeel Asghar is the owner and founder of kutebkhana.blogspot.com. 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 : http://www.google.com/help/nopopupads.html

http://www.makingdifferent.com


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

Good Work Bro if you want a free domain for your website contact me http://facebook.com/wiz.arii


Shakeelasghar said...
20 March 2013 at 16:20

@ nitin mehta
Brother thanks for inform me


Shakeelasghar 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.


Shakeelasghar said...
2 April 2013 at 17:17

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


Unknown said...
1 May 2013 at 07:56

Very nice article thanks for sharing.
www.smartwebtricks.com


Shakeelasghar 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.
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. If you have a problem check first the comments, maybe you will find the solution there.


Regards,
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