JavaScript Ads
Difficulty: Beginners/Intermediate
Html/CSS/Javascript
|
|
I did not make this script but this is one of many ads scripts you can use to have your visitors advertise on your site. Whats so great about this script is the fact that you can rotate ads in any size, 88x31, 468x60, 100x35, 31x31 and so much more.
Note: If you want to have 88x31 ads make sure your sizes below for each ad are all the same to avoid your script looking weird.
Work example can be found
here on my main site. I have two ad rotations up: 88x31 and 468x60.
Here below is the codes for your ads script. you can...
A. copy the codes below into and make a new webpage with a javascript extension via your cpanel (.js). Or
B. download the script
here.
(just right-click and save link as)
Ads script
<![CDATA[<!-- Begin
var how_many_ads = 3;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % how_many_ads;
ad +=1;
if (ad==1) {
url="http://silentatmosphere.com/";
alt="Site Title 1";
banner="banner url here 1";
width="88";
height="31";}
if (ad==2) {
url="http://silentatmosphere.com/";
alt="Site Title 2";
banner="banner url here 2";
width="88";
height="31";}
if (ad==3) {
url="http://silentatmosphere.com/";
alt="Site Title 3";
banner="banner url here 3";
width="88";
height="31";}
document.write('<a href=\"' + url + '\" target=\"_blank\">');
document.write('<img src=\"' + banner + '\" width=')
document.write(width + ' height=' + height + ' ');
document.write('alt=\"' + alt + '\" border=0></a>');
// End-->
]]>
What you can edit
Lets break down the code for you
<![CDATA[<!-- Begin
var how_many_ads = 3;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % how_many_ads;
ad +=1;]]>
Do you see the 2nd line (well its really the first)
<![CDATA[var how_many_ads = 3;]]>
the number three is how many ads you have on rotation. Changing this will depend on how many of these
you have. for for example you have 4 ads on rotation.
your script will look like this...
<![CDATA[<!-- Begin
var how_many_ads = 4;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % how_many_ads;
ad +=1;
if (ad==1) {
url="http://silentatmosphere.com/";
alt="Site Title 1";
banner="banner url here 1";
width="88";
height="31";}
if (ad==2) {
url="http://silentatmosphere.com/";
alt="Site Title 2";
banner="banner url here 2";
width="88";
height="31";}
if (ad==3) {
url="http://silentatmosphere.com/";
alt="Site Title 3";
banner="banner url here 3";
width="88";
height="31";}
if (ad==4) {
url="http://silentatmosphere.com/";
alt="Site Title 3";
banner="banner url here 3";
width="88";
height="31";}
document.write('<a href=\"' + url + '\" target=\"_blank\">');
document.write('<img src=\"' + banner + '\" width=')
document.write(width + ' height=' + height + ' ');
document.write('alt=\"' + alt + '\" border=0></a>');
// End-->
]]>
four ads on rotation the number is set to four.
<![CDATA[var how_many_ads = 4;]]>
see how the (ad==#) changes? if you want 10 ads up then copy the following below 10 times and count down from the very first section being 1 and so on.
<![CDATA[if (ad==4) {
url="http://silentatmosphere.com/";
alt="Site Title 3";
banner="banner url here 3";
width="88";
height="31";}]]>
You got how many ads you want to add now its time for adding the URLs for each site. Now for example i'm going to show you how i would add the following sites
Little Less Work Plugs,ensnaring the senses, hushabye rotation
<![CDATA[if (ad==1) {
url="http://silentatmosphere.com/lesswork/";
alt="Little Less Work Plugs";
banner="http://www.silentatmosphere.com/lesswork/images/buttons/88x31_4.gif";
width="88";
height="31";}
if (ad==2) {
url="http://blaqheartedstar.silentatmosphere.com/";
alt="Ensnaring the Senses";
banner="http://www.silentatmosphere.com/fan/images/88x31_3.png";
width="88";
height="31";}
if (ad==3) {
url="http://silentatmosphere.com/hushabye/";
alt="Hushabye Rotation";
banner="http://www.silentatmosphere.com/hushabye/buttons/88x31.png";
width="88";
height="31";}]]>
Very simple just make sure to either host the image via your own server or any image hosting website.
How to Modify it
Outside of adding more ads you can also change the size. To do so, what you have to do is just change this
<![CDATA[width="88";
height="31";]]>
you can change it to the following ad sizes
1. 88x31
2. 80x15
3. 31x31 or 32x32
4. 100x35
5. 468x60
Install it
With your javascript on its own page. Its now time to install it into your website.
If your installing a smaller ad like 88x31, 80x15, 31x31, or 100x35 its good to place it on the very top of your navigation for maximum exposure. If you plan to want to have 468x60 ads then on the very top of your content is the best option.
Now for the codes
<![CDATA[<center>
<script type="text/javascript" src="http://www.your website.com/ads.js"></script>
</center>]]>
Please replace
http://www.your website.com/ads.js
with the link to your ad script url.
You can also make another page with requirements on what you want. along with a sign up page. Example to a typical ads section will be the following:
<![CDATA[<center>
<script type="text/javascript" src="http://www.your website.com/ads.js"></script>
<a href="http://your website.com/ads.php or html">Apply?/Current Ads</a>
</center>]]>
Recap
If your still unsure as to what each line means heres a break down with some recap as to whats what.
<![CDATA[if (ad==1) {]]>
this is what the script reads to rotate your ads. the number changes depending on how many ads you have up. #1 should be the very first one with #2 right under it.
<![CDATA[url="http://silentatmosphere.com/lesswork/";]]>
URL will be the website address, just replace
http://silentatmosphere.com/lesswork/ with what ever website you want to have up. Also please don't erase the
"" or the script will not work.
<![CDATA[alt="Little Less Work Plugs";]]>
ever held your mouse over a linked image or a link and you get some small yellow box with a message or the site title? well
alt is what makes that show up. Its ideal to write the site title but you can always give your applicants the option to have them write their own.
<![CDATA[banner="http://www.silentatmosphere.com/lesswork/images/buttons/88x31_4.gif";]]>
This is the url/address to the image banner. Its the direct link given to you on photobucket, imageshack and tinypic.
<![CDATA[width="88";
height="31";}]]>
this can be left alone if you want the common button size. To maintain a uniform size make sure each ad is set to the same size.
