Wednesday, December 29, 2010

How to link to a location in same page

It is often convenient to create a hyperlink to another location in the same post or webpage. For example, in a post explaining AdSense Privacy Policy Generator for AdSense publishers, there is a whole section on the relevant portion of AdSense Program Policies before the actual content on how to use an AdSense Privacy Policy Generator. For the convenience of visitors who have no interest in reading about AdSense Program Policies and just want to learn how to easily create the required policy for their blogs, it is thus good to create a hyperlink at the beginning of the post so that they can click on it to bypass the unwanted portion of the post and jump straight to the portion explaining how to create the AdSense Privacy Policy with the generator.

How to link from one location to another location in the same page


Here is how to hyperlink from one location of a post or page to another. The code is <a href="#anchor">some descriptive text</a> where instead of writing <a href="URL">some descriptive text</a> as for standard hyperlink, in place of the URL is #anchor where anchor can be any identifying character but is a usually a character descriptive of the section. For example, I want to hyperlink to the section describing the generator, I would use the easily remembered #generator.

Now at start of the location you want to link to, just write the code <a name="generator"></a> or <a id="generator"></a> and the hyperlink would be anchored to (linked to) this location.

I will use that post AdSense Privacy Policy Generator for AdSense publlishers. Around the beginning of the post, I wrote:

(if you just want to comply to their requirement and learn how to generate the policy, just go over to <a href="#generator">How to easily generate AdSense Privacy Policy</a>)


Then at the section where there is a heading

How to easily generate AdSense Privacy Policy

just before writing the code for the above heading, I write <div id="generator"></div> and thus ended up with

<a name="generator"></a><h2>How to easily generate AdSense Privacy Policy</h2>


or alternatively

<a id="generator"></a><h2>How to easily generate AdSense Privacy Policy</h2>


Note that while the name attribute had been deprecated for XHTML, the id attribute may not work for some older browsers. In my case, I think it is prudent to write both to cover all contingencies and thus I end up with

<a name ="generator" id="generator"></a><h2>How to easily generate AdSense Privacy Policy</h2>

9 comments:

  1. nice idea. thanx for the post.

    ReplyDelete
  2. Hi,
    this code is better
    < div id="something" > Some text < /div>
    The "local" URL becomes
    OLDURL#something

    Greetings from Italy

    Ernesto
    www.ideepercomputeredintenet.com

    ReplyDelete
  3. @Peter
    I think
    < a id="key" > is a fake link and maybe Google doesn't like.
    With div id="key" there are no problems.
    Thank you for comment on my blog

    ReplyDelete
  4. hello , can you help me how to make my blog scroll like this http://thekhayalan.blogspot.com/search?updated-max=2011-01-06T16:09:00%2B08:00&max-results=1? i had try it many time but it doesnt working. please help me T_T please please please

    ReplyDelete
  5. hey nice post..really helpful..im new in blogging so please visit my blog for saree sales under cheap price..im not a spammer thank you....

    ReplyDelete
  6. Hello, I used your idea of linking on the same page but when I try to link multiple then it just show the first link only...
    Actually I wanted to use multiple link tab???
    How can I do that?

    ReplyDelete
  7. Sorry don't understand you. What do you mean by multiple link tab? Something like those below my blog Header?

    ReplyDelete
  8. I have tried so many different ways to set this up for my FAQs page and it just doesn't work. The only time I've actually gotten the text to show up as a link, when I click it, it just sends me into my dashboard. Most methods don't seem to do anything. #HeadDesk

    ReplyDelete
  9. Oh I just figured out what I was doing wrong. I was trying to do this under "compose" and not "HTML". Normally I can put coding in the compose section and it still works. Apparently not in this case. Thank god. I was just about to give up on the whole thing.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics