Linking to a Area Within the Same Page (Blogger)

Also  known as Jump links or Anchor links. This is really quite useful when you want to jump to a specific part of the page. Thank of this as a way to jump from point A to point B in the same page.

Step 01:

To do this you need to place something like this below in the text you want as your link.

<a href="http://www.myurl.com/#chaper01'>PointA</a>

The Red text is the text you want hyperlinked. (This is what will be visible)
The Orange  text is the  location name the link will go to.You must add  the # on this.
The  Blue text is the URL of the page your adding this tweak on.

Step 02:

This next step is to add in the destination of the link. You have 2 ways of doing this. Normally it would not matter which way you do it but with Blogger Option 1 will hyperlink the word. So I added Option 2 for those who don't want the destination word to be hyperlinked

Option 01:

<a href="http://www.myurl.com/" name="chaper01">PointB</a>

The Red text is the destination of the link you added in step 1.

The Orange text should be the same as the first location you made. But without the #. But noticed we added the name= in there.

The Blue link should be the URL this tweak is on.

Option 02:

This way is to avoid the destination word from showing up as a link in Blogger. 

To do this just place the  same code in Option 1 next to the word you want to jump to. (Point B)

Point B<a href="http://www.myurl.com/" name="chaper01"></a>

Noticed the Point B is now outside of the tags.

Here are a few examples of the use of both these types of hyperlinks.

This is the code in Step 1 in use.

This is using the method in Option 1.

Skip to Chapter 01

What this code looks like:

<a href="http://www.tweakmyblogger.com/2010/11/linking-to-area-within-same-page.html#chapter01">Skip to Chapter 01</a>

This is using the method in Option 2.

Skip to Chapter 02

What this code looks like

<a href="http://www.tweakmyblogger.com/2010/11/linking-to-area-within-same-page.html#chapter02">Skip to Chapter 02</a>


Notice the code use between Option 1 and Option 2 are the same from the first step. Click the link on any of these to take you to the destination of the link.



























Option 01:

This is what the code looks like.

<a href="http://www.tweakmyblogger.com/2010/11/linking-to-area-within-same-page.html" name="chapter01"><b>Option 01:</b></a>

Option 02:
This is what the code looks like.

<b>Option 02:</b><a href="http://www.tweakmyblogger.com/2010/11/linking-to-area-within-same-page.html" name="chapter02"></a>