Intermediate Tutorials

How to Put Randomly Rotating Ads on your Sidebar in Blogger

October 28, 2011 4 Comments

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.

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

Filed Under: Blog Tips, Custom Blog Design, Easy, Easy Tutorials, HTML, Intermediate Tutorials, Sidebar, Tutorials Tagged With: 2011, ad, ads, advertisement, Blogger, blogspot, Easy, page, random, randomly, refresh, rotate, simple, sponsors, Tutorial

Dawn by Design

September 27, 2011 2 Comments

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.

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)

Filed Under: Creative, Custom Blog Design, Digital Scrapbooking, DIY, Easy, Easy Tutorials, Headers, Intermediate Tutorials, Links, Linky Love, New Blogger Questions, New Blogger Template Tutorials, Post Dividers, Sidebar, Sidebar Titles, Templates, Tutorials

How I made my Facebook Graphic… with NO software :)

June 15, 2011 2 Comments

So I have kinda been on a mission lately to prove that you can make some seriously CUTE stuff, with NO professional design software and NO money. You will see LOTS more of this coming. So prepare your self to get creative and design your own Blog, Facebook Page, Twitter Page, etc. No more excuses :)

Here is what I used:

Now sit back, relax, and watch how I did it!

Filed Under: Background, Creative, Design Tips, DIY, Easy, Easy Tutorials, Facebook, Intermediate Tutorials, No Software, pixlr, Social Networking, Tutorials

Customizing your OLDER, NEWER, and HOME links.

May 30, 2011 2 Comments

You can replace the “older post” Newer posts” and Home inks at the bottom of your blog with any word/phrase you want or with an image that you create.

Creating an image is the same process as making a signature. Except you are replacing your name with whatever word or phrase you want. For the purpose of this tutorial I’ll stick with “Older” and “New” and “Home”.

In order to make your image links for the “New” “Older” and “Home” links, you can follow the same directions on how to make a signature without any graphics software here. Or Carolynn has a great tutorial on how to make signatures with Adobe Illustrator here. But you can use any graphic design software to make a png file image for each link.

Make a separate image for “New”, “Older”, and “Home”. Make sure to save them as PNG files so the backgrounds are clear.

Once you’ve made the images upload them to any photo hosting account such as Photobucket or tinypic. Just make sure you can get the HTML direct link to each image.

Now to install the images:

1. Go into the Design settings of your blog. Got to edit HTML.

Before doing any changes to your template you should always press that lovely link at the top of the template that says, “Download Full Template.” Just in case things go awry.

2. Click on the little box on the top right that says “expand widgets”

3. Find this code

The code in RED is the code for the “New” link
The code in GREEN is the code for the “Older” link
The code in BLUE is the code for the “Home” link