Archive the Tricks: Automatically Open links in new Tab/Window

Opening a link in new window or tab.
We sometimes put links in our posts. And naturally our visitor will click on those links. By default when a link is clicked it will open in the same window.
If your blog is like mine where visitors only come in once in a blue moon ha-ha, keeping them in your blog once they come in is crucial. We wouldn't want them visitors disappear from our blog through outbound links, now would we?
But don’t worry guys, we can prevent or at least delay this by opening the links in a separate window or tab. This can be achieved by giving the appropriate value for target attribute in your link’s HTML.

I. Two methods of opening a link in a separate window (or tab)

Use the code below:

<a href="YourLinkUrl" target="windowname">anchor text</a>

where windowname is the name of your target window. (Note: Anchor text a.k.a link text is the visible part of the link , the one you click on).

Method 1: Replace windowname with _blank, like so:
```
<a href="YourLinkUrl" target="_blank">anchor text</a>
```
Using this method, a browser will open a new window or tab each time you click the link. If you click 3 times, it will open three windows.
Method 2: Replace windowname with a name of your choice, like this:
```
<a href="YourLinkUrl" target="MyNewWindow">anchor text</a>
```
With this method, a browser will open a new window named MyNewWindow (or whatever name you give). If the window doesn’t exist, it will create one. If you click 3 times it will still open just one window –the window you specified. You might want to use this method if you want to limit the number of windows opened.

II. Setting a default target window

The two methods above are for individual links, which means you have to specify the target window for each link one by one.
There is a simpler way though, using <base> tag target attribute. The <base> tag target attribute will set the default window for the whole page. Put this tag after the <head> tag at the top of your template HTML. For example if you want to open all links in a new window named MyNewWindow then the code will be like this:

<base target="MyNewWindow" />

To open in a new window, replace MyNewWindow with _blank.
And of course, if you do specify the target window in an individual link after this, the new target window will override the target window specified by <base target…../> tag (for that particular link).

Update 1: Blogger (blogspot) LinkList gadget

In Blogger Help Forum, people always ask how to open LinkList links in new windows. Okay this is the answer:

Login to your Blogger account.
Go to Dashboard > Design > Edit HTML.
Tick the Expand Widget Templates check box on top right of the HTML window.
Look for following line in your HTML code, it’s located inside the LinkList gadget:
```
<li><a expr:href='data:link.target'><data:link.name/></a></li>
```
and insert target="_blank" inside the a tag, to make it look like this:
```
<li><a expr:href='data:link.target' target="_blank"><data:link.name/></a></li>
```

Update 2: Blogger (blogspot) Pages/PageList gadget

To open pages in new windows, follow similar steps to that of a LinkList gadget above. However, look for this code instead:

<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href' ><data:link.title/></a></li>

and insert target="_blank" inside both a tags, like this:

<li class='selected'><a expr:href='data:link.href' target="_blank"><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href' target="_blank"><data:link.title/></a></li>

Note: Setting a link to target="_blank" tells browsers to open it in a new window. Now whether the link opens in a new tab or in a new window, that depends solely on each user’s browser setting.

Archive the Tricks

Thursday, July 7, 2011

Automatically Open links in new Tab/Window

I. Two methods of opening a link in a separate window (or tab)

II. Setting a default target window

Update 1: Blogger (blogspot) LinkList gadget

Update 2: Blogger (blogspot) Pages/PageList gadget

1 comment: