Posts Tagged ‘Banner Code’

One of my subscribers was having trouble getting a banner to link to her site and mailed me to ask if I could help, I replied with an explanation of how I do it and she’s now happily posting her banners.

Upon her suggestion I decided to post it here for anyone else who has problems understanding banner ads, this may seem a little long winded for any experienced web builder but this article is aimed at people who are new to it and really don’t have any experience.

 First thing you will need to do is make a banner image in whatever image editor you use or simply use an existing banner image that you already have but if you do make your own then the standard size for a banner ad is 468 X 60 pixels in size such as the one shown below, the 468 being of course the width of the banner and the 60 being the height.
You may also visit http://mywebtoolspage.com/ and you will find a banner creator there that you can use anytime for free as well as various other webtools and scripts.

I will use the above banner for the example in this post and this banner appears because I inserted this piece of code into this page in HTML or code view, I will bold the text for clarity for the rest of this article but the actual code is in standard format (Not bold).

 <a href=”http://www.effwurdsbooteek.com/” target=”_blank”><img src=”http://effwurdsbooteek.com/Banners62322/Effwurd-Banner-02.gif” border=”0? alt=”Mega Fab Deals” width=”468? height=”60? /></a>

 Don’t Panic! I know this may look confusing if you are not used to working with codes but it’s not really that difficult once you know how it works so lets break the code down into small chunks.

If you want to try this yourself step for step then copy this next piece of code and paste it into a simple text editor such as Windows Notepad or similar.

 <a href=”LINK” target=”_blank”><img src=”IMAGE” border=”0? alt=”TEXT” width=”468? height=”60? /></a>

 You will notice that all the code is placed between 2 tags <a and /a> which are the open and closing tags.

 The first part of the code is this:  href=”LINK”

The part you need to change is the text LINK between the inverted comma’s or quotes ” “ here you need to enter the link to the site you want people to visit when they click on your banner.

As you can see I entered http://www.effwurdsbooteek.com/ which is my website that I wanted to link to but you will use your own site link of course.

 The next part is  target=”_blank”

This determines how your linked page opens, for example if _blank is inserted between the comma’s ” “then the web-page will open in a new browser window when someone clicks on your banner.

If _self is entered here then the page will open in the same window replacing the page the banner is on

 The next part is  img src=”IMAGE”

Here you will have to change the text IMAGE between the comma’s ” “  to the URL of your banner image, for example I entered the following URL which is a folder I created and uploaded specially for this example.

http://effwurdsbooteek.com/Banners62322/Effwurd-Banner-02.gif

The first part http://effwurdsbooteek.com/ is the website where the image is hosted at

Then a forward slash /  and the second part banner-sample is the name of the folder on the website that was made especially for this example and contains the one single image.

Another forward slash / then the last part Effwurd-Banner.gif is the name of the image itself.

 The next part border=”0? is the size of the border around your banner simply enter any number from 1 – 5 or whatever you desire but I set this at 0 because I didn’t want a border I suppose you could simply remove this section altogether for no border.

Still with me, good, if your doing this step by step you should have got this far

<a href=”LINK” target=”_blank”><img src=”IMAGE” border=”0?

OK the next part is alt=”TEXT” and here you will change the text TEXT between the comma’s ” “  to anything you wish but usually a description of the banner or service your advertising.

This is the text that people will see in a pop up or balloon for example when they hover over your banner with their mouse and will also show in a browser in place of the image where someone has the images disabled, a good place for keywords 

  The last part you need to change is width=”468? height=”60?and these are the dimensions or size of your banner in pixels just enter the size you want it to display as, 468 X 60 is the standard size for most banner rotators or exchanges etc.

OK so all you need to do is use the following code for a basic template and alter the text between the comma’s as explained above and you should have a working banner code.

<a href=”LINK” target=”_blank”><img src=”IMAGE” border=”0? alt=”TEXT” width=”468? height=”60? /></a>

 Now you have to paste the code into your web page and the easiest way I have found to save reading through lines of code is as follows, this is good if you don’t know anything or little about html code.

Open your web-page or HTML document in your favourite HTML editor, I personally prefer Dreamweaver but I think most of them work on the same principal of having 2 views for design (What You See Is What You Get) or code view (HTML) .

While in design or wysiwyg mode click with your mouse on the part of the page where you want your banner to appear.

Leaving the cursor where it is switch to code or HTML view and your cursor should still be flashing at a point somewhere in the text.

This is the exact place you need to paste your banner code.

You can switch back to wysiwyg mode again if you wish and you should see your banner, if not maybe you will need to open it in a browser for it to show up.

I hope that this article has helped you in some way and though I am no professional programmer and there are probably even easier and better ways of doing it.

This is just the way I do it and it works for me and also for my good subscriber who inspired me into writing this article “Thank you Michele” so I hope that it works for you