Thursday, September 21, 2006

Making links in a Blogger Beta link list open in new window

Note: Please see updates at bottom of post

Note: As always, whenever you make changes to the template, backup the current template PLUS the Page Elements first. Refer to Backup and edit New Blogger template or Backing up and changing New Blogger template. Remember also to edit your Page Elements one by one and save them into preferably the same folder as the one where you save the backup template. Some Page Elements may be deleted or become empty Page Elements if you reload the backup template.

In Blogger Beta, if you add a Link List, the links created open in the same folder by default.

Here is how you can make links open in new windows/tabs. Sign into Dashboard, for the relevant blog, click LAYOUT, then EDIT TEMPLATE. Check EXPAND WIDGET TEMPLATES. You will need to look for a block of code. I find the easiest way to find line of code in long template is to use the "Find" function in Notepad. (Note: See update 28 July 2007 at the bottom of the post)

After the template has been expanded, click inside the template window and press ctrl+A to highlight the whole template and then click ctrl+A to copy it into the clipboard (or click inside the template editor window, right-click and chose "copy"). Open a Notepad file, paste the expanded template into the Notepad.

Look for this block of codes:





<ul>
<div id='link'>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' ><data:link.name/></a></li>
</b:loop>
</div>
</ul>



Look particularly for this code:
<li><a expr:href='data:link.target' ><data:link.name/>

If you have done as suggested, that is, paste the expanded template into Notepad, searching for that line of code will be much easier. Click EDIT in the menu bar at the top of Notepad and chose "Select all" to highlight the whole template. Click EDIT > FIND in the menu bar again and enter part or all of the code you want to look for into the "Find what" box. Notepad will find that and highlight it.

Replace it with
<li><a expr:href='data:link.target' target="new" ><data:link.name/> (in other words, add target="new" after expr:href='data:link.target'. Make sure there is a space between expr:href='data:link.target' and target="new" (see update below).

Click inside the edited template in Notepad, press ctrl+A to highlight the whole edited template, then press ctrl+C to copy into clipboard (or right-click inside the Notepad and chose "copy"). Go back to the template editor window. The original template should still be highlighted. Click the DELETE key. The template editor window should now be empty. Click inside the template editor window and press ctrl+V to paste what you have copied into clipboard (or right-click and select "paste").

Preview to ensure everything is OK. Save template and check that the links actually open in a new window. This has been done for this blog. Try clicking on the links in the link lists (Blogger Resources) and confirm that they actually open in a new window/tab.

Acknowledgement: This is a blog for testing. This post was in response to a reader who asked how to make Link List in New Blogger open in new window and if I remember correctly, was probably used to test the method given by Linklists don't open in a new window and new hacks and this post is probably adapted from his hack and made simpler for people to implement the hack.

UPDATE: 2 person commented of problems executing this hack. Read the comments. I retested it for this blog Good Health Information and confirmed the hack work. Check for yourself. The link list is titled "Blogger Resources" and is the second last in the right sidebar. Click on the links and confirm for yourself that they open in new windows/tabs. Just a note. Make sure that there is a space between
expr:href='data:link.target'
and
target="new".

Update 28 July 2007: Instead of using Notepad to help you locate some section of the template, you cab also press ctrk+F to get the section you find direct in the template editor window: use ctrl+F to find section of code direct in template editor window


Update 10 August 2007: Many webmaster are of the opinion that making links open in new window/tab is a bad practice and may drive visitors away and it should be left to visitors whether they want link to open in the same or new window/tab. I have made previous survey and have found the majority of those who responded prefer links to open in new windows/tabs, which is also my preference as I find closing new windows/tabs easy to do. Further, not everyone is Internet savvy and most will not know how to make link open in new winddow/tab for a link configured to open in the same window. However, I like to keep my visitors and have no wish to discourage any from visiting again. I have this set up a Poll at the bottom of the left sidebar of Blogger Tips and Tricks. However, Polls are not working now. Blogger is aware of the problem and is trying to solve it. Hope they get it working soon. You may be interested in keeping track of that poll.

67 comments:

paul g. mattiuzzi, ph.d. said...

Peter:

You're method works. But there may be an easier way.

Instead of using the "links" page element, you can create your link list by using the "html/javascript" page element, then you can add links directly as html, with the target set as blank.


paul.

Raj said...

it was really helpful!
Thx!

ania said...

*joy* thanks!! :) (sorry for spamming :p)

HereticPB said...

Nifty - speaking of links how about this edit here.

Ted said...

Hi, I create post on my blog, in that post I put a link. I put the target="_blank", but it still opens in the same window. The link I tried to create is:


HREF="http://www.amazon.com/gp/music/wma-pop-up/B000IHY9RU001002/ref=mu_sam_wma_001_002/102-8241256-7896968" target="_blank">song clip here
(note the "a" tags are removed)

what is wrong with the above that the target doesn't work? Any ideas?

Heather Moore said...

I tried this method, but blogger wouldn't save it, saying my code wasn't parsed properly. Yikes! What does that mean?

de_kerinchi said...

blogger wouldn't save it, same like hearticpb problem

de_kerinchi said...

my problem same with heather moore "blogger wouldn't save it"

Peter Chen said...

I am suprised. I tested it before posting. Try clicking on the links in the link lists (under title Blogger Resources and Environmental Blogs) and see for yourself that it opens in new tab/window.

Peter a.k.a. enviroman
Enviroman Says

Heather Moore said...

I tried again, with the same problem. The error message reads:

XML error message: The element type "a" must be terminated by the matching end-tag "".

Any clues?

Peter Chen said...

Hi Heather,

The method definately works because I have tested it and as you can verify for yourself, the links in the link list in this blog opens in new windows. However, perhaps I need to check my post again and/or to test it once more. I am currently doing other things, including trying to finish two posts on my other blogs and it is now near bedtime, so bookmark this page and check back later.

Peter a.k.a. enviroman
Enviroman Says

Peter Chen said...

Hi de_kerinchi and Heather,

I tested the hack once more on this blog Good Health Information and confirmed the hack works. The link list is titled "Blogger Resources" and is the second last in the right sidebar. Click on the links there to confirm yourself that it opens in new window/tab.

One important thing to note. Make sure there is a space between 'data:link.target' and target="_blank"

Peter a.k.a. enviroman
Enviroman Says

de_kerinchi said...

Tq for your respond...im still cannot open link in new window used your method..but im just try to use manual html ...and its ok!
but im still wan't make link open in new window used link list...if your can guide me ...? tq

Heather Moore said...

Peter, thanks so much for the update. I've put it into my code and it worked! Much, much appreciated - you're a star!

Now, a new question: How do I get the links I insert into my posts to open in a new window?

Thanks again
Heather

de_kerinchi said...

Tq for your guide...
now my link list is perfect, after your second quide...it was really helpful!

TQ

Peter Chen said...

I have tested the hack once more. Using the method described, I have now made link list in this blog Good Health Information open in new windows/tabs. I have made an update to the post (in red). There is no mistake. I just pointed out something which may be missed by you.

If you want to use other method to make link list, you can use the HTML/Javascript Page Element instead. For example, I paste this into the HTML/Javascript window:

<h2 class="sidebar-title">Blogger Resources</h2>
<ul>
<li><a href="http://blogger-tricks.blogspot.com/" target="_blank">Blogger Tips and Tricks</a></li>
<li><a href="http://bloggerfordummies.blogspot.com" target="_blank">Blogger for Dummies</a></li>
<li><a href="http://adsense-alert.blogspot.com" target="_blank">AdSense Alert</a></li>
<li><a href="http://firefox-alert.blogspot.com/" target="_blank">FireFox Alert</a></li>
<li><a href="http://testing-blogger-beta.blogspot.com" target="_blank">Testing Blogger Beta</a></li>
<li><a href="http://dummies-gudie-to-google-blogger.blogspot.com" target="_blank">Dummies Guide to Google Blogger</a></li>
</ul>

<h2 class="sidebar-title">Environmental Blogs</h2>
<ul>
<li><a href="http://enviromansays.blogspot.com/" target="_blank">Enviroman Says</a></li>
<li><a href="http://envirocard.blogspot.com" target="_blank">Environmentally Friendly Greeting Cards</a></li>
<li><a href="http://foodasmedicine.blogspot.com" target="_blank">Food as Medicine</a></li>
<li><a href="http://aerator.blogspot.com" target="_blank">Zero Energy Waterwheel Aerator</a></li>
<li><a href="http://owaste.blogspot.com/" target="_blank">Zero Waste</a></li>
<li><a href="http://morganicfarming.blogspot.com" target="_blank">Backyard Organic Farming</a></li>
<li><a href="http://freecycleinternational.blogspot.com" target="_blank">Freecycle International</a></li>
</ul>

I hope you will do this in your blog, then I will have a lot of inbound links. But don't worry about losing your visitors because they all open in new windows/tabs.

Peter a.k.a. enviroman
Enviroman Says

Heather Moore said...

Thanks so much for your help. Everything's working perfectly now!

Gene said...

If you're getting an error message telling you your code wasn't parsed properly, you did not edit the code correctly.

I'll simplify things for you. When you are in the 'edit HTML' tab, make sure 'expand widget templates' is checked. Then search for this exact string:

expr:href='data:link.target'

Simply ADD A SPACE after the last single-quote there, and then add this:

target='_blank'

The whole tag should look like this when you're done, WITH NO LINE BREAKS!!!

<a expr:href='data:link.target' target='_blank'>

If it still doesn't work, take another look at this post and try it again. It's not the code--it's the coder.

Peter Chen said...

Hi Gene,

Thanks for emphasising what I had already explained in the update (in red) in the post.

Peter
Dummies Guide to Google Blogger
"online book" in progress

ania said...

Do you know how to make the links inside the *posts* themselves open in a new window...wihtout having to add it to the html-code every time when making a new post? I'd be very very grateful if so! Thanks in advance!

Peter Chen said...

To the very best of my knowledge, that can't be done.

Peter
Dummies Guide to Google Blogger
"online book" in progress

In Recovery said...

thank you so much for this tip! I just "upgraded" to the new blogger templates and all my nice opens-in-a-new-window links were opening in the same window. Argh! Works a charm now.

ChristineOnTheIslesScene said...

It worked the first time although EDIT TEMPLATE was not a choice for being able to click on EXPAND WIDGET TEMPLATES. So when I finally found it I just copied your suggested code and then hilighted the code to be removed then did CNTRL V so that the code would replace it without me screwing it up by deleting the code and then typing it in. THANKS so much for all that you do to help us newbies. MUCH APPRECIATED!!

Manuel Cano said...

It works perfectly, thanks a lot,

Isvan.

Manuel Cano said...

It works perfectly, thanks a lot.

The Playlist said...

Now how do we get ALL links to pop in a new window? i mean ALL links.

fabdo said...

Peter you are great!!!
Thank you very much for your USEFUL tip! This was a nightmare to me, now thanks to you I'm awake!!
Thanks again!
Ciao Ciao
Donatella
http://paroledicioccolato.blogspot.com/

bidarlah said...

thanks thanks once again....

work perfectly...for links except:

where i used a pic/graphic as a link. (header of my friends blogs as their link), is there a way to that?

and also...in my post, all the pics open in the same window, can they be opened on a new tab or separate window when someone click on it.

thanks...

Peter Chen said...

Hi Bidarlah,

This post refers to pictures in the sidebar, but they can just as well refer to pictures in the posts:

How to put a clickable picture in the sidebar.

While searching for the above post, found this. Don't know if it will be of interest to you:

Clickable button in the post title.

Peter (Blog*Star 2006 and 2007)
Blogger Tips and Tricks

bidarlah said...

hi peter

thanks

tat seems like quite a task cos

1. i hv to upload the pic in a separate blog/site each time for every pic
2. go back to my post and attach each of the pics' html.

Peter Chen said...

Hi Bidarlah,

If you want to blog, you will have to do things like that to get what you want. Once you get used to it, it is not difficult.

Peter (Blog*Star 2006 and 2007)
Blogger Tips and Tricks

bidarlah said...

thanks peter...

will try!

Friends of Oak Park Dogs said...

Worked perfectly for me. Thanks!

Leader said...

Its Working.........Thank you Peter

You can check it in this http://carrer-guidance.blogspot.com


For the people who are having PARSING ERRORS......

see that you end the tags Correctly
Keep the given code between List and Anchor tags

It should be like

ListTAg-AnchorTag-UPDATEDcode-Anchor TagClose-ListTagclose

So replace that code with this

[li][a expr:href='data:link.target' target='_blank'][data:link.name/][/a][/li]

Note: Here the [ indicates < in your HTML code

laissezfaire said...

Thank you Peter! Very clear and helpful instructions!

Rose DesRochers said...
This comment has been removed by a blog administrator.
Peter Chen said...

The above comment had to be deleted because it contained a long unclickable URL which extend into the right sidebar in Firefox and will likely cause the sidebar to slide to the bottom of the page in Internet Explorer.

Peter (Blog*Star 2006 and 2007)
Blogger for Dummies

Barbara from Allston said...

Thanks for taking the time to post this. I edited my html and it works! I (thought) I was having a problem because when I clicked on "Preview" after having saved the template, the links didn't work at all but what I figured out (finally) is that I had to actually VIEW the blog to see the changes work. Duh!

Thanks again!

NIKHIL G. KATHARE said...

This code i am not getting

expr:href='data:link.target'

it is not present in Edit Template

Peter Chen said...

Hi Nikhil,

1. What template are you using?

2. Did you tick the "Expand widget templates"?

Peter (Blog*Star)
Blogger Tips and Tricks

NIKHIL G. KATHARE said...

Hi,
Peter Chen


1. What template are you using?

Ans:
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
-----------------------------------------------

2. Did you tick the "Expand widget templates"?

Ans : yes

===================================

I want to open all links in new window i dont want this target="_blank" this is very boring we have to put this in all links

I want such a script that the link should open in new window for newer links also. and not by adding target="_blank" to links


please tell me if we can do that

have nice day



and just tell me in Leave your comment how to post html?

Peter Chen said...

Hi Nikhil.

This post only show how to make links in Link List open in new windows, not all links. I have tested a few ways of making all links open in new windows without having to add the targer="_blank" or target="new, but all of them failed. So I am sorry for this piece of bad news.

Peter (Blog*Star)
Blogger Tips and Tricks

clickbank said...

Hi Peter Chen

Its ok
Now tell me if i go to premium will all sites including google ads will open in new window?

Peter Chen said...

Hi Clickbank,

I don't think it is up to you to chose. I heard for premium account, you nee 20 million+ page views a month plus other conditions. Do you have that?

Peter (Blog*Star)
Generating Revenue from your Website

Peter Chen said...

Hi Heather,

I am afraid I didn't get email notification of your comment so I apologise for this late response.

"Peter, thanks so much for the update. I've put it into my code and it worked! Much, much appreciated - you're a star!

Now, a new question: How do I get the links I insert into my posts to open in a new window?"

Use
<a href="URL" target="_blank">text</a>

or

<a href="URL" target="new">text</a>

Peter (Blog*Star)
How you can help Blogger Tips and Tricks
(no one should feel obligated. Everthing completely voluntary)

Peter Chen said...

Hi de_kerinchi,

I am afraid I didn't get email notification of your comment so I apologise for this late response.

"my problem same with heather moore "blogger wouldn't save it"

My response will be the same as the response the one for Heather.

Peter (Blog*Star)
Blogger Tips and Tips got listed in DMOZ, the most important directory and the most difficult to get listed in, plus link to site with tips on how to get listed in DMOZ

Peter Chen said...

Hi Ted,

I am afraid I didn't get email notification of your comment so I apologise for this late response. I am also afraid that I may have to remove your comment because it contains a long unbroken line (URL) later as it extend into the sidebar and may cause problem

"Hi, I create post on my blog, in that post I put a link. I put the target="_blank", but it still opens in the same window. The link I tried to create is:

HREF="http://www.amazon.com/gp/music/wma-pop-up/B000IHY9RU001002/ref=mu_sam_wma_001_002/102-8241256-7896968" target="_blank">song clip here
(note the "a" tags are removed)

what is wrong with the above that the target doesn't work? Any ideas?"

If I had come across your question earlier, I would be skeptical. However, recently I had my own experiences. I had 4 links with target="new" (same as target="_blank") but the first one just insists on opening in the same window/tab. I tried changing it to target="_blank". Still same result. Why this link opens in the same window but the other 3 open in new window I don't know.

Peter (Blog*Star)
Guide to Malaysia

da7do7 said...

hiii there
i tryed this hack over & over & it keeps telling me that theres an error & it cant save it i tryed everything u wrote in here still the same can u help me through this

Peter Chen said...

Hi da7do7,

I tested it before I published and tested it again when someone experienced difficulties and both time it worked. I have drawn attention to a common mistake some who try to implement it twice, one is in red at the bottom of the post. Did you read that?

Peter Blog*Star
The easiest way to earn something for your blogging efforts

da7do7 said...

hii peter,
thanks for answering me that quick u really super the problem is like i said b4 i tryed everything b4 i post u this & i read all other ppl comments 2 know exactly whats wrong but its still the same i think ill try the the html/javascript widget thats easier cause i cant know where's the problem
again thanks alot see u around

da7do7 said...

hii again,
u know something i guess its something wrong in the bloger itself cause i just tested it again now just as i did 92768235 time yesterday :D & u know it works now thats creazy but i dont care it works lol :D
thanks alot & im sorrey 4 bothering u with my comments
see u around

Matthew & Janina said...

THANK YOU SO MUCH! you are a COMPUTER GENIUS! it worked PERFECTLY and it was explained very clearly - much easier to understand than all the other ones i tried. THANK YOU SO MUCH!

Lauren said...

Your code worked for me. However, I looked at the code again after I'd saved it, and it had automatically changed to this:

a expr:href='data:link.target' target='new'

(In your post, you use target="new")

Someone may have pointed this out already, but I didn't bother looking for it in the comments.

Peter said...

Hi Lauren,

Blogger often changes the edits we put into our template, most likely because it is now XHTML and not HTML. However, as long as it works, why bother your head about it whether it is "" or ''?

Peter Blog*Star
Generating Revenue from your Website

Avi Morgenstern said...

I've expanded the widget templates and used the find function in Word of the code to look for as well as slowly searching myself. I noticed the spaces threw it off a little bit, so I just searched one line or a phrase of words at a time. Still couldn't find it.

I even switched my template just to try searching through another template and could not find it.

-

Couldn't there be an easier preference to have it open in tabs compared to staying in the same window?

I really think it's a lot better for tabbed browsing to have links open in new tabs, and if they're cluttering it's so easy to delete them and not lose your other data.

Blogs that have several links within should have the option to have them open all links in a new tab.

Kami said...

It works! Thanks a bunch!

Avi Morgenstern said...

this is really irritating. I've changed my template and it still is nowhere to be found (that part of code) i've tried everything i can think of, and instead of saying it works for you, tell me how to EASILY do this! OR SOMEONE WITH THE POWER CHANGE IT SO WE HAVE A CHOICE via blogger's many preferences.

this is insane, really, how complex this takes, and that the batch of code that you keep saying to search for is not anywhere in my template. (I even switched to the most boring and basic template that blogger offers) YES I'VE EXPANDED TEMPLATES! YES I'VE EVEN MANUALLY SEARCHED through the entire code!

someone who knows how to deal with html well please answer this: HOW DO YOU DO THIS? EASILY? the link portion seems to be completely missing from html.

if whoever reads this does not have the power or knowledge for this, please direct me to who does.

Peter said...

Avi,

Suggest you use HTML/Javascript Page Element and hyperlink to make your Link List instead.

Advantage:
1. no need to search for code
2. HTML/Javascript Page Element can be backed up
3. Link List Page Element cannot be backed up.

Same like this one for classic template:
Editing or creating Link List
or better
Adding a link list to your sidebar (classic or New Blogger template) use HTML Page Element

Alternative, join
Photostore
and look for Ramani modified 3 column Minima template.

1st suggestion better but your choice.

Peter Blog*Star
Blogger FAQ (Frequently Asked Questions)
(Blogger FAQ in progress. More will be added as I have the time)

Avi Morgenstern said...

thanks, the sidebar helps a little bit. Still, shouldn't I be able to let my links in each post open in a new tab/window, right? It'd be perfect if I could.

Peter said...

Why not. Using HTML/Javascript Page Element, you are in complete control. You are the master of what goes into the HTML. So making hyperlinks like

<a href="URL" target="new">anchor text</a>

Peter Blog*Star
Testing Blogger Beta (now New Blogger)

Peter said...

Look at the HTML in this post What a grateful blogger did for me

Peter Blog*Star
Blogging Ideas (now Blogging Tips and Tricks

Melissa said...

Thank you so much for this, it works great!

Mark said...

It works and, frankly, should be an option without expecting folks not wishing to or expecting to code on their own. I, too, believe that it is better to open a new window, especially given the "tabbing" that contemporary browsers use. Sure, I want folks to visit the links I post, but I don't want them to have to have to constantly go back and forth between my blog and the other guys blog. Thanks for posting the code.

Seriously? said...

Thanks Peter for the tip! This works perfect.

Jon said...

Thank you, thank you, thank you - this worked like a dream! Jx

পার্বত্য চট্টগ্রাম সংবাদ said...

It worked for me! Thanks a lot!

em r said...

Thank you! :)