Thomas Leigh Diary

Blogger: menu items opening in a new window

In Blogger there is one particular gadget serves as the main menu of Your site. It is called "Pages" - what refers to Blogger pages feature (separate sections of a site's content). Whatever pages You create - they will be included and displayed in the menu generated by this gadget. Furthermore, You can also incorporate external links into it - either to other websites or... particular posts already existing on Yours. As a final advantage of using the "Pages" gadget You can easily manage all its items, changing its order by simple drag'n'drop.

The gadget, however, has some weakness: it doesn't provide the "target" attribute to hyperlinks. In other words: if You'd like a particular link (item) to be opened in a new window - You can't (because of lack of this feature within the gadget's configuration). Fortunately You can achieve this using jQuery - and without a need of directly editing the main template of Your site.

First, let's begin with implement jQuery in Blogger - as a result of which You will be able to use it on Your website. You can simply achieve this by using "HTML/JavaScript" gadget.

jQuery implementation on Blogger:

1. Enter the "Layout" section in the Admin Panel of Your Blogger website.
2. Find "Add a Gadget" link positioned the lowest.
3. Click it, find and select the "HTML/JavaScript" gadget. You may name it ("Title" field) as You desire (but remember that the name will be displayed on the site).
4. Paste following code into the "Content" field:
   
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
   
   (this code is responsible for loading jQuery alongside the rest of Your site in order for it to be enabled)
5. Click "Save" button.

Now let's improve the "Pages" gadget by making particular link opening in a new window:

1. In the "Layout" section find "HTML/JavaScript" gadget You've just created and click "Edit" link attached to it.
2. At the end of the content which already exists in the "Content" field paste following code:
   
   /* Menu items opening in new window */
   $('#PageList1 a:contains("word")').attr("target", "_blank");
   
   (replace "word" with a word which is (or is a part of) a link You want to be opened in a new window)
3. Click "Save" button, refresh Your site and check - Your link should now open in a new window.