2009-05-01

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

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>




التعليقات:

  1. Please help. This is driving me crazy. I did exactly as you stated and I keep getting this message:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Element type "a" must be followed by either attribute specifications, ">" or "/>".

    What am I doing wrong? I am ready to pull my hair out.

    ReplyDelete
  2. Ok. I realized what went wrong. You have to add a space before the code.

    ReplyDelete
  3. it took me 2 hours , but at last i did it
    thank u
    :)

    ReplyDelete
  4. it is difficult to understand it. please make it more simpler.....

    ReplyDelete
  5. Thanks, now I can link visitors to external sites without leaving my site :D

    ReplyDelete
  6. Super, thanks!

    ReplyDelete
  7. Thank you for visiting our Free Web advertising Website. We provide high response free Website listing and free advertisement With No Sign Up Or No Registration. Use our online free Website Listing system to post your free ads today! It is easy to post your Website with our free Web ads network.Enhance your Website Traffic For Free. freewebadverting is the best Free Web Advertising site ever

    Only At

    http://www.freewebadvertising.co.cc/

    just fill the following


    Your Name
    Your Email Address
    Website Title
    Short Description
    Website Url
    Keyword
    WebSite Image
    Reciprocal Link

    ReplyDelete
  8. Works beautifully! Thanks a lot!

    ReplyDelete
  9. Thank you! I was totally frustrated trying to find a way to make my Link List open in a new window. Love your tips and tricks for Blogger.

    ReplyDelete

Total Pageviews