Connect with us

Blogger: How To Create A Link To Jump To A Specific Part Of Webpage

How To Create A Link To Jump To A Specific Part Of Page In HTML Blogger

Blogger

Blogger: How To Create A Link To Jump To A Specific Part Of Webpage

Normally to create a link to jump to a specific part of a page or post we use <a href=”#ID_NAME”>, but on Blogger when you try this method it adds your Blogger Profile URL into href like below and it does not work.

  • <a href=”https://www.blogger.com/blogger.g?blogID=4872450#ID_NAME”>Jump to Section 4</a>

 

In this tutorial we will guide you step-by-step to how to create a link to jump to a specific part of your page or post on Blogger.

  • Skip the Step 1 if you are working on an old or already published post. If you are creating a new post then follow the Step 1.

 

Step 1: How To Get The URL Of Current Post

On Blogger you can’t get URL of a post unless until you don’t publish your post. So in this step you will learn how to get a URL of your current post on Blogger even before its completion.

  • You can see that there is an unpublished post. When you hover over View icon it shows preview means its URL is not available.
  • So to get link of the current post we need to publish it first.
Blogger: How To Create A Link To Jump To A Specific Part Of Webpage On Blogger
  • Click Publish. Make sure to enter the Title of your current post.
Blogger: How To Create A Link To Jump To A Specific Part Of Webpage On Blogger
  • Once it is published it’s URL is available. When you will hover over View icon it will show you view label.
  • Right-click on View.
  • Click the “Copy Link Location”.
Blogger: How To Create A Link To Jump To A Specific Part Of Webpage On Blogger
  • Since you have got your post URL, now click Revert to draft because your post is not completed yet.
  • You can also revert your post from Preview as well.
  • Once you complete your post click Publish again.
Blogger: How To Create A Link To Jump To A Specific Part Of Webpage On Blogger

 

Step 2: Create ID

To add an ID you need to switch to HTML view from Compose on Blogger Dashboard. Create a unique ID for HTML element to which you want to jump, the element could be <span>, <div>, <h1> etc. It is better to name ID in small letters. For instance we are creating an ID “product_details” on a <span> element.

 

<span id=“product_details”>

<h2> Details Of New iPhone XS Max </h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus nibh, blandit eu neque in, sodales euismod risus. Nullam dapibus quam non mi finibus, vel gravida nunc lobortis. Sed vel dui lacinia, fringilla neque et, commodo quam. Duis quis vulputate velit, sed euismod diam. Cras hendrerit purus in ante dictum pulvinar.

</span>

 

Step 3: Create A Link

For instance, we make a link for the text “Go To Product Details”. When Go To Product Details link will be clicked you will jump to Details Of New iPhone XS MAX section.

  • Select the text which you want to make a link.
  • Click “Insert or Edit Link” icon from Blogger HTML Toolbar.
Blogger: How To Create A Link To Jump To A Specific Part Of Webpage On Blogger
  • Now on “Paste or search for a link” first paste the URL of your post and then at the end of URL after .html add # symbol and the ID, like here we have added #product_details.
https://www.meersworld.net/2020/04/how-to-create-link-to-jump-to-specific-part.html#product_details
  • Don’t tick the checkbox “Open this link in a new window”.
  • Click APPLY.
  • Now Publish your post and test your link whether you can jump to specific part of your page or post.
Blogger: How To Create A Link To Jump To A Specific Part Of Webpage On Blogger

 

Demo

Just for your understanding we are creating a jump link here. When you will click the link “Go back To Step 1” you will jump back to top to STEP 1.

 

If you like this post then don’t forget to share with other people. Share your feedback in the comments section below.

 

Blogger Templates

 

 

Meer Basit is the founder of Meer’s World. He’s been running the show since launching the blog back in 2018. By background he is a computer scientist. Primarily, he creates content around blogging (WordPress, Blogger, Tumblr), SEO, affiliate programs, earn-online, reviews, eCommerce, & technology. He has got years of professional experience in web programming, computer programming, databases, data warehousing, & transcription. In general, he likes traveling, gardening, watching movies, is a passionate cricketer, creative writer, and a GSD lover.

2 Comments

2 Comments

  1. Martin K

    January 22, 2021 at 12:43 pm

    Thanks for your help, it is very helpful

Leave a Reply

Your email address will not be published. Required fields are marked *

More in Blogger

To Top