Tuesday, August 11, 2009

Anchor text and how to make hyperlink open in new window or tab


This post is for those very new to HTML, but want their hyperlink to open in new window or tab. I have already published a short post How to make links open in new windows but apparently there are some who still have problems understanding: "I'm not very tech savvy and I tried your solution, the code you provided, with the website taking the place of the word "Description" correct?" so let's try to make the instructions and explanation clearer.

First, an explanation about anchor text (that is what I called DESCRIPTION above). That is some text in your post that you want highlighted (normally blue). For example, I want these text: Make active (clickable) links in post and comments to link to another of my post on hyperlinks. So I highlight those text by clicking and dragging the mouse over those text (see screen shot below):

screenshot highlighted text for anchor text

These text is know as the anchor text. After highlighting the anchor text, click on the "insert link" icon Blogger insert link icon and a pop-up will appear where you are asked for the URL of the webpage you want the anchor text to be linked to:



Type or copy-paste the URL of the webpage you want to be linked to, click OK and if you are in the EDIT HTML mode, you will see the highlighted text being replaced by the hyperlink tag as follows:

<a href="http://www.bloggertipsandtricks.com/2006/09/how-to-make-links-open-in-new-windows.html">How to make links open in new windows</a>


Now if you want that hyperlink open in new window, all you have to do is to edit the hyperlink tag by adding target="_blank" as shown below:

<a href="http://www.bloggertipsandtricks.com/2006/09/how-to-make-links-open-in-new-windows.html" target="_blank">How to make links open in new windows</a>


After this, I hope you now understand fully what is meant by hyperlink, anchor text and how to make hyperlink open in new window or tab.

Update: If you don't want to do this individually but wants all links in your blog to open in new windows without you having to do anything, then refer to How to make all hyperlinks open in new windows

51 comments:

  1. gosh! this was what i've been trying to do for the past few days!! talk about cosmic alignment! now i have my answer :) thanks peter!!

    ReplyDelete
  2. Hello, I've found your blog very helpful so far. I'm trying to edit my blog so the post title is completely replaced by an image. Clicking the image would link to the single post entry, just as it would with a text post title.
    I've seen this done on other blogs, but am unsure how to edit this when having expanded the widget templates.
    I am wondering whether you have any idea how to do so?

    Thanks, Jaimie

    ReplyDelete
  3. Hi, I know this comment is not related to the post...but I have tried to add you to my technorati favorites and it didn't work :-( I used the button on your site and I also add favorite url on my technorati site..nothing worked. But I will try it again....Your posts are very helpful!!

    ReplyDelete
  4. This, All about graphic header, is an old post, but please read it first and if it doesn't satisfy you, comment again to remind me.

    ReplyDelete
  5. You rock! This totally worked. Thank you for helping me out. It's cool that helpful people like you are available!

    ReplyDelete
  6. For Vero,

    If you are referring to the Technorati button just above my profile in the left sidebar, I just tested it and it worked OK. Please try again. And thank you for trying to add me as your Technorati favorite.

    ReplyDelete
  7. Hi...I tried again..I also found your profile on Technorati to click on button "Favorite it" that is usually below authority...but it wasn't there. I don't know. May be there is something wrong on my site. I will try to sort it out. ;-)

    ReplyDelete
  8. ok.....you are there..took a bit of clicking though..Honestly since I have started (2+ months ago) I have learned a lot...All kinds of problems, like the technorati one, are the best teachers :-)
    Keep up!!

    ReplyDelete
  9. I found your blog helpful to me , am newbies on blogging

    ReplyDelete
  10. put i noticed that this is applicable to blog posts

    and not for comments that in posts it opens in a new window contrary to comments.Am I wrong?

    ReplyDelete
  11. النداوى

    If you are trying to make links in comments open in new tab/window, unfortunately Blogger does not allow that.

    ReplyDelete
  12. I love your website. I am always searching for ways to do differnt things w/ blogger and I can always find and easy and simple answer here! Love it!!

    ReplyDelete
  13. Thanks for your kind words Mama

    ReplyDelete
  14. Just wanted to say Thank you, Thank you, Thank you. It was so super easy. This was the first time I ever tried it and it was a piece of cake thanks to your simple instructions. :-)

    ReplyDelete
  15. a href="http://www.bloggertipsandtricks.com/2006/09/how-to-make-links-open-in-new-windows.html">How to make links open in new

    ReplyDelete
  16. hiii i enjoy this with my favorite cigar online

    ReplyDelete
  17. Thank you for creating this - very helpful!

    ReplyDelete
  18. Can you tell me how to make photos open up to the larger image in a separate window?

    Thanks!

    Sandra

    ReplyDelete
  19. Just look for <a href="...." and add the attribute target="_blank" anywhere before the matching closing tag > or to make explanation, target="_blank">

    ReplyDelete
  20. Sandy or Sandra,

    Sandy, check this out first - Testing Blogger image upload to open in new window and leave a comment again.

    ReplyDelete
  21. Just wondering if there is a way to permantly make this available for all links on your blog? I would love it for every link, photo and such that I put up opens in a new tab, window. Thank you very much in advance. You guys are life savers.

    ReplyDelete
  22. I don't think making every link open in new window is a good idea. For example, for me, those that link to the same blog don't open in new window.

    ReplyDelete
  23. OK, I hate to admit to being this tech challenged. But I was. Relevant term being WAS. You gave clear clean answers that helped me even though my link was to an outside URL and the HTML did not look exactly like example. The demo was clear enough to figure out my issue. THANKS

    ReplyDelete
  24. I get the adding a link part, but when I add the target part, and click on check link I keep getting a page not found error. What am I doing wrong?

    ReplyDelete
  25. Peter never mind the previous comment...I finally got. Thanks for your help.

    ReplyDelete
  26. Thanks for posting this. I'm brand new to blogging, and these sorts of tips really help a lot.

    Much appreciated!

    ReplyDelete
  27. Thank you! I just went to a blogging workshop and they recommended opening links in a new window. Thanks for showing me HOW to do it!

    ReplyDelete
  28. Thank you! This is very useful for newbies who like to play wth HTML, like myself:)

    ReplyDelete
  29. Hi, Peter, thank you for sharing. I know the target="_blank" trick to have a link in my blog.booksonfirst.com open in a new window, but tried using it today without success. After I published the post, I viewed the post and tried clicking on the anchored text which went straight to the linked website, replacing the blogpost in the same window. Has anything changed since August 2009 (with the new editor, perhaps?) or do I need to wait a little while after publishing for that feature to kick in?

    ReplyDelete
  30. Changed? Unlikely. Send me the actual HTML hyperlink code and I will check what is wrong.

    ReplyDelete
  31. CAN'T BELIEVE I DID IT! yessss! thanks for the dummy walk thru!

    ReplyDelete
  32. Dang it! I can not get this to work. I know it is probably just something I am not doing right. I have been trying for two days and it keeps not working.

    What I really want is to have all links in my (blogger) blog open in new windows. We don't have a lot of links that we include but several people have asked if we can make it so things open in a new window.

    What am I doing wrong?

    Thanks for your help!

    amberloo22@aol.com

    ReplyDelete
  33. This post is for making a specific link open in new tab/window. What do you mean by "all links" open in new Window? If I guess correctly what you want, then that have to be done via editing the template.

    ReplyDelete
  34. I am trying to make an anchor link to a wiget, using the html formula above, with no luck.

    On this Blog

    http://syndicatedzinereviews.blogspot.com/

    I want to make this text

    >> Blog Archive<

    into a link that goes to this wiget

    "widget BlogArchive" id="BlogArchive1"
    h2 Blog Archive /h2

    Thanks

    ReplyDelete
  35. Are you trying to do that in the template editor?

    ReplyDelete
  36. so far, no. i know very little about html. i have been trying to make a link like any other, inserting it into a List wiget or a Link List wiget.

    ReplyDelete
  37. If you add the link via a Link List gadget, I believe it will not open in new window (I myself always use a HTML/Javascript gadget to make my own link list) and if you want to change that you probably have to edit the template.

    ReplyDelete
  38. I tried this and the code
    target="_blank" showed up in the actual link on my blog and didn't open a new tab when I clicked it. What am I doing wrong? Also, do you know how people get their "contacts" to open in a new tab? Like the list of other blogs they visit that they often put on the side of their blog?

    ReplyDelete
  39. Thanks for posting this. I am wondering where to place target="_blank" if the code is href (it goes to an amazon astore link).

    ReplyDelete
  40. Usually at the end but it should still work at other places

    ReplyDelete
  41. "(I myself always use a HTML/Javascript gadget to make my own link list) and if you want to change that you probably have to edit the template."

    Could you please expound on this? I'm looking to have external links (aka "gadgets") in the sidebar open in a new window. Thanks.

    ReplyDelete
  42. i comment for testing anchor text
    so plz dont remove it my blog

    ReplyDelete
  43. Thank you for this tip and for making it extra clear how to edit html! This beginner appreciates it. Sometimes it doesn't work, so I have to redo it, not sure why this happens.

    It's disappointing that there is not a simpler way to do it on Blogger, even though on Google Sites all you have to do is check a box.

    ReplyDelete
  44. Thanks for the tip, worked out fine. Now I am wondering if I can resize the linked window so it will open up smaller than my original page. Any code for this?

    ReplyDelete
  45. Extremely helpful, thank you, but one has to do this "fix" for every link, right? I have a ton of links--is there no preference so that links will always open in new windows?

    Thanks again.

    ReplyDelete
  46. Hi Peter! It's me once again...

    I've tried using target="blue" and it works

    The Kablogs Journal

    ReplyDelete
  47. Hi Peter,
    Tried your method to do anchor text but ended up with opened to page that: "sorry, the page you are looking for does not exist."What is wrong?

    ReplyDelete
  48. oke. i'm going to apply how to make hyperlink open in new window and anchor text. Regard likesmedia

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics