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.

• Click Publish. Make sure to enter the Title of your current post.

• 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”.

• 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.

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.

• Read our post to how to switch to HTML View & understand Basic HTML Tags & CSS Properties.

<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.

• 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.

• 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.

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.

• Go Back To Step 1

Complete Step-By-Step Blogger Tutorials

• Complete Blogger/Blogspot Tutorials – Step By Step | Widgets, SEO, Monetization, Conditional Tags