How to create a new tab for a linked page on a Blogger website

Is there a way to make a link in Blogger open in a new tab?

I have a basic free template with limited pages.

I want to be able to ensure that when a specific text link is clicked, it opens the corresponding link in a new tab.

For example, if a visitor clicks on "Our Service" on my website, it should open link-10: examplee.com in a new tab.

I've attempted using target='_blank' but it doesn't seem to work for me. Here is the code I've been using:

    <b:widget id='LinkList210' locked='true' title='Menu' type='LinkList' 
  version='1'>
        <b:widget-settings>
          <b:widget-setting name='text-9'>Documentation</b:widget-setting>
          <b:widget-setting name='link-9'>http://www.example.com</b:widget-setting>
          <b:widget-setting name='text-8'> Services</b:widget-setting>
          <b:widget-setting name='link-7'>http://example.com</b:widget-setting>
          <b:widget-setting name='link-8'>http://www.example.com</b:widget-setting>
          <b:widget-setting name='text-10'>our services</b:widget-setting>
          <b:widget-setting name='link-5'>http:example</b:widget-setting>
          <b:widget-setting name='link-6'>http://www.example.com</b:widget-setting>
          <b:widget-setting name='link-3'>#</b:widget-setting>
          <b:widget-setting name='link-4'>#</b:widget-setting>
          <b:widget-setting name='text-1'>_Multi Dropdown</b:widget-setting>
          <b:widget-setting name='text-0'>Features</b:widget-setting>
          <b:widget-setting name='text-3'>__Dropdown 2</b:widget-setting>
          <b:widget-setting name='text-2'>__Dropdown 1</b:widget-setting>
          <b:widget-setting name='text-5'>_ShortCodes</b:widget-setting>
          <b:widget-setting name='text-4'>__Dropdown 3</b:widget-setting>
          <b:widget-setting name='text-7'>_Error Page</b:widget-setting>
          <b:widget-setting name='text-6'>_SiteMap</b:widget-setting>
          <b:widget-setting name='sorting'>NONE</b:widget-setting>
          <b:widget-setting name='link-1'>#</b:widget-setting>
          <b:widget-setting name='link-2'>#</b:widget-setting>
          <b:widget-setting name='link-0'>#</b:widget-setting>
          <b:widget-setting name='link-10'>http://examplee.com/</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
        <div class='widget-content'>
          <ul itemscope='' itemtype='http://schema.org/SiteNavigationElement'> 
            <li><a expr:href='data:blog.homepageUrl' target='_blank'>Home</a></li>
            <b:loop values='data:links' var='link'>
              <li itemprop='name'><a expr:href='data:link.target' itemprop='url' target='_blank'> <data:link.name/></a></li>
            </b:loop>
          </ul>
        </div>
      </b:includable>
      </b:widget>

Answer №1

This code snippet allows you to generate a link that opens in a new tab on your blogger website

 <a href="#" onClick="window.open('index.html','_blanck')">open in new tab</a>

Answer №2

If you're looking for a straightforward method, here's one: To create internal page links that open in the same tab (_self), utilize a PageList. For links that should open in a new tab/window (_blank), set up a LinkList and access your template to edit the HTML. Click on Jump To Widget and choose the LinkList option. You'll come across something similar to this:

<b:widget id='LinkList1' locked='false' title='Our Channels' type='LinkList' version='1'>
<b:widget-settings>
<b:widget-setting name='text-0'>Facebook</b:widget-setting>
<b:widget-setting name='link-0'>https://facebook.com/yourpage</b:widget-settings> 
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
      <li><a expr:href='data:link.target'><data:link.name/></a></li>
 </b:loop>

To ensure all links from this list open in a new tab/window, simply go to the 'li' section and insert target='_blank'. Like so:

<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>

Voila! Your links from the specified link list will now launch in a fresh tab or window.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display a single specific outcome within a React component's list

import {useState, useEffect } from 'react' import axios from 'axios' const Singlecountry = ({searchedCountries, setWeather, weather}) => { const weatherName = searchedCountries[0].capital console.log(weather) useEffect(() =&g ...

Using JavaScript, delete a class from an element

I am looking for a way to remove a specific class attribute from all elements on a webpage. The challenge is that I only have the class name as a reference, and cannot use any other identifiers like id or another class. Additionally, I cannot rely on JavaS ...

Concealing a hyperlink within a DIV by removing or hiding it

I am looking to temporarily hide or remove a specific link (team.aspx) within a drop-down menu, with the intention of adding it back in later. Here is my current code: <div id="nav_menu"> <ul id="nav"> <li class="current"><a href= ...

Breaking Free from Bootstrap Grids

I have a row with two Bootstrap columns - one wide and tall, the other short and narrow https://i.sstatic.net/u7WAf.png However, for mobile devices (targeted below lg), I want to change the column order to split into three sections Photo Consent Organis ...

Tips for recognizing a specific object ID within an array in order to modify the status of an element within that object

My goal is to accurately identify a specific panel within an expanded array and link that panel's ID to a button, while also ensuring the button is disabled when no panels are expanded or more than one panel is expanded. However, I am encountering iss ...

Problem with Gulp-Watch Functionality on Windows 7 - Node.js, NPM, and Gulp All Up and Running Fine

As someone who is new to the world of Node.js, NPM, and other modern tools designed to improve productivity and workflow, I find myself faced with some challenges. Below are the specifications: Node version - v8.10.0 Gulp CLI version - 2.0.1 Gulp Loca ...

Enhance Your Vue Tables with Unique Custom Filters

I'm currently working on implementing https://github.com/matfish2/vue-tables-2 in Vue 2.1.8. Everything seems to be functioning flawlessly, but I need to incorporate custom filters to format certain fields based on their values. In my options object ...

What is the best way to modify the background color of a whole div when hovering over it

Recently, I encountered a challenge while working on my website. I want to set up a link inside a div that changes color when hovered over. However, the desired effect is not quite coming out as expected. Before hovering, I aim to have a border around the ...

using post request axios to send parameters

I am looking to make a post request using axios with an object as the payload. employee:{ name: 'test', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d79687e794d6a606c6461236e6260">[email ...

Display an image corresponding to the selected radio button option

Looking for guidance on implementing this in VueJS You can find a starting point here I think it involves index matching, similar to how I did it with jQuery like this: $('.Colors > li').on('mouseenter', function() { var i = ...

Navigating Redirect Uri in Ionic for third-party API integration

After creating a webapp, I decided to venture into developing a mobile app using Ionic. The idea of making a progressive web app crossed my mind, but unfortunately Apple doesn't support it yet. (By the way, I'm still quite new to all of this) F ...

Refreshing tabs in Ionic 2 view following the addition of a dynamic tab

I have implemented Ionic tabs in my application. Some of the tabs are generated dynamically from the database and do not have icons. https://i.sstatic.net/AmYl1.png However, I am facing an issue where adding a new tab and refreshing the array should resu ...

Why won't hover over function properly in separate divs for two items?

My goal is to show text when hovering over a logo, but the text and logo are in different divs. Despite trying various solutions like using display: none and display: block, I still can't get it to work. import styles from '../styles/Float.module ...

Clearing data validation in HTML after an error has been resolved.Is there a way to clear

I need some help with a cloud page I am creating. I have implemented an alphabetic data validation in HTML to only allow users to input letters, which is working as expected. However, the issue I am currently facing is that the data validation error messa ...

Tips for dynamically passing a URL to a function using the onload event

I require assistance with passing a dynamic URL to a function. code onload="getImage('+ val.logo +');" onclick="loadPageMerchantInfo('+ val.merchant_id +'); The value of val.logo contains a URL such as: https://www.example.com/upload ...

What is the best way to assign a value to a button in Ionic/Angular?

Is there a way to bind the name and value attributes to a button? I am facing an issue with this and need a solution. I am attempting to achieve the following: <ion-button type="submit" color="primary" style="text-align:center& ...

Exploring click event beyond React Component: Jest + Enzyme Testing

I am looking to create a Jest and Enzyme test for a component that includes an event listener. The purpose of the test is to ensure that when a mousedown event occurs outside of a specific HTML element, a change is triggered (for example, toggling a state ...

Is there a way to choose all elements in the Bootstrap pagination code using JavaScript?

Recently, I've been working on a website with Bootstrap, and I encountered an issue with the overflow scroll bar that I had to hide using CSS. To navigate the pagination with the mouse wheel, I've been experimenting with JavaScript. I found that ...

Issue with the height of Bootstrap 4 navigation bar

After deciding to use Bootstrap 4 for my current project, I encountered an issue with the navbar. It seems to expand too much, which is only happening once I deploy the website. Can anyone help me figure out what's causing this problem? Below is the c ...

What is the best way to display an SVG file in a React application?

I am trying to figure out how to upload an SVG file and display a preview in a React component. I attempted to convert the SVG file into a React component by using the DOMParser to parse the SVG-XML string into a Document Object, but it is not functionin ...