22 May 2011

How to make links open in new windows for Blogger blog?

If you design your blogs with lots of links to other blogs and web sites, you probably like to make the links to the other blogs and web sites open in a new browser tab or window (depending upon reader preference). That helps with reader retention (for you), and increases convenience (for your readers).

Image and video hosting by TinyPic

Unfortunately, in all of the Blogger GUIs, there's no selection for "Make links open in new window". If you want all links in your blog to open in a new window, you can do this with a simple template change as described below. If you want specific links to open in a new window, you will have to manually code each link individually.

To make all links open in new window is amazingly simple. Just sign into Blogger DASHBOARD > DESIGN > EDIT HTML to open template editor

Use keyboard shortcut ctrl+F to find <head> and immediately after that, add a single line
<base target='_blank' />

so that it become

<base target='_blank' />

Save the edited template and all links in your blog will now open in new tabs or windows.

If you prefer selective links not to open in new window/tab but to open in the same window, as you have now, add the attribute target="_self" for those links you want to open in the same window/tab.

Blogger who have multiple internal links, might not find the presented solution as acceptable since they might not like the idea to open ALL links in a new window, or to edit each link manually. The target is open in the new window just external links from your blog (what happens if the user clicks on your archives, or on the title, or on comment links, or on a javascript link?)
Here is a vanilla javascript solution, that you want to paste into your template just before the end of the body (if you're old-style template), or paste into a javascript widget:

Replace XXXXXX with the appropriate URL prefix.

<!-- code for turning all non-blog links to new page links -->
<script type="text/javascript" language="javascript">
   var arr = document.getElementsByTagName("a");  //get all links in the page
   for(var i = 0; i < arr.length; i++)
      if(arr[i].href.indexOf("XXXXXX.blogspot") < 0 //not links that are 'inside' blog
         && arr[i].href.indexOf("javascript:") < 0) //not javascript links
         arr[i].target = "_blank";

No comments:

Post a Comment


Related Posts Plugin for WordPress, Blogger...