How to Make Anchorlink that Navigates in the Same Page on Blogger?

Hi bloggy readers,
Have you ever heard about what is an anchorlink? If you haven't heard of that, then let me explain to you what exactly is that. Okay, anchorlink is usually called as a one page link. anchorlink is different with the hyperlink. If the function of hyperlink or link is to go from one page to a another page if being clicked by mouse cursor, then the main function of anchor link is to make it easier for the readers to get to the specific position in the same page without being bothered on scrolling down the whole body of article.

If you visit some documents on Wikipedia website, we can see this kind of anchorlink on the first part of document. For example, now visit this Wikipedia document mentioning about Blog. If you visit that Wikipedia document, you will see that the tables of contents from that article that contains all the important chapter of the whole document, will have their own link, which will lead you to exact part in the same page.

As you can see in that table of contents, if you click at one of the anchorlinks in that Wikipedia document, will finally bring you to the specific area where the the actual article is set. Yeah, that is an anchorlink.

If you still can't catch my own explanation above, then you must see this example below. In the bottom position of this page, you will see the words

If you click that words, you will be automatically brought to the top position of this page.

How to Make an Anchorlink in our blog post?

Okay, i assume that right now, you already have a clearly understanding about what Anchorlink really is. Now i want to show how exactly to make an anchorlink in your blog.

The first thing to do is we have to set the anchorlink we want to use as the first configuration. For example (look at the red code below):

As you can see in that code above, now pay attention to the symbol # above. The code Anchorname indicates the title which later, can be called in the same anchor name. Anyway, there is one thing you must remember, the Anchorname doesn't need a symbol # because this anchor name is only the name that will be set as the anchor position.

On the other side, the code #AnchorName will need the symbol # because the symbol # indicates that the anchor name will be ready to be called when the Link "Back to Top" being clicked. For example, we want to name the anchor's name with "Topside".

Anchor's object without a link title.

Anchor's name with the link title.

And then, after we finished the first phase, we can proceed to the next step. The code anchorname and the #anchorname are different, the code #anchorname must use a sentences so the visitors will be able to see and then click through that sentence. For example:


1. Log in to Blogger
To begin this tutorial, now go to Blogger.com and log in to your Blogger account.

2. Go to New Post
In the Dashboard page, pick one of your blog and go to the New Post page to create a new page. You might wonder why i ask you to make a new post. Okay, here's the explanation. Usually, in my other practical tutorials, i always ask you to go to the Edit HTML first to do some customizations of your template, but, in this post, i just want you to practice this tutorial in the simple way. So, i think New Post is the right place for this tutorial. Okay, back to the topic.

3. Write your article
Now in the New Post page, create your own article, or you can make put some random words in the New Post. Create more than 500 words article in the New Post.

4. Switch to the Edit HTML
Still in the New Post page, there are 2 tabs that can be switched, Edit HTML and Compose. Now switch the tab of the new post into the Edit HTML tab. You can see this tab at the top right position of the new post page. By pushing this tab, you will be able to see the real HTML code that being used on the article.

5. Copy the Code
Now block the code below using your mouse cursor and then press Copy. After that, put it in the first line paragraph of your article. Anyway, you must remember that, in order to make this tutorial works, you must not switch back the post tab to the Compose mode, that's because if you switch back to the Compose mode, the anchorlink will be randomly changed into another code.

6. Copy the Code
Now block again the code below and Copy. And then put it on the last part of your article. Again i remind to not switching back the tab to the Compose mode, trust me, the anchorlink code will be automatically changed.

7. Publish the post
By pressing the Publish Post button, now publish the article you've just made. Now, go to your published article and at the end of that article, click the link Back to Top.

Okay, that's it for now. If you

As i said earlier in this article, now you can click at the link below!

Back to the top