Posting at the Alliance, phin mentioned the tip, while Cory of Core|Blog mentioned using the value "_blank" for the attribute "target" when writing links.
For example, if you wanted to write a link that linked to this little blog, you'd normally do it this way:
<a href="http://www.basilsblog.com/">Visit basil's blog</a>
If, however, you wanted the that same link to open a new window (or, if you use a Mozilla browser such as Firefox, Opera, Netscape 8, or Mozilla Suite browser, open in a new tab), you'd change the link to look like this:
<a href="http://www.basilsblog.com/" target="_blank">Visit basil's blog</a>
The difference, you'll notice, is the target="_blank" part. Of course, you need to be able to edit the HTML of your post, or your interface would need to have the ability to add a target.
That's essentially what phin and Cory suggested. And it works. But it's not how we're doing things here at this little blog.
Suppose you find that you want most of the links to open that way. That is, suppose opening in a new window/tab is the norm? Suppose it's only sometimes that you want to open in the same window?
Well, that's how I have this little blog set up. I don't have to put target="_blank" on my links, because that is the default I use. How is that done? Well, it's easy. But there's always a catch.
Changing The Link Default
In order to make links, by default, open in a new window/tab, you need to be able to edit the HTML of your blogging template. If you use Blogger, that's easy to do. If you use TypePad, it's a little more involved. If you use WordPress or another blogging system, see your documentation on how to edit your Template.
A word of caution: if you're not sure how to edit your Template, you probably don't want to.
Now, to set "_blank" as your default target for your links, open the Template (or Templates) for editing. In the <HEAD> section place the following line:
<base target="_blank" />
You can put it anywhere in the <HEAD> but it's commonly placed just above the closing </HEAD> tag.
And that's it! That's all you need to do make the default links open in a new window/tab.
But There's A Catch
Okay, that's not all there is to it. Oh, yes adding that line of code to your Templates does indeed make all links open in a separate window/tab by default. But think about that for a second.
All links open in a separate window/tab. All links. All.
And all means all. All.
Think about that.
If you are on the main page of your blog and you click on a link to, say, read comments or something, it opens in a new window/tab. And that's probably not what you want.
Here's my thinking, which might not be the same way you'd think:
- If the link is to another page on my blog, I don't want it to open in a separate window/tab. I want it to stay in the same window/tab.
- If the link is to a page on another blog/site, then I do want it to open in a separate window/tab.
So, let's assume that's how you want to do it, too. How do you make that happen?
Overriding The Default
Once you've changed the default to open links in a new window/tab, you need to make some more modifications to your Template.
Look for all the links in your Template that refer to another page on your blog. For example, the "permalink" on each post allows you to open just that post. You'd need to modify it to open in the same window/tab, not the new default. To do that, add target="_self" to the link.
For example, if you use Blogger, you probably have a line that looks something like:
<a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>To make it always open the same current window/tab, you'd modify it to:
<a href="<$BlogItemPermalinkUrl$>" title="permanent link" target="_self"><$BlogItemDateTime$></a>You see what we did? We simply added target="_self" to it. You'd need to do that for every link in your Template that refers to another page on your blog. Don't forget the "Home" page link.
Once that's done, your Template is done. After you republish, your blog now opens all links in new windows/tabs, except the standard links to other pages on your blog.
Oh, One More Thing
But, what if you write a post that includes a link to another post on your blog? You probably don't want it to open in another window/tab. So, you'd include target="_self" in those. Do it manually, for each link in a post that should open in the same window/tab.
Essentially, it's the opposite of what phin and Cory suggested. Or, it's the extreme of what they suggested. Whichever way works for you.
And, in case you haven't noticed, it works for me.
And One Thing I Forgot To Mention
If you have any JavaScript links that open new windows, such as forms or pictures, you should add target="_self" to those. Otherwise, in addition to your pop-up window, you could get a new window/tab if you don't.
Great post, sure beats entering the target statement on all my posts with links.
ReplyDeleteThanks!!!
It is considered very bad form by web designers to insert target="_blank" in link tags. It takes the choice away from the user. The only time _blank may be appropriate is when it's and ad or when it's and info box. (Usually accomplished by JavaScript) Otherwise it is considered best to leave the choice with the user. This principle has been magnified recently with the advent of tabbed browsing.
ReplyDeleteThe user can always Select "Open in New Window" or can Ctrl click or can mousewheel click.
_blank takes away a lot of flexibility.
This post is definitely something that bloggers should know about as it expands your coding knowledge, but I would plead with everyone to please use it very sparingly.
(I especially shudder at the thought of
base target="_blank")
ReplyDeletephin:
ReplyDeleteThanks.
Hans Mast:
I understand your concern. But "bad form?" Says who?
Although I'm a new blogger, I'm not a new Web page designer/programmer. Gosh, I remember when Netscape 3.0 was released.
You point about using _blank it with care is quite valid, and I may not have emphasized that enough. To me, where overuse of the _blank in links is a problem is when a link on a site opens a new window to another page on the same site.
There is no right answer, because some prefer one way and others prefer another.
You know my preference.
Link tips updated!!
ReplyDeleteAfter reading the Link Tips post basil of basil's blog has come up with an alternative for adding target="_blank" to every link you add. basil explains on how to set the default target so your links open in new windows
And easier way.....
ReplyDeleteAfter reading my Link Tips post at The Alliance basil of basil's blog has come up with an alternative for adding target="_blank" to every link you add. basil explains on how to set the default target so your links open...
I used to insert the target="_blank" tag in all my posts until it got to be a real pain in the butt!
ReplyDeleteIt's much better to let the user decide where he/she wants to open links.
I quit inserting the target="_blank" and went with the base target="_blank" route. But seems folks don't like it.
ReplyDeleteLet's see how everyone likes the new thing I just finished adding.
OK, dude, but it might be helpful to some newbies to let them know that when the template it set to force all links to open in new windows, they'll need to adjust pop-up blocker settings (at least in IE). I'm forced to use IE at work, and when I visit your blog from there, I have to right-click links and chose "open in new window" (because I try to leave as little electronic trail at work as possible, so I don't want various addys showing up in the pop-up blocker settings).
ReplyDeleteJeff H:
ReplyDeleteI appreciate the tip. I was not aware of that. Although I use Firefox, I also view this little blog in Internet Explorer from time to time and haven't had any issues. Of course, I am using the default settings.
However, not everyone uses the default settings, particularly corporate installations.