How To Create Anchor Links In Blogger

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.

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 "Compose Editor" as shown in below image.

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 sentenceYou’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:

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:

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:<script>$(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);returnfalse;}}});});</script>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.

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:

Now you have to remove this https://www.blogger.com/blogger.g?blogID=82938298392393382 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.

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!

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?

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)

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.

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.

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 www.blogger.com 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.