How to make a Banner Open in a New TAB

Your website is bound to have some Banner Links that you want your visitors to Click on. BUT they can Send Your Visitors off to the website by Replacing Your website with theirs… BUT you do not want your visitor to Leave Your Website… You want to give them the chance to come back. So How can we fix it?

So to do that, let’s have a quick chat about what a Banner Link looks like.

BIG NOTE: I am going to be talking about making changes using HTML Code…
PLEASE DO NOT be scared of this.
As I tell all my students and clients… It’s just a “THING” and nothing to be scared of...
So please stick with me. This will make you look like a Whiz Kid, without the whiz and definitely without the kid part… I might have to look for a better name for this… but moving on…

What an Anchor Tag Looks Like.

A Link or as they are called… an Anchor Tag, consists of the following 3 parts.
NOTE: I have added in the title=”” into the opening Anchor Tag and the alt=”” into the Image Tag to satisfy the accessibility requirements which, in turn, assists with your website rankings.

The 3 parts of a banner link (In Simple Speak) is as follows…
There is the Opening Anchor Tag
followed by the Image Tag
and closed off with the Closing Anchor Tag

In HTML these appear as…
<a href=”destination_link” title=””> Opening Anchor Tag with href and title.
<img src=”image_location” alt=””> The Image Tag with src ( Source) and
alt (alternative Text if the image is missing).
</a> Closing Anchor Tag

Finding a Banner

Now I want to add in a banner for a program I am promoting called – GetBackup – which is a simple, set and forget back up system anyone can use, for all your devices.

Now to do that, as with many Affiliate Programs, you will have access to their promotional tools, which may include “Banners” that you can use in your promotions… In this case I want to add a banner into the Right Sidebar in my WordPress Site (This website…).

So on logging into my backoffice I can see a bunch of Banners I can use.
I am looking for a simple square banner that is 250px by 250px.
In other words it is 250 Pixels Wide and 250 Pixels High.
Note: Banner dimensions are always specified by Width x Height

Checking the Code

Now the code I got back from the system looks like…

<script src="https://gotbackup.com/get_banner_script.php?id=1542079&bid=464" 
   type="text/javascript" language="javascript">
</script>  

Just to pretty this up a bit. so it looks a “bit more readable”, we get…

<script 
   src="https://gotbackup.com/get_banner_script.php?id=1542079&bid=464" 
   type="text/javascript" 
   language="javascript"
>
</script>  

Hmm well maybe it’s easier to read… But the main thing here is, that this little script, which is Javascript, will run when the page is loaded…

What is the code it produces?

Well that little snippet of Javascript results in the actual HTML Code being inserted into the page when the page is loaded. It’s brilliant stuff!

NOTE: I got the generated HTML using the browsers Inspect Feature which allows you to view the code After the page is loaded. I’ll go into that in more detail later.

The code that was produced just so happens to look like…

<a href=”https://gotbackup.com/click.php?id=1542079&amp;bid=464&amp;cid=0″> <img src=”https://gotbackup.com/7minbanners/banner_464.jpg”> </a>

And that is typical HTML Code for any “Linked” Image. It’s a Link using an image instead of text.

Which is all good and dandy… BUT if you click on that Image, what happens is that the page you were on now becomes the page of the website of the destination link.

Why is that a bad thing?

For things like Banner Exchanges and other places you might use Banner Ads, it’s perfect…
But on a website… if the visitor looks at the site and is done, they’ll probably close it. If they don’t do a “Click to go back” in their browser… then they have also left your website and moved on…

So how do we fix this?

The only thing we can do is to make sure the Page opens in a new TAB. If they close the TAB, then they will be staring at your website again, and hopefully will continue reading and checking out other things on your website.

To do that we need to add in the simple little html anchor tag property of target=”_blank”

So now we will have

<a href=”https://gotbackup.com/click.php?id=1542079&amp;bid=464&amp;cid=0″ target=”_blank”> <img src=”https://gotbackup.com/7minbanners/banner_464.jpg”> </a>

Which on a good day looks like…

Which, by the way, is a Great Simple and Easy way, you can start backing up all of your devices without even knowing how to spell “Techy”.

It’s even simple enough for my 93 year old father (well once he works out how to use his mobile phone). So not the best example… But for anyone else, it’s a simple no brainer and I’ve been using it for over 12 months.

Its one less thing I need to worry about if anything goes “Splash” or “Snap Crackle and Pop”.