Make A Link Opens In A New Window or Tab

by Greenlava

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).

  1. 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.
  2. 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:

  1. Go to Template > Edit HTML.
  2. Click inside the code window and press Ctrl+F on your keyboard. A search box will appear in the upper right corner of the window.
  3. Find the following code using the search box. This code is a part of LinkList gadget's code: 
    <li><a expr:href='data:link.target'><data:link.name/></a></li>

  4. Finally, insert target="_blank" inside the a tag, 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.

Update: Many readers asked me for this, so here it is: How To Make Only External Links Open In New Windows

Enjoy!

213 comments to "Make A Link Opens In A New Window or Tab"

«Oldest ‹Older 201 – 213 of 213 Newer› Newest»
.,  March 25, 2012 at 2:23 AM    

I would like the referenced link to open inside the borders of the post with a "return" button. That would be slick.

The Mommist,  July 30, 2012 at 7:25 PM    

This worked really great in my previous template. Thank you! :) I didn't have any problems with the code.

However, I can't find the Update 2: Blogger (blogspot) Pages/PageList gadget html code you stated above with my new website template.

What should I do? Where should I paste the code exactly? Thanks a lot!

Greenlava,  August 5, 2012 at 1:31 PM    

@The Mommist
You can't find it because you doesn't have Pages gadget on your blog. The menu bar you have is a third party menu (not Pages gadget).

Unknown,  August 16, 2012 at 1:14 PM    

The information which i was searching found in this article.Tanks for this article

Unknown,  August 16, 2012 at 1:15 PM    

Tanks for the article and is very useful

Loker,  November 2, 2012 at 10:16 PM    

ga ngerti saya.. sudah beberapa kali tes tetap gagal..

Serena Lewis,  November 16, 2012 at 5:21 AM    

Thank you SO much! I've been wondering how to do this for a while and did a hopeful search on Google and this post came up. It worked a treat ~ :)

漢語學習網頁,  January 1, 2013 at 10:20 PM    

thank you so much

Carlos Printe (Artist),  January 23, 2013 at 4:50 PM    

Extremely useful and very well explained. Thank you very much!!

Anonymous,  February 17, 2013 at 5:43 AM    

Yey! Thanks!♥♥

Unknown,  April 17, 2013 at 2:16 PM    

I ought to admit that your blog is truly interesting. I have spent a lot of my free time reading your content. Thank you a lot!

khan,  October 6, 2013 at 6:24 AM    

please give me code for blogger when user click anywhere in page open new window
mean open new browser window open

Greenlava,  October 17, 2013 at 7:26 PM    

@Shahzaib Khan
You can force that on users. That depends on each user's browser setting.

«Oldest ‹Older 201 – 213 of 213 Newer› Newest»

Comments on this post are closed.