How to open link from picture gadget in new tab Blogger

If you add a picture gadget from Blogger Layout and add a link to it, this link by default will open in the same window and obviously you do not want  the visitor to leave your site and go to another one, so in this tutorial we will solve that issue.

Link tag and attributes in HTML:

Before to solve this problem in Blogger theme you need first to understand how the link tag or <a> tag works in HTML, the general format of the <a> tag in HTML is:

<a href=”url”> clickable element </a>

The clickable element can be a normal text or an image, ex:

<a href=”link”> <img src=”image-url”/> </a>

To open the link in a new window or tab you need to add the target attribute:
<a href=”link” target=”_blank”> <img src=”image-url”/> </a>

How to open an image gadget link in a new window in Blogger:

To do the same in Blogger is not that easy if you do not understand how Blogger tags works, but don't worry we will expain that easely.

After you add the image using the Layout panel of Blogger you need to find the code of the image widget in your template.

Go to Theme ⇒ Edit Html then click on Jump to widget:

If you add more than one image you find their names like this: Image1, Image2..., the images are named by time adding order, after you click on the widget it will bring you to the widget opening tag in your theme, it will looks like this:

 <b:widget id='Image1' locked='false' title='' type='Image' version='2' visible='true'>

The closing tag of the widget is: </b:widget>

Between the two tags looks for the link's tag, it will be like this:

<b:tag cond='data:link' expr:href='data:link' name='a'>  

Bellow the line of this tag write the code:

<b:attr name='target' value='_blank'/>

So what is this <b:tag>***</b:tag> element?

The b:tag is a Blogger tag that can create HTML element with or without condition, for the example bellow code:

<b:tag name="div">


Will create a normal HTML <div> element.

The <b:tag> has two attributes:

- name="" : give the name of the HTML element you want to create (required)

- cond="": condition if true it will create the element (optional)

The <b:attr> tag:

As its name it will add an attribute for the element, in our example we create the attribute target="_blank" for the <a> tag created with the <b:tag>.

The b:attr tag has two attributes:

- name=" ": the attribute name (required)

- value=" ": the attribute value (required)

- cond='' '': a condition (optional)

You can also force Blogger to open all links in a new tab by adding this simple HTML code in the head section of your template:

<base target=’_blank’/>

Tell me in the comments if it works for you...

Post a Comment (0)
Previous Post Next Post