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.
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.
Step 1: Go to blogger and edit or create a post.
Step 2: Switch to Html tab on top of the "compose tab".
Step 3: Decide 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.
Tip: 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:
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); return false; } } });});
</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.
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.
Tip: 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:
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); return false; } } });});
</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.
You?ve reached the bottom of the post
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon