Friday, April 19, 2013

Want a rotating banner or button? Here is how to get one.

I was looking for code to have a button that rotated images and corresponding links, not every 5 seconds or so, but when someone refreshes a page on my site, or when they visit another page on the site.  Similar to the Google adwords to the right.

I found the code, and with some tweaking you can have this on your site too.  First, you need to be somewhat comfortable with editing HTML.  If you look at HTML or script coding and it looks completely foreign, then I would suggest playing with this some before making it live on your site; or get someone with the know how to help you.  :-)

If you would like to see this code in action, please check out my 'Blog Hops I Participate In' section on my left sidebar.  Go to another page on this site, how about the Blog Hops Page and you will see that the button is different.  (Yes, I made it open another window, don't want you going too far)

OK - first is an image of the code,  with the editable parts in red, other editable parts in blue, but they are not necessary to make the script work.  Height & Width can be used if you want to control how the images look on your page (eg. I limited mine to 150x150), and the Alt & Title text is a good SEO improvement practice. Make the last two reflect what the place holder is, not what each image is (eg. I put alt="blog hop" and title="link up parties"),  The green text is instructions, and can be removed from the coding.

Don't worry, I will include a text box with the code in it for you to copy and paste, I just wanted to give you a graphical reference of what is changeable in the code.  Do not change the black text, just the colors as represented above.  If you have a lot of images (for example, the one I am using to the left has 29 images) I would suggest editing in 'Note Pad' (or the Apple Text editor) fully maximized so you can easily see any mistakes (I had a few I didn't see until I did that).

Other ways to use this is to rotate sponsor banners on one spot. :-)  I plan on using it for that reason too, I just need to work on the code.

If you have any question, or have another idea of how to use this script, please don't hesitate to leave a comment.  And with out further chatting, here is the code for you to copy and paste:

Two things to note:

  • If you are using Wordpress free services I do not think you can use this code, I do not know about paid services
  • The more images you have in the script the longer it takes to load, thereby increasing your overall load time.  For example, once I reduce the number of blog hops/link ups I participate in I will reduce the number of button I have uploaded to that particular script.

Melanie Miller - Content Writing Mom
If you like this post, don't forget to share it below.

Don't miss a single post, subscribe via e-mail now.
Enter your email address:

Delivered by FeedBurner


  1. This is great! Thank you.
    Your new follower everywhere

  2. Thank you so much for this information! New follower from the #MTMMixer!