Rotating Ads on Sidebar

Last month was my first month for sponsors and boy has it been ever so exciting to begin this journey! Though there are three different ways to advertise here, I do not really prioritize one over the other. They all seem to be just whatever works best for that blogger or shop owner. Originally, I was just placing their ads on the right under my "Sweet Sponsors" tab in the order they contacted me. But, I was starting to wonder if there was any way to rotate the ads around in random order every time my blog was accessed. After a little research and revamping of the codes I found, I am here to share with you how to rotate the ads on the sidebar of your blog! Go ahead, try it out. Refresh this page and prepare to be amazed...


So here is how to rotate ads on your sidebar.

1. Go to your blog layout screen.

2. On whichever sidebar you would like your ads to show, click on "Add a Gadget" and select the HTML/JavaScript" gadget.

3. Decide how you would like for your ads to display (either one after another or two side by side). You can see on the side of mine that they are just one after another.  This code is for one ad after the other, so if you want to display two columns of ads, make sure that your sidebar is wide enough for two ads plus a little extra room for the small space in between the ads. If you want them to display one after the other, then your sidebar just needs to be a little wider than one ad.

4. Paste the Code below into an HTML/JavaScript Gadget on your Sidebar:

<center>

<a href="YOUR ADVERTISING PAGE URL HERE"><img src="YOUR IMAGE URL HERE"/></a>

<script language="Javascript" type="text/JavaScript">
var ad = new Array()
ad[0]='<a href="YOUR WEBSITE URL HERE" target="_blank"><img src="YOUR IMAGE URL HERE" border="0"></a>'
ad[1]='<a href="YOUR WEBSITE URL HERE" target="_blank"><img src="YOUR IMAGE URL HERE" border="0"></a>'
ad[2]='<a href="YOUR WEBSITE URL HERE" target="_blank"><img src="YOUR IMAGE URL HERE" border="0"></a>'
ad[3]='<a href="YOUR WEBSITE URL HERE" target="_blank"><img src="YOUR IMAGE URL HERE" border="0"></a>'
ad[4]='<a href="YOUR WEBSITE URL HERE" target="_blank"><img src="YOUR IMAGE URL HERE" border="0"></a>'
ad[5]='<a href="YOUR WEBSITE URL HERE" target="_blank"><img src="YOUR IMAGE URL HERE" border="0"></a>'

function randomorder(targetarray, spacing){

var randomorder=new Array()
var the_one
var z=0
for (i=0;i<targetarray.length;i++)
randomorder[i]=i

while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
document.write(targetarray[the_one]+spacing)
targetarray[the_one]="_selected!"
z++
}
}
}

</script>
<script language="Javascript" type="text/javascript" ></script>
<script>
randomorder(ad, ' ')
</script>
</center>
5. Now, you just need to add your Image URLs and Website URLs.

The first line beginning with a href is where you will put the picture code for your actual tab you made. For example, mine is the picture that says "Sweet Sponsors". The URL is the link to the page about advertising for your blog.

The lines each beginning with ad[#] are where you put in your sponsors website and picture URL.

If you need to display more or less advertisements, then copy the the ad[#]…….’ Section and repeat the pattern, or delete the same section(s) leaving as many ads as you need. Make sure that if you add additional ads, that you change the # in the [ ]s to be the next number.
I hope this helps any of you who were looking to randomly rotate ads on your sidebar! Have a great day!

14 comments:

Kitty From A Law Student's Journey said...

I hadn't even thought of doing that- great idea!

amy and jesse hudson said...

Thanks Amber!

Jill said...

Oh WOW! thanks so much for sharing this - I've just been refreshing your page to see it in action! I'm going to pin it to try when I get a minute!


Thanks for linking to a Round Tuit!
Hope you have a fabulous week!
Jill @ Creating my way to Success
http://www.jembellish.blogspot.com/

Christine said...

Really REALLY great tip!!

I sure hope you'll share this on The DIY Dreamer:
http://thediydreamer.blogspot.com/2012/02/from-dream-to-reality-linky-party-5.html

Tales of a Trophy WIfe said...

Great tip!

Alicia said...

Thank you for sharing. I found you on 4 Love of cupcakes.

Mindie Hilton said...

You are right it worked when I refreshed page, not that I ever doubted ya:)! Hope to see you again Friday at Bacon Time.

Inspire Me Heather said...

Thank you for posting this, I do want to do this on my blog as well! I've also got this linked to my blogging post too today, it's fantastic!

Laura Hernandez said...

Thaks for this. I'm going to give it a try. I'm your newest GFC follower.
http://our-reflection.blogspot.com/

Michelle said...

Hi

Thank you for this brilliant tutorial on how to add rotating sponsor buttons to the side bar!

I found out about this post through Jill at Creating My Way To Success.

Michelle :o)

A Spoonful Of Sugar said...

Thanks so much for this helpful tutorial!

Jelli said...

I'd love for this to work, but when I click "rich text" for the preview, I see a blank white box. Nada. Any ideas? I've checked and checked again, and there are no misplaced marks or delete html. Help!

Jana said...

Thank you so much for showing how to do this! Your instructions were so clear and easy. :) Oh, also, I love your blog. New follower here!

Jessica Hazen said...

How on earth did you make this cute blog page???
I'm new to it all and want to learn. I use blogger as well!
Thanks for sharing!

LinkWithin

Related Posts Plugin for WordPress, Blogger...

Daisypath Anniversary tickers

Daisypath Anniversary tickers