Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Friday, November 26, 2010

Open Blogger Links in New Tabs

Here's a quick and easy one. For all I know, you might have all kinds of reasons as to why you want to have your links to open in new tabs. If I had to guess, I'd say you want your readers to keep exploring/crawling your blog while always having a chance of going back to the the referring page (where they came from).

You have a higher chance of keeping your readers in your blog if your blog pages are opened in multiple tabs. If all your links open in a single tab, how many of your readers will actually hit the 'back' button to go back to your main page and check your other posts and links? When you make your links open in a new tab, you force your readers to somehow go back to your main page.


All reasons aside, here's how you can do it.


If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface:
Go to Dashboard - Template - Backup/Restore - Download Full Template - Close -  Edit HTML - Proceed - 

Paste the following code right ABOVE <b:skin>:
<base target='_blank'/>
_
Save template and you're done. Here's how your template should look like with the code in place:


Note: After adding this code, by default all your links will open in a new tab. If you want to force your link to open in the same window, link you tag as such:
<a href="LINKURL" target="_self">This link will open on the same window</a>
.

Open Specific Links in New Tabs

It's easy to make all links to open in new tabs, because it can be done by adding a single line. If you want only specific links to open in a new tab, it's a different story. Same concept though. Finding the correct HTML portion is the hard part. I'll walk you through a quick example. Let's say I want my posts to open in new tabs when the title is clicked.

Step 1

First, inspect the link and try to find any class or ID associated to it. If you're not sure how, check out this tutorial first. See the example below.



In this case, the link is defined under the 'post-title entry-title' class. So go edit this template's HTML - and find for 'post-title entry-title'.


Step 2

When you've finally gotten there, look for a 'href' tag few lines below the class that you have followed. See the image below for an example:


Step 3

Now that you have found the HTML portion that defines your link, all you have to do is change it to make it open in a new tab. By default, a link is defined as such:
<a href="http://www.southernspeakers.net/">Voices From South V2.0</a>
.
To make it open in a new tab/window, you should change it to:
<a href="http://www.southernspeakers.net" target='_blank'>Voices From South V2.0</a>
.
It's that simple. Just add 'target='_blank' at the end. So in our post title example, this is how the code should look like:


Clearly, I have chosen a wrong example for this tutorial. In this particular example, you have to add 'target='_blank' twice as there are two 'hrefs' under the class.

Have fun!

92 comments:

  1. Hi,

    For some reason, this doesn't seem to be working for me... http://faubbeats.blogspot.com/

    Thanks for any help.

    ReplyDelete
  2. Faubs: I have tried in your blog, and it does work. Perhaps you've missed the underscore? Just paste this above <b:skin>:

    <base target='_blank'/>

    ReplyDelete
  3. After double-checking, this works on the Flock browser for me (which I use) but not on Safari, which I know is much more widely used. Any advice?

    ReplyDelete
  4. Faubs: Now it seems to be working fine, with Firefox and IE. This is a standard HTML tag, I'm not sure why it doesn't work with Safari. I guess this is something you should consult with them (the Safari support team). Sorry I couldn't be much more of a help.

    ReplyDelete
  5. Excellent instructions - thanks for that, it works perfectly.

    ReplyDelete
  6. @Barking Spider: Glad you think so. Enjoy your stay here. Cheers.

    ReplyDelete
  7. Thanks for your great tutorials. They've helped me with several issues. Brilliant work you do.

    But I have problems with this one. I want the links in my posts to open in a new tab. Only the content/links in my posts and not the title or any other link on my blog.

    I've found this code segment that should be the proper one, but there's no href (Deliberately put dots between div):

    <.d.i.v. class='post-body entry-content'>

    <.d.i.v. style='clear: both;'/>
    <.d.i.v.>

    What should I do?

    ReplyDelete
  8. @Asbjørn Skødt : You're welcome. Unfortunately, there is no automatic way to make all your post links to open in a new tab. You can do it manually though, by clicking on Edit HTML. A link will look like this:

    <a href="http://www.southernspeakers.net/">Voices From South V2.0</a>

    You have to add target="_blank" to the back of it, as such:

    <a href="http://www.southernspeakers.net" target="_blank">Voices From South V2.0</a>


    If you want only your post links to open in new tabs, you've to do it manually one by one. There might be some javascript that will simplify the process, but javascript is not moy field. Hope this helps. Cheers.

    ReplyDelete
  9. Okay, sorry to hear that. Thanks for your valuable help none the less.

    ReplyDelete
  10. It worked! And I don't know HTML programming. I had to use this new tab option because my top-of-page news feed had been running as a changing news headline, but all links opening in new tabs had screwed it up so a list of news headlines appeared instead of the single changing news headline. My question today is, why is my news feed opening in one line anyway, instead of as a list. By the way, I want it to remain as one line, but I don't know how my 'happy accident' has occurred all this time. I need to know why in case I start another blog, but can't get the one-line feed for whatever reason. Thanks to you or to anyone who can enlighten me.

    ReplyDelete
  11. @Satchel Pooch: Glad you asked. There are two versions of newsreel gadget. One has a long vertical list, and another one is just a line, as in your case. You don't have the option to change from one to another just by clicking edit on this gadget. But, if you go to Dashboard - Design - Page Elements and add your newsreel gadget below your header or above your footer (Or any 'Add a Gadget' link that belongs to a long stretching section), you will get the one-line newsreel. But if you click on 'Add a Gadget' on your sidebar, you will get the long vertical list. Basically, it depends on which 'Add a Gadget' link that you click on. Hope this is what you're looking for.

    Cheers and God bless.

    ReplyDelete
  12. @Satchel Pooch: No problem at all.

    Cheers and God bless.

    ReplyDelete
  13. Is there a way to make just my external links (links gadget) open to new tabs?

    I can't find how to edit the html for these links and so I poked around in the template html to try and place the base tag in a strategic location but to no avail

    ReplyDelete
  14. @David: Blogger's engine uses variables to fetch your linklist data. As such, it is not completely transparent for us to do any HTML modification. In other words, altering (re-engineering should be the right word) LinkList's HTML code isn't the best solution.

    Instead, this is what I suggest. Remove your linklist gadget, and use HTML/Javascript gadget instead. And this is what you should insert in your HTML (constructed from your linklist gadget):
    <h2>Links</h2>
    <div class="widget-content">
    <ul>
    <li><a href="http://www.columbia.edu/" target="_blank">Columbia Home</a></li>
    <li><a href="http://astro.columbia.edu/" target="_blank">Astronomy Dept.</a></li>
    <li><a href="http://outreach.astro.columbia.edu/" target="_blank">Columbia Outreach</a></li>
    <li><a href="https://docs.astro.columbia.edu/" target="_blank">Astro Internal</a></li>
    </ul>
    </div>

    Cheers and God bless.

    ReplyDelete
  15. @David: Happy to help. Cheers:)

    ReplyDelete
  16. @belinka: Glad you like it. Enjoy your stay here.

    Cheers and God bless.

    ReplyDelete
  17. Thank you so much -- this was incredibly helpful!

    ReplyDelete
  18. @Jeff: You're welcome. Cheers.

    ReplyDelete
  19. Many Many Many thanks buddy. It work for me. Now all links open in new tab. Its really good trick.
    Thanks buddy.

    ReplyDelete
  20. If we follow this process, then adsense add also open in new tab?

    ReplyDelete
  21. @Anonymous 1: No problem at all. Glad you find it useful. Cheers.

    @Anonymous 2: I don't think so. AdSense links are dynamically generated. Only based links will open in new tabs. Feel free to try it though. Cheers.

    ReplyDelete
  22. hello thanks for your tutorial ya :)

    ReplyDelete
  23. @alif: No problem mate, cheers :)

    ReplyDelete
  24. it's working
    http://smahkin.blogspot.com/

    ReplyDelete
  25. @SHREE: Glad it worked mate. Cheers.

    ReplyDelete
  26. but how to open the links from the "link gadget" in new tab? any idea?

    ReplyDelete
  27. @Anon: Which link gadget? Are you talking about the linklist gadget? Linklist gadget open links in new tabs by default the last time I checked.

    ReplyDelete
  28. Hey,
    thank you very much for your work. I have yet modified my page with your great blog.
    First my page:
    http://derchaotentest.blogspot.de/
    I don´t find the code of the page "xing" in the html code. Is your device possible for dynamic views ?
    Another point:
    I have checked my site on chrome,ie and firefox. The Bacckground of the headerline in firefox is instead of white semitansparent. Why? also text from static pages is sometimes cutted at the end of the page. Can you help me?
    Thanks a lot
    Felix

    ReplyDelete
  29. Hi Felix,

    1) What do you mean by 'xing'? I'm not quite following..

    2) Ar you referring to your header? What color are you seeing in Firefox again? (you didn't mention the color)

    3) Find for this lines in your template:

    .viewitem-panel .viewitem-inner {
    top: 100px;
    padding-bottom: 120px !important;}

    And change it to:

    .viewitem-panel .viewitem-inner {
    top: 100px;
    padding-bottom: 120px !important;
    height: auto !important;
    }

    Let me know how it goes :)

    ReplyDelete
    Replies
    1. to 1) Sorry, xing is the name of one of the pages in the Header Bar. I want to open this hyperlink in a new tab, but I don´t find the element in the html-code.

      to 2) the header is in ie and chrome white but in firefox it seems like a light grey (only the Header), the rest of the page has got a white backround. What´s wrong?

      to 3) it works fine ;)

      you do really a good job!

      Delete
    2. Hi FL,

      1) I can't think of a specific way to open the header links in a new tab. But even if there's a way for it, I'd strongly recommend you not to do it. This is because there's a huge side-effect when you begin to edit your template's HTML.. Once you've editted your Dynamic View template's HTML, it will not get new updates.. To be specific, the jquery version defined in your template will not be updated when Blogger releases the next update. As a result, lots of features, including your comment link and share buttons, will not be clickable..

      2) Ah, I see it now.. Not sure why it's not white, but here's how you can fix it.. Add the following to your CSS:

      #header-container #header.header .header-bar span.title {
      background: white url("http://1.bp.blogspot.com/-ssn4Dw4944I/UAv6GEArnII/AAAAAAAAAN4/JCTrsGx9YL4/s100/Symbol.png") no-repeat center !important;
      }

      Cheers :)

      Delete
  30. to 1) you´re right. the disadvantages are bigger.
    to 2) good job ;)
    see ya

    ReplyDelete
  31. Thank you so much! Worked perfectly!

    ReplyDelete
  32. Is there any way to open the hyperlinks on my blog's comment sections provided by the spam commenters in a new tab?

    ReplyDelete
    Replies
    1. The new threaded comment is running from scripts. We can't use HTML to open links in new tabs anymore.

      Delete
  33. Hey Yoga, once again great site. Any time I have a Blogger question I come here first as the instructions are succinct and easy to follow!

    This particular posting worked well, just what I needed! After following the directions exactly though and clicking save HTML and close, I noticed that the mobile site example immediately lost it's colours. I double checked this on my smart phone and it's true! My blog is at www.daves80s.com.

    Any advices?

    ReplyDelete
    Replies
    1. Hi Dave,

      That is odd. Try this. When you reverse the tweak, does the colors on your mobile template go back to normal?

      Delete
  34. Hi Yoga,

    New blogger here...and your tutorial is quite helpful and I've implemented this already for some of my links.
    Now I have the pages list gadget which contains links to 4 pages. I only want one specific link to open in a new page and in html the links aren't broken down so don't know how to proceed.. Any advice?

    Many Thanks
    Alex

    ReplyDelete
    Replies
    1. Hi Alex,

      Whether or not it is possible for specific links to be opened in new tabs depends on the kind of template you're using. Let's have a look at your blog. What's your blog's address?

      Delete
    2. Hi Yoga, yes the address is choulachou.blogspot.com. This is for the 3rd link (shop) of the pages list only.
      Thanks.

      Delete
    3. If you want only a specific link from the menu to open in a new tab, you're gonna have to replace the menu with an HTML/Javascript gadget. Which means you need to manually write the links in HTML. It's fairly easy. This is what you should have in your gadget:

      <ul>
      <li class="selected"><a href="http://choulachou.blogspot.com/">HOME</a></li>
      <li><a href="http://choulachou.blogspot.com/p/about-us.html">ABOUT US</a></li>
      <li><a href="http://www.choulachou.com" target="_blank">SHOP</a></li>
      <li><a href="http://choulachou.blogspot.com/p/contact-us.html">CONTACT US</a></li>
      </ul>

      Cheers..

      Delete
    4. Hi Yoga,

      Thank you for all of your posts, they have been very helpful! I, too, have a page list at the top of my page where I would only like to have certain pages open in new tabs. Would you be willing to look at my page

      http://thevintagechanteuse.blogspot.com/

      and see if you could help me figure out how to get "5th Street Vintage" and "Shop" page links at the very top to open in new tabs without everything else opening in new tabs? Thank you so much!

      Delete
    5. Hello Christi,

      You need to replace your Linklist gadget with a HTML/Javascript gadget if you want to have some of your links open in a new tab. The downside is that you're gonna have to continue to use the gadget this way - meaning you'll have to add links via HTML. It's not hard, if you take a look at the links below you'll get how they're structured..

      Anyways, this is what you need to in your HTML/Javascript gadget to have Shop and 5th Street Vintage to open in a new tab (BTW, I see your shop link points to no URL).

      <div id="LinkList1" class="widget LinkList">
      <h2>Tabs</h2>
      <div class="widget-content"><ul>
      <li><a href="http://thevintagechanteuse.blogspot.com/">Home</a></li>
      <li><a href="http://thevintagechanteuse.blogspot.com/p/about-us.html">About</a>/li>
      <li><a href="http://thevintagechanteuse.blogspot.com/p/blog-page.html">Contact Us</a></li>
      <li><a href="http://yesterdayslady.net/5th_street_vintage" target='_blank'>5th Street Vintage</a></li>
      <li><a href="http://" target='_blank'>Shop</a></li>
      </ul></div></div>

      Delete
  35. Hello I have started two blogs (only one is online as yet) recently and your posts have been of great help to be able to customize them as you explain all steps very clearly and it's easy to follow... Thank you for this !

    I have set my blog to all link opening in new window (I just don't remember how I did this now...) but now I am trying to create two anchors within the same post as it will be in three languages... it works but it opens in a new window...

    Is there another post within your blog which explains How to open specific link/anchor within the same post once all the links are set to open in new tab, please ?

    Many thanks in advance for your help

    ReplyDelete
    Replies
    1. Hi there..

      Sorry for the late reply. In your post, when you switch to the HTML view, your anchor links would look something like this (so to speak):

      <a href="http://southernspeakers.net/">Some Link</a>

      Simply add 'target=_self' to force your link to open in the same tab, as such:

      <a href="http://southernspeakers.net/" target="_self">Some Link</a>

      Good luck! :)

      Delete
    2. Hi, thank you for your reply.
      I have tried but I am not sure I know to place what needs to be added...
      I have something looking like this
      sp=code for color (text) end of sp

      I tried this...
      sp=code for color (text)end of sp

      I did a publish test : it opened in the same window (hooray !) BUT a blank dashboard page (:0(...

      I think I might need a bit more assistance (and luck) please... :0) (I had to shorten and miss letters in the code otherwise my comment was refused because of TARGET &/or SPAN in the code... Hope it is still readable that way...

      Delete
    3. Just a quick reply. I could not see your link format as it has already been converted to hyper links. Here, use the page below to encode your HTML to be pasted in this comment section - this should retain the original HTML:

      http://www.dan.co.jp/cases/javascript/encode_entities.html

      Delete
    4. Thank you for being so patient with me and responding so quickly... I knew I was missing something here as I could see a complete code in your comment... Thank you for this new tip !

      As it is now
      <a href="http://www.blogger.com/blogger.g?blogID=xxxxx#anchor_English"><span class="Apple-style-span" style="color: #e69138;">In English</span></a>

      with added Target (maybe not where it should be)

      <a href="http://www.blogger.com/blogger.g?blogID=xxxxxxx#anchor_English/" target="_self"><span class="Apple-style-span" style="color: #e69138;">In English</span></a>

      So opens in the same window but the window is a blank dashboard page... (Blog is not online yet, hope it is not a problem)

      Delete
    5. I think you've got your initial issue covered - to force a link to open in the same tab. What you're facing now is more like a defect in the link itself. Anything that starts with 'http://www.blogger.com/blogger.g?' is a bad link to begin with. In order for anchor links to work, you need to publish the post first, and get its direct link. You can make your blog private first if you don't want to go live yet, but you definitely can't work with unpublished links for anchors to work in Blogger.. Once published, edit your post again, and use its full published URL in your links. Just a heads up, should everything work fine, and you decide to HTML-edit your post for some reason, your links will get effed up again, and you need to re-touch them. At least that's what I noticed the last time I dealt with anchor links.

      I did a post on it before, if you're interested:
      http://www.southernspeakers.net/2010/11/jump-to-content-anywhere-in-page.html

      Delete
    6. Thank you very much ! I think you identified perfectly the problem! I am sure it will work once the blog is published and once I have replaced the faulty URL with the actual one.
      Thank you again for your kind help and thorough replies.
      Wishing you a very good week !

      Delete
    7. You too have a wonderful time ahead :)

      Delete
  36. I finally managed to get along and that because of you and thank you!I inserted some code in the blog template and nothing has changed for example I want to apply" reed moore button".I did then no copy of the template and do not know how to remove those codes.Again nothing happened bad with the blog, only I could not do it, you can help me?Thank You!

    ReplyDelete
    Replies
    1. Hi Popey,

      If I'm getting you right, are you saying your Read More script isn't working properly? Where did you get the script from, and how exactly did you insert it to your blog?

      Delete
  37. Apologies if you have covered this before. I am trying to make "Pages" "Web Address" link open to new tab. I cannot find any similar code in the HTML to experiment with.

    ReplyDelete
    Replies
    1. Hi Christine,

      I hope you're referring to a non-dynamic template. You need replace your Pages gadget with an HTML/Javascript gadget, and link them manually. If you already have a pages gadget in place, let me have a look at it, and I'll provide you with the HTML that you need to be entered into the HTML/Javascript gadget.

      Cheers.

      Delete
    2. I'm having the same problem as Christine. My blog has 6 Pages, but only one of them goes directly to a new site, and I'd like to have only this one open in a new tab. Do you have the HTML for this posted online?

      Delete
    3. Yeap there is a way. You need to replace your Pages gadget with a HTML/Javascript gadget. If we bring this discussion to the forum I (or someone else) would be happy to walk through the code that you'll need.

      That said, it must be noted that you'll lose the 'highlight current tab' feature if you were to switch to a HTML gadget - as in all the tabs will have the same color.

      Delete
  38. How to make only the links in the sidebar to open in a new tab.I don't want to open posts in a new tab.Please help

    ReplyDelete
    Replies
    1. That is a little tricky. Depending on the template you're using, you need to edit your HTML, and add target="_blank" to all dynamic link reference within your template. Problem is, these links are not very straight forward, and chances are you might not find all of them.

      Delete
  39. Is there a way to just have a single page open in a new tab? On my site (http://diegogranados.com/) I'm trying to get my Resume page to open in a new window.

    ReplyDelete
    Replies
    1. Not if you're using a Pages gadget as your tab bar. You need to use a HTML/Javascript gadget to do this, and slap a 'target=_blank' tag to the Resume link if you want that link alone to open in a new tab. You need some HTML to get this done. If you need help with this, go to Blogger Help Forum and create a discussion there, and let me know its link once it's published.

      Delete
  40. I have tried on my Blog today, and it seems to be working just fine. Thanks for postings this

    ReplyDelete
  41. Hey Yoga, Can you please take a look at my Blogger website, its www.irobotgaming.com I just need the "Gameplays" button on my menu bar to open in a new tab. Is there a way to do this without replace my complete link list? Would really appreciate your help.

    ReplyDelete
  42. Is there any way to enable lightbox with Dynamic views? Either with CSS code or editing the HTML?

    ReplyDelete
    Replies
    1. Hi Ryan,

      I'm afraid not. DV templates have own structures that are not editable - there isn't much we can do about this, unfortunately.

      Delete
  43. Thanks for the clear pictorial explanation. I have got it done.

    ReplyDelete
  44. Bro,

    This simple solution has solved a lot of issues for me. I had a peculiar problem, I have a blog where I want to open links in my home page into a new tab as my blog links all posts to external sources. I used the following code before (/head) in my Template.

    (base target='_blank'/)

    It worked well but the problem was it opened all links in the blog in a new tab since the above code was generic in nature. As an example I could not add even a "Back to Top" widget for the simple reason that even this functionality opened in a new tab which to say the least is irritating for the user.

    Thanks to your simple and lucid solution, this major problem is solved.

    Thanking you,

    ReplyDelete
  45. I am trying but it doesen't seems work.
    I need new images open in a new tab instead that in the gallery right now.
    any help ?

    ReplyDelete
  46. YES! Thank you.........

    You just saved me a lot of time and tedious effort editing all links in the blog i maintain to "open in a new page"!

    And i just wanted to let you know i was a bit concerned when the b:skin line in your example was not an exact duplicate of the b:skin line in my template.

    Yet everything is working to a !T!hanks!

    Peace....... francis

    ReplyDelete
  47. YASSSSSSS! Thank you so much! I've been searching and searching for an answer to this. So many bloggers got it wrong, but you did not! Thank you!!

    ReplyDelete
  48. I wish I had found this a few months ago when I started blogging. Thanks so much for the info, it is so helpful!

    ReplyDelete
  49. Thank you so much! Worked like a charm!!

    ReplyDelete
  50. yoboy
    thank you i applied the codes and first it didn't work and i reverse what I did ,I did it again somehow it worked thank you so much here is my blog
    http://marydgos.blogspot.com/

    ReplyDelete
  51. How to make links of particular gadgets in my blog open in same tab ? please help me

    ReplyDelete
  52. I'm afraid we have very little control on this, unless if the gadget is a third party one added via the HTML gagdet.

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.