Creating a Link to Jump to a Specific Part of a Page

Links connect one web page to another web page, but they can also connect one part one part of a page to another part of the same web page.

Here I am practicing how to Create a Links to Jump to a Specific Part of a Page.



If you do not understand what I meant to say, don't worry. If you read this article and follow the instructions, you will not only know what I mean, you will learn it too and will be able to use in your blog.

I explain the process as I do it.

Well, I am following a Hubspot's article to learn that. You will find a link to the article I am following at the bottom of this page.

To find that you have two options,

1. Either scroll all the way down this article which I deliberately made too long, or
2. Just jump to the part by just clicking here.

HUGE UPDATE (01 Apr 2017): If you have already read this article before, you know I was not able to do that quite efficiently. But I did it now, the procedure is straightforward and same as everywhere else. But it was not happening at the moment, so an article on that is coming very soon. But, as it took me lots of time and effort I just can't delete this article, besides it really provides value for learning. So now I declare this article as Creating an Internal Link to Jump to a Specific Part of Different Blogger Post.

So, if you chose the second option you certainly understand now what I meant by "Creating a Link to Jump to a Specific Part of a Page".

To create that kinda links, we're going to play with HTML just a little bit. Even if you touching HTML for the first time, you can only follow along with me.

You can just blindly follow the steps if you are using a Blogspot blog without bothering your brain at all and get results same as mine.

But, I would like you to understand the problem and what exactly we are doing at HTML level, as it makes the task so much FUN.

We got to link one object of an article to another object of the same article.
Let's say, we want to link Text1 of an article to Text2 of the same article. For that we have to explicitly tell the browser that we want to connect to Text2, somehow we need to uniquely identify Text2 in a way that browsers understand. Then we have to add that identity or the link to Text1.

Here are steps by step procedure for how I do that in Blogger~

1. At first, write the whole article in compose mode of the Blogger without worrying about those kinda links.

2. Give a unique identity to the part you wanna link to:

• Select the HTML mode.

• Find the object in the HTML code

        For me, it is "See!", the code looks like this:

                 <div>
                 See!</div>

        ~In Blogger, for paragraph "<div></div>" tag is used, where in HTML "<p></p>" denotes a paragraph.

• Add an "id" attribute to the "<div>" tag

                <div id="linkin_within_page">
                See!</div>


        ~where "See!" text I wanted to link to, and "linkin_within_page" is a unique identifier. You come up with your unique identifier and replace it.

3. Give the link to the part from you want to link to:

• Find the part in the HTML code

        For me it is "clicking here", the code looks like this:

                <li>
                Just jump to the part by simply clicking here.
                </li>

•       
• Next I added "<a>" tag (it converts a text into anchor text) to "clicking here",

                <li>
                Just jump to the part by simply <a href="">clicking here</a>.
                </li>

• Copy the permalink of your blog, which you can find on the right side of editing page under 
  Post settings
  .

• Paste it inside <a> tag like below

<a href="http://digiworkblog.blogspot.com/2017/03/creating-link-to-jump-to-specific-part.html">clicking here</a>

        ~here you have mentioned the article link, but you wanna tell the exact location on the article

       To do that, type "#identifier" after the link to the article and within inverted commas as in example bellow

      .html#linkin_within_page">clicking here</a>

      ~It should look something like this:

You are done. Now publish the post and test it.

Conclusion: Well I am not very happy with the result. It is because when you click on the object I wanted to link to from, it reloads the whole page. I should take you directly to the targeted location without reloading the page.

What I think about the problem is, while giving "href" link to the text I wanna link from, in anywhere else we just put "#identifier" without putting the permalink in front of it. So, in my case it should be like this:

<a href="#linkin_within_page">clicking here</a>

Instead of:

<a href="http://digiworkblog.blogspot.com/2017/03/creating-link-to-jump-to-specific-part.html#linkin_within_page">clicking here</a>


It does not just happen in Blogger. If I do not mention any URL or Permalink, Blogger adds a random Permalink, and then clicking on the Anchor Text leads nowhere.

So, I found this different method to do that.

And, this method is actually for Linking to A Specific Part of a Different Page. So, at least it was not entirely depressive, now we can follow the same procedure to Link any part of a different page.


It is not about always be successful, guys! It is all about Keep Learning and Having FUN. Maybe in future, I will find out how to do that and sure share on another post.


Go ahead and keep blogging. And if you find out how to actually do that in blogger just let me know in the comment section.

See!

What just happened? You have been sent to a different part of the same article.
Okay, here is the Hubspot's Article which I followed.

But, to do it in Blogger Blog it is a bit different, if your blog is hosted on Blogspot, you have to follow my procedure. So, click here to return where you left.