How to Put Randomly Rotating Ads on your Sidebar in Blogger

Have you ever wanted to randomly rotate your sponsor’s advertisements on every page refresh? I have finally figured this one out for you!! It is pretty simple too. What is even better, is that it works with any size advertisement!  To see it live, click on the image below.

Screenshot of Randomly Rotating Ads for Blogger

Step #1: Plan for how you want your ads to display… This code will fall one ad after the other, so if you want to display 2 columns of ads, make your sidebar wide enough for 2 ads + a little extra room for the small space in between the ads. If you want them to display 1 after the other, then your sidebar just needs to be a little wider than one ad.

Step #2: Paste the Code below into an HTML/JavaScript Gadget on your Sidebar:

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

Step #3: Now, you just need to add your Image URLs and Website URLs. (If you need to know where to get your image URL, I have a post here that explains Hosting Images)

If you need to display more or less advertisements, then copy the the Ad[#]…….</a>’ 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.

IMPORTANT: The code needs to be exact, if it is not working correctly, check and recheck the code and make sure that no quote marks are missing, etc.

Pin It

How to Remove Shadows from the Simple Theme in Blogger.

I have found that the Simple Theme is a really great theme to work with when designing blogs, but I always need to get rid of the pesky shadows to have a nice clean slate for designing.

Get Rid of these Shadows in the Simple Theme of Blogger:  Post Background Shadow, Header Text Shadow, Post Image Shadow, Sidebar Image Shadow

 

All you have to do, is go to your Dashboard, and select “Template” and “Customize“…

Select Template and Customize

 

That brings you to your Template Designer, where you will need to go to your “Advanced” tab and click on “Add CSS“.

Advanced and Add CSS

 

Here are the codes that you need to paste in that section.

To get rid of the Header Text Shadow, paste this:

.Header h1 { text-shadow:none; }

 

To get rid of the Post Area Background Shadow, paste this:

.content-outer { -webkit-box-shadow:none; box-shadow:none; }

 

To get rid of you Post Image, Sidebar Image, & Profile Image Shadows, paste this:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img { -webkit-box-shadow:none; box-shadow:none; }

 

That’s It :)  Super Simple!

Free 30 Minute Makeover!

I spent some time searching for new freebies, and I came across some new resources for my Find Cute Stuff page.  Anyway, in the search I thought it would be fun to put together a 30 Minute Makeover idea for you!  Here it is:

A super cute Free Blog Header from Designs by Dana

+

Free Sidebar Titles from Artemisa

+

A Free Blog Background from Smitten Blog Designs

=

A Super Easy, Super Cute Blog Design in 30 Minutes or Less!

Free 30 Minute Blog Makeover

Request: Halloween Freebie Pack

I have been getting TONS of great requests for tutorials and freebies.  Thanks so much for the ideas and feedback!!  This was one of my requests:

holiday related items to add to your blog each holiday to not change the blog completely but make it look festive-:)

So this morning I whipped up a cute halloween pack.  It includes a bunting candy corn flags, a pumpkin, a Jack-O-Lantern, 3 individual Candy Corns, and a “Happy Halloween” Button.  These are PNG files with transparent backgrounds, so I would be easy to layer over a header, or just use the “Happy Halloween” button.  To Download, click on the image below, and click on “Free Download” next to the price.  You do not need to register.

Halloween Freebie Pack | Clip Art

Thanks for the requests, keep them coming!  Make a Request Here.

Dawn by Design

So I was going through some of the new requests submitted, and someone asked for a tutorial on how to add a post divider using the new templates.  So I did a little digging looking for a tutorial and I came across Dawn by Design’s Blogwear Tutorials.  The tutorials that she had were great, so I went ahead and just listed some of them on my Blogger Tutorial Page.

Dawn by Design | Digital Goodness for Scrappers & Bloggers
Here is a list of the tutorials that I added to my directory:
Adding a blog header in Blogger (tutorial by Dawn by Design)
Adding a post divider image in Blogger – New Templates (Tutorial by Dawn by Design)
Customizing template colors in Blogger (tutorial by Dawn by Design)