Join Our Whatsapp Group

Chat with other bloggers, get notifications about new posts.
  • No thanks
  • How To Create Anchor Links In Blogger

    How to create anchor links in blogger | 101helper

    Have you ever heared about anchor links? Maybe you are not aware of it as only a few of bloggers use this great thing to make their posts impressive and easier to read. Anchor links are the links which takes you to a specific part of page, just like back to top button takes from end of the page to top of the page. Similar to back to top button now you can create anchor links in your blog posts and help visitors to navigate to specific part of post. There is no need of any gadget or widget for creating anchor links, you can do it by using Html codes.

    Read benefits of anchor links below:

    Benefits of Anchor links:

    • Anchor links makes it easy to find a specific topic on a page.
    • Anchor links are helpful for visitors to reach to what they are looking for and skip the rest.
    • These links makes your posts impressive.
    • Anchor links makes your blog posts easier to read and makes your navigation more good.
    Don't miss: Stylish back to top button for blogger.

    See a demo of anchor links by clicking here.It will take you to the bottom of page.

    In this post I will show you how to create anchor links in blogger. 

    How To Create Anchor Links In Blogger ?

    Step 1: Go to blogger and edit or create a post.

    Step 2: Switch to Html Editor from "C
    ompose Editor" as shown in below image.

    How to switch to Html tab in blogger | 101helper

    Step 3: Choose a location in the post where you want to jump and where you want anchor link to appear.

    Step 4: Use the following terms for specific things:

    (1). To target a part in post(setting location).

    To set a target in your post first get the code ready in notepad, it will make it easy for you to create anchor links. To create a target use the following code:

    <a href="#write your target here"><b>Write your text here</b></a>  

    Place the above piece of code in the Html tab of your post where you want the anchor link to appear. Make sure not erase hash(#) from the code and there should be no space between hash and the target.

    (2). Code for specifying location:

    <div id="Your target name here"><b>Text of the target</b></div>

    The above code specifies the location of the target. So when someone will click on the target you set in above code(1) he will reach to the position where you paste this code(code # 2).

    Note: If you don't need any text in the target and just want to jump to a target then leave the text area black in the second code, It should look like below piece of code:

    <div id="Your target name here"></div>

    Example(better explanation):

    For better explanation I am using example of the demo I've used in this post(which takes you to the bottom of the post).

    I have used the following code just beside this sentence(See a demo of anchor links by clicking) in the Html tab:

    <a href="#postbottom"><b>here.</b></a>

    The above code represents a target named(post bottom) and here. is link, now I have to set the location where the page strikes, so I have used the following piece of code at the end of the post.

    <div id="postbottom"><b>You’ve reached the bottom of the post</b></div>

    In both of the above codes <b> and </b> represents the bold text that's why in this post the word here and the sentence You’ve reached the bottom of the post both are bold.

    Step 5: After setting targets and links just click on publish and you are done.

    IMPORTANT NOTE: Don't switch back to compose box after creating anchor links otherwise blogger will automatically add a link in place of your target and it will stop working. See example below:

    how to build anchor links in blogger

    You can see an example of error above when I switched to compose box to edit my post. Blogger automatically added a link to my target text. So now to fix it and make it work properly I have to remove the link added by blogger and publish the post without switching to compose box because if I do so I will encounter the same error again. So now my link will look as shown in below image:

    how to create anchor links in blogger

    For Smooth scrolling:

    All the above codes works but scrolling isn't smooth, so if you wish to have smooth scrolling add the below code in the bottom of the post along after setting anchor links:

    $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });


    Your blog template will not accept this script so Go to layout > add a gadget > Html/javascript, paste the code and click on save.

    If you have any problem related to this post ask me in comments. If you have any suggestion or opinion share it with me, follow and subscribe to newsletter to get instant updates about blogger tricks. Thanks for visiting 101Helper. Share this post with your friends and help me spread my work.

    Search tags: How to create anchor links in blogger, How to create anchor links in blogger easy tutorial, Jump to specific paragraph of post in blog,  Jump to specific heading of post in blogger, how to set jumps in blogger posts, blogging tricks, 101Helper blogging tricks for bloggers. 

    You’ve reached the bottom of the post


    1. I attempted to follow directions but when I click on link, it just takes me to blogger edit page, not the part of the document that I desired. Thoughts?

      1. Yeah this is because after following this post you switched to text composer so blogger automatically added a link which takes you to edit page. Don't worry you have done everything write now just switch back to html composer and find the target text(step 4). You will find something similar to this line:

        <a ref=" text>

        Now you have to remove this and after removing it publish the post without switching to composer tab, it will work properly, remember to do this every time you edit a post having anchor links. If you still have any problem ask me.

      2. Read after step 5 to learn how to remove this error

    2. Thank you very much for this post and for sharing your knowledge. Your post about anchor links provided the clearest, simplest, and easiest to follow instructions. Thank you for the explanation and help. It is very much appreciated. Cheers!

    3. Thanks a lot I was very confuse and misunderstand what should I do but now it is clear. thanks again.

    4. i followed the instructions , but although the link is active , it does not do the jump.

      1. The reason it doesn't jump is after making an anchor link don't switch to "compose" editor just stay on HTML editor and publish your post

    5. I, too, followed the instructions, and the links are still active, but when I click on them I'm directed to a page saying, "Sorry, the page you were looking for in this blog does not exist." I didn't switch to Compose. Any idea what happened?

      1. Make sure that you have given ID to the div you are trying to jump to. And make sure to put #YOUR DIV ID in the link. Like this:

        < a href = '#Pagebottom' >JUMP

        And Div ID should be like:

        < div id = 'Pagebottom' >

        Don't put # in the div id and never remove # from <a tag

    6. Thanks. Worked great! ...Except for the links to other pages' anchors. Is there a way to make those work as well?

      1. Links to other posts can also be anchored by adding #ID OF DIV at the end of your other posts links for example this link will take you to bottom of one of my page.

    7. It is working perfectly. Thanks.............

    8. can this work with images? I want to make a comic but i want to use the scroll function since if I embed a powerpoint into a post it will make it blurry. like i want to click on an image and it smooth scrolls to the next page (not open the image)

      1. Yes it will work if you use link attribute in html and use anchor trigger as image, when a person will click on image he will jump to anchor. Its same as shown in this post, the only difference is of image instead of text.

    9. Thank you so much for the information on anchor links. They work perfectly. But can you never, ever go back to compose, even after you've published the post? I edited the post after it had been published. When I looked at it after I'd updated it, the anchor links took me to my dashboard.

      1. Hi Trisa, You are really right it happens exactly but at the time you edit a post then switch to HTML editor of post and jump to each of your anchor link, you will see that a link is added to each of your anchor link automatically by blogger. All you need to do is to remove these links and leave the anchor links as they were in the beginning and after that publish it without switching post editor from HTML.

    10. Thanks for the reply. That's sort of maddening, but easy enough to fix.

    11. i am also facing this issue.
      i will follow ur instrction