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 Make a Sidebar Header Layout on your Blogger Blog

In this tutorial, I want to show you a super simple way to take a standard blog layout (with the header at the top, and the posts and sidebars below), like the image below:

Blogger Layout

…and change it to this…

Sidebar Header Layout

 

Step #1:

Go to your Template Section and select Customize.

Template > Customize” width=”580″ height=”434″ /></a></p>
<p>Next, go to your <strong>Advanced</strong> Section and <strong>Add CSS</strong>.</p>
<p><a href=Advanced > Add CSS” width=”580″ height=”311″ /></a></p>
<p> </p>
<p><strong>Paste</strong> the following code in the <strong>Add custom CSS</strong> section:</p>
<p><code>header {display:none;}</code></p>
<p><a href=Header Display None in Blogger

Then Click on Apply to Blog.

 

Step #2:

Go back to your Layout Section, and Add a Gadget.

Layout and Add a Gadget

 

Choose Picture, and upload your sidebar header there.

Picture

 

And there you have it!

Sidebar Header Layout

 

Credits:
Header Graphic is from Free Pretty Things for You
The Template used is the Awesome Inc. Template

Learn ‘Coding Tricks for Blogger’ from Julie of Deluxe Designs

My good friend Julie from Deluxe Designs is teaching a ‘Coding Tricks for Blogger‘ class!!

Coding Tricks for Blogger is a great way for bloggers and designers to learn CSS, HTML, and JQuery codes and tricks that will enhance the look of any blog. We will go over fun things like shadows, rounded corners, navigation bars, opacity, and more. We will introduce fun and useful websites as well. This course comes with a video and class notes that will be emailed once the course is completed. One former course participant said: “The websites you showed me made me jump up. I seriously wanted to hug you.” Another commented, “Your class was one of the best – and I’ve taken a few ;)”

The Class will take place on April 14 at 7pm MST. This is the last time this class will be offered at the low price of $15!

Click Here for details and to register.

Using Firebug to Troubleshoot CSS and HTML on your Blog

I think that one of the biggest complaints that I get with the new Template Designer templates, is that when you go into your Edit HTML page, it really isn’t all that clear what is going on. The old Minima template was pretty straight forward, and easy to troubleshoot. In this tutorial, I will show you how to use Firebug, an AWESOME browser add-on that makes it so easy to navigate the new templates. Hope you enjoy it :)

Unable to display content. Adobe Flash is required.

Beginning HTML Crash Course!

Use this crash course in HTML to style your posts and sidebars like a pro!

Quick Reference Guide:

The Basics:

HTML stands for “Hypertext Markup Language.” It is the hidden “instructions” that tell your web browser (such as Internet Explorer and Firefox) what to display on a page. HTML is made up of a series of commands. Each command is known as a “tag,” which start and end with an angle bracket. a tag can also end your command, using a slash. The command from beginning to end would look something like this:

<command>element here</command>

Now that you have learned about tags, the basic building block of HTML, all that is left to learn are the different types of commands and how you can apply them to elements on your page.

Text Formatting:

You no longer have to be limited to plain, boring text in your posts! In this section, I will show you how to change the size and color of your text, and much more. Just keep in mind, a little goes a long way!

Below are different text style tags and a preview of what they do:

Bold Text: <strong>text here</strong> – text here

Italic Text: <i>text here</i> – text here

Underline Text: <u>text here</u> – text here

Strikethrough Text: <del>text here</del> – text here

Small: <font size="1">text here</font> – text here

Medium: <font size="2">text here</font> – text here

Large: <font size="3">text here</font> – text here

X-Large: <font size="4">text here</font> – text here

Red: <font color="red">text here</font> – text here

Blue: <font color="blue">text here</font> – text here

Hot Pink: <font color="hotpink">text here</font> – text here

Green: <font color="green">text here</font> – text here

Left: <p align="left">text here</p>

text here

Center: <center>text here</center>

text here

Right: <p align="right">text here</p>

text here

Now let’s try combining some of those text formatting tags:

<strong><center><font size="4"; color="hotpink">text here</font></center></strong>


Preview:
text here

Image Formatting:

Below you can find the HTML tag for placing an image. Note that it is one of the few HTML commands that do not require a closing tag.

<img src=”Your Image URL here”>

For example, the code with my image URL inserted is:

<img src="http://thepixelista.com/square-button.png">

Preview:
Image Borders:
*Play with the values in red to achieve your desired look*

<img style="border:1px solid black;" src="http://thepixelista.com/square-button.png">

Preview:

<img style="border:5px double blue;"src="http://thepixelista.com/square-button.png">

Preview:

<img style="border:3px dotted hotpink;" src="http://thepixelista.com/square-button.png">

Preview:

<img style="border:2px dashed green;" src="http://thepixelista.com/square-button.png">

Preview:

<img src="http://thepixelista.com/square-button.png" width=70px; height=70px;>

Preview:

<img src="http://thepixelista.com/square-button.png" width=40px; height=40px;>

Preview: