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>:

?

1 2	<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:

?

1 2	<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:

?

1 2	<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:

?

1 2	<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.