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>:
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:
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.
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'.
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:
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:
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!
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!
Hi,
ReplyDeleteFor some reason, this doesn't seem to be working for me... http://faubbeats.blogspot.com/
Thanks for any help.
Faubs: I have tried in your blog, and it does work. Perhaps you've missed the underscore? Just paste this above <b:skin>:
ReplyDelete<base target='_blank'/>
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?
ReplyDeleteFaubs: 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.
ReplyDeleteExcellent instructions - thanks for that, it works perfectly.
ReplyDelete@Barking Spider: Glad you think so. Enjoy your stay here. Cheers.
ReplyDeleteThanks for your great tutorials. They've helped me with several issues. Brilliant work you do.
ReplyDeleteBut 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?
@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:
ReplyDelete<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.
Okay, sorry to hear that. Thanks for your valuable help none the less.
ReplyDeleteIt 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@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.
ReplyDeleteCheers and God bless.
Thank YOU, and God bless!
ReplyDelete@Satchel Pooch: No problem at all.
ReplyDeleteCheers and God bless.
Is there a way to make just my external links (links gadget) open to new tabs?
ReplyDeleteI 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
@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.
ReplyDeleteInstead, 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.
Thanks so much!!
ReplyDelete@David: Happy to help. Cheers:)
ReplyDeleteAwesome! thanks!
ReplyDelete@belinka: Glad you like it. Enjoy your stay here.
ReplyDeleteCheers and God bless.
Thank you so much -- this was incredibly helpful!
ReplyDelete@Jeff: You're welcome. Cheers.
ReplyDeleteMany Many Many thanks buddy. It work for me. Now all links open in new tab. Its really good trick.
ReplyDeleteThanks buddy.
If we follow this process, then adsense add also open in new tab?
ReplyDelete@Anonymous 1: No problem at all. Glad you find it useful. Cheers.
ReplyDelete@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.
hello thanks for your tutorial ya :)
ReplyDelete@alif: No problem mate, cheers :)
ReplyDeleteit's working
ReplyDeletehttp://smahkin.blogspot.com/
@SHREE: Glad it worked mate. Cheers.
ReplyDeletebut how to open the links from the "link gadget" in new tab? any idea?
ReplyDelete@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.
ReplyDeleteHey,
ReplyDeletethank 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
Hi Felix,
ReplyDelete1) 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 :)
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.
Deleteto 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!
Hi FL,
Delete1) 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 :)
to 1) you´re right. the disadvantages are bigger.
ReplyDeleteto 2) good job ;)
see ya
Glad it worked :)
DeleteCheers!
Thanks!!
ReplyDeleteDon't mention it :)
DeleteThank you so much! Worked perfectly!
ReplyDeleteIs there any way to open the hyperlinks on my blog's comment sections provided by the spam commenters in a new tab?
ReplyDeleteThe new threaded comment is running from scripts. We can't use HTML to open links in new tabs anymore.
DeleteHey 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!
ReplyDeleteThis 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?
Hi Dave,
DeleteThat is odd. Try this. When you reverse the tweak, does the colors on your mobile template go back to normal?
Hi Yoga,
ReplyDeleteNew 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
Hi Alex,
DeleteWhether 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?
Hi Yoga, yes the address is choulachou.blogspot.com. This is for the 3rd link (shop) of the pages list only.
DeleteThanks.
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:
Delete<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..
Hi Yoga,
DeleteThank 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!
Hello Christi,
DeleteYou 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>
Works perfectly, thank you!
ReplyDeleteYou're most welcome Angie :)
DeleteHello 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 !
ReplyDeleteI 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
Hi there..
DeleteSorry 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! :)
Hi, thank you for your reply.
DeleteI 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...
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:
Deletehttp://www.dan.co.jp/cases/javascript/encode_entities.html
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 !
DeleteAs 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)
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.
DeleteI did a post on it before, if you're interested:
http://www.southernspeakers.net/2010/11/jump-to-content-anywhere-in-page.html
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.
DeleteThank you again for your kind help and thorough replies.
Wishing you a very good week !
You too have a wonderful time ahead :)
DeleteI 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!
ReplyDeleteHi Popey,
DeleteIf 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?
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.
ReplyDeleteHi Christine,
DeleteI 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.
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?
DeleteYeap 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.
DeleteThat 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.
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
ReplyDeleteThat 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.
DeleteIs 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.
ReplyDeleteNot 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.
DeleteI have tried on my Blog today, and it seems to be working just fine. Thanks for postings this
ReplyDeleteYou're most welcome :)
DeleteThank you! Worked like a charm :)
ReplyDeleteHey 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.
ReplyDeleteHi Craig,
DeleteHave you got this sorted?
Is there any way to enable lightbox with Dynamic views? Either with CSS code or editing the HTML?
ReplyDeleteHi Ryan,
DeleteI'm afraid not. DV templates have own structures that are not editable - there isn't much we can do about this, unfortunately.
Thanks for the clear pictorial explanation. I have got it done.
ReplyDeleteIt works! Thanks so much!
ReplyDeleteBro,
ReplyDeleteThis 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,
I am trying but it doesen't seems work.
ReplyDeleteI need new images open in a new tab instead that in the gallery right now.
any help ?
What's your blog's URL?
DeleteYES! Thank you.........
ReplyDeleteYou 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
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!!
ReplyDeleteDone, Thanx
ReplyDeleteThank you, most helpful
ReplyDeleteI wish I had found this a few months ago when I started blogging. Thanks so much for the info, it is so helpful!
ReplyDeleteThank you so much! Worked like a charm!!
ReplyDeleteyoboy
ReplyDeletethank 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/
Maria, glad you got it sorted..
DeleteHow to make links of particular gadgets in my blog open in same tab ? please help me
ReplyDeleteI'm afraid we have very little control on this, unless if the gadget is a third party one added via the HTML gagdet.
ReplyDelete