Image Labels links open in New Window Tutorial

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

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



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>