Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

banner
We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

May 18, 2007

Digg This Story

Links, Labels open in New Window

In our previous articles, we discussed the code for making the text and image links in your Posts open in new windows or tabs when clicked. However, to have the links in a Link List and Labels that are normally in the sidebar widgets open in new browser windows or tabs, you would need to change the HTML code in your template. Here, we shall talk about the hack that you can put into your template.

Text Links and Image Links

To recapitulate what we mentioned in our guides at Hyperlinks and Image Links (I) and Hyperlinks and Image Links (II), a typical hypertext or text link code looks like this:-

<a href="URL" target="_blank" title="TITLE">Text</a>


The HTML code of a picture or image link looks like this:-

<a href="URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="80" height="15" alt="Description"></a>


The part of the code that tells the browser to open the link in a new browser window or new tab is the target attribute (in blue). If you want the readers to view the link in the same browser window, simply remove target="_blank" from the code.

Link List and Link Widget

The Link List that you create in your sidebar, using Template -> Page Elements -> Add a Page Element, will open links in the same window. Sometimes, these may not be what you want. For instance, we have configured our template such that the links for “My Blogs” open in new windows but the links in “Articles” open in the same window.

(By the way, many people have asked whether the Articles list is an archive hack. The answer is no. The list you see is created using a Link List. We think that it is better than Archive because it allows us flexibility in displaying and grouping the Articles regardless of date of post.)

To have the Link List open in new windows when clicked, we first go to Template -> Edit HTML. Check the “Expand Widget Templates” box. Backup your template by copying the template and saving it in an MS Notepad text file. You can also click the “Download Full Template” link that appears right after the words “Before editing your template, you may want to save a copy of it.”

Links, Labels open in New Window

Scroll to these lines and add the code in red.

<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>
</b:loop>


Please Note:

You have to locate the correct Link List. Check against the Title if you have inserted a title for the List. If you have several Link Lists in your Blog, they will be numbered LinkList1, LinkList2, and so on. In case you did not insert titles into your Link Lists and you are not sure which Link widget is the right one, look at what is before or after the codes, and compare against what you see on your Blog. They are usually arranged in the order that they appear in your Blog.

Save and refresh your page to see the change.

Label List and Label Widget

If you have created a list of Labels through Template -> Page Elements -> Add a Page Element, you can also have your Labels open in new browser windows or tabs.

Scroll to these lines and add the code in red.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url' target='_blank'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>


© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

34 comments:

Anonymous said...

This is a very well-written and organized, helpful site--thank you and keep up the fine blogging :-))

Best regards,
Dave

Ianternet said...

open in a new window - I think some browsers, example FF stops external popups opening in a new window

bizwhiz said...

Hi Ianternet

Depending on the configuration by the user, the new pages either open in new window or new tab in Firefox for this target attribute. They are not in popups. We disable popups in our browsers too, through Tools -> Options -> Content setting in Firefox. Maybe you could try it and let me know.

filippoco@hotmail.com said...

Thanks, this is the quick fix I was looking for. Good job you came up only second in google search for "html code to open a link in a new tab"
Keep going.
Filippo

kate said...

Is there a way to control the size of the new window?

TIA!

Telling It Like It Is said...

Hi Bizwhiz,
I've been desperately trying to find the solution regarding labels and categories on blogger. I have several labels that are no longer attached to any post, as I am trying to delete them completely. When I try to display my entire list of labels/categories on my sidebar, the list includes those I don't want showing up, as they are not linked to any post. How can I fix this?

bizwhiz said...

Hi Telling It Like It Is

You can refer to our Blogger FAQ - article Change and Edit Labels in Multiple Posts.

Telling It Like It Is said...

Hi again Bizwhiz,

The very first sentence of this post refers to "previous articles" that explain how to create links in posts that open in new windows. I know how to do that manually, except my template for some reason won't accept the code, so when my post is published, each link does NOT open into a new window.

Do you have an article of how to change my minima template html codes so that each link in my posts open into a new window? I can't find an article about that, and I've been looking for over an hour now. Please help??? You're a doll.

hospitalera said...

Hi, first I want to say how helpful this blog is for me but after, successful implementing some of your tips, I came across a problem: If I try to follow the instructions in this post I get the following error message: "Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: Element type "a" must be followed by either attribute specifications, ">" or "/>"."
Any idea? SY

bizwhiz said...

Hi SY

You need only to insert the code (in red). Don't change anything else. The rest of the code is shown to help you pinpoint the location.

hospitalera said...

*Sigh* Still doesn't work, because of the code involved I can't post here exactly what I was doing so I put it up here: http://hospitalera.googlepages.com/problem

Can you have a look and tell me what I was doind wrong, pretty please? SY

bizwhiz said...

Hi SY

If the only thing you added was target='_blank' it should be correct. Just see that you have a spacing before that.

Patricia Buzo said...

WONDERFUL! Thank you so much, the description was clear and everything worked great!

iEn said...

ops.. i think it's working.. tQ

Peach Pearl said...

Thanx a lot for this tips. I almost gave up trying, cos I couldn't find the lines. Until I saw that the 'Expand Widget Templates' was unticked. It's all about trial & error.

ExportExpert said...

Dear Bizwhiz,

as I've already written, this blog is fantastic, first of all because it is very useful. But it is also very user friendly and my question is: how one could organize own blog's labels in categories, as you did, splitting them in general, header, sidebar, categories etc. I need to organize growing and various content... Thanks in advance!

Cesar Martinez said...

Hi. I just started my blog a few days ago and I have found here, your blog, all de answers to my questions. Very explicit, simple but complete with the right information. I'm having a problem with labels. I created a list in my sidebar but for some reason it shows up after each post what I don't like. I'll appreciate your help.
http://cmads-4life.blogspot.com

Evan said...

i cannot get the "new window" code to work. i added the code in red to th html but it still loads all my links in the same window. any help??

Bart said...

Is there a way to set the base target to blank (so all links will open in a new window)?

Anonymous said...

gud one

gertru aka campanita or diabolikitty said...

thank you for your help!

Rudy said...

really cool! I know this post is kind of old but it's still helping people out. Good karma for you! Thanks again!

Allen of EOL said...

I've been searching for an answer to my problem and hoping someone has insight to share.

I formerly used a 3-column Rounders template -- when you would click on a label name from sidebar, it would provide a list of post titles/dates in the body of the page (i.e. not the full post text).

I now use 3-column Denim and it displays the full post text when a label is clicked. How do I customize the template to show a list of post titles/dates?

Amelia said...

Thank you for this site - it has been a huge help for me!

I'm wondering how to open a label in a new window...or the same window, doesn't matter. Basically, what I'm trying to do is create something similar to your "Blogger FAQ," like an "about" section that will open on a new page, rather than crowding up the sidebar. I can't find anything that details how to do this - can you help? Thanks in advance.

[erin] said...

Hi-

I looked at your site to try and have 'link list' sites open in new windows

I saw the 'List Link and Link Widget' instructions as to how to assign the links to open in new windows

Is there no way with blogspot 'link lists' in the sidebars to just enter an additional assignment for each individual link?
(like the /target_new one)
(so that everytime a link list is added the new one doesn't need to be hunted down within all the template info)

Or for whatever reason is there just no way to make the individual URL's open in new windows/tabs within link lists?

Thanks!

Almakos said...

It was so frustrating that widget links were openning in the same window, but now I have exact solution.

Thanks!
Keep up the good work.

Dug said...

There were a bunch of tips on how to open a new window from a link with code, yours was the only help I could find when working with a template (Specifically Blogspot Template). Your solution worked. I could not upload my changed template when I opened the template in Notepad, but when I redid the change using Dreamweaver, I had no problem. Thanks.

Anonymous said...

YES!!!
I finally got my listed links to open in a new page.
Thank you for all your help.

Kevin said...

Hi, I added a 'Rate My Blog' script from BlogCatalog and it opens in the same window when the links on it are clicked. Can you tell me how to make it open in a new window? I tried using target="_blank" but it doesn't work. I can't post the code that I got from BlogCatalog here but you can see it at: http://www.blogcatalog.com/account.buttons.php

It's the 3rd button that say 'Rate My Blog'.


Thanks.

kellene said...

Is there a way to have 2 separate labels? I have a 3 culumn recipe blog where I tag each post with what category I want them in, but I would also like to have a 2nd label widget or page element in a 3rd column where I can tag the recipes by ingredients only. If I tag them with both the category and the ingredients I get a huge label widget list. Any ideas?

Windhorse Publications said...

Many thanks for such useful information!!!!
I have a question- i have managed to change my link lists to open in new windows but where do i insert code into my blog list so that they also open in new windows?

Jill (Sneaky Momma) said...

Thank you so much for this tip. I reference it all the time!

www.russiaexport.org said...

Thnks! You tips are always precious!

Patricia Gray said...

Thanks for these tips. I just tried it out on my Blog and it worked!!!!!!!!