Sunday, January 28, 2007

How to link a spot on a page to another spot in a DIFFERENT page

Below are the instructions on how to hyperlink from a particular spot in a post of webpage to another particular spot in a
DIFFERENT post or webpage
. If you are looking to linking from one part of a page to another part in the SAME page, then refer to How to enable visitor to jump from one part of a page to another part in the SAME Page.

This is how you can link a particular spot in a page/post to a particular spot on a DIFFERENT page. Let's say you want this link Vitamin D to a particular spot on another post of another blog: Get a dose of sunshine. It is good for you, in particular to a particular word "Vitamin D" in that post, which can be the same or different blog.

What you have to do is to first get the URL of the target page, which in this case is:
http://foodasmedicine.blogspot.com/2007/01/get-dose-of-sunshine-it-is-good-for-you.html
.

The visible word "Vitamin D" (link) that you see above is surrounded by a pair of HTML hyperlink tag as shown below (it is the actual HTML to display the link "Vitamin D" above):
<a href="http://foodasmedicine.blogspot.com/2007/01/get-dose-of-sunshine-it-is-good-for-you.html#XYZ" target="_blank">Vitamin D</a>


Note that the link is followed by a name attribute #XYZ where the name attribute XYZ can be anything you want. Then in the post editor of that other blog, you surround the word "Vitamin D" by a title, paragraph or division tags, for example, <h2 id="XYZ">Vitamin D</h2>

This had been done. You can click on the link "Vitamin D" above and see where it takes you. Note that clicking on the link "Vitamin D" at the top of this page opens up a new window to a spot in the middle of a page with the word "Vitamin D". If you don't need the link to open in a new window, just leave out target="_blank" in the HTML.

Acknowledge: This post is a result of a tip from ces1977 of Thirty Is the New Twenty

18 comments:

  1. Thanks, I was trying to find something like that for a long time. I had tried &highlight=requiredword generally used by BB forums, but in vein. I am going to try it.

    ReplyDelete
  2. I wish I had found this post earlier. :) I worked it out and used the idea in my sidebar.

    ReplyDelete
  3. Praise The Lord, Thank You Jesus & Honoring She The Universe Who Has Spoken!

    I've been trying to find out how to add a LINK in my beta blog since 8am this morning, it's now 5:21pm.

    I searched the blogger group & other search engines. Your instructions were concise on point and written in A-B-C and 1-2-3 with a working blueprint for an example.

    Easy to follow & comprehend.

    To you I say, Thanks & More Thanks!

    You've got yourself a new subscriber.

    Vicki

    ReplyDelete
  4. Hi, I am trying to figure out how to link a particular spot on a page to another particular spot on the SAME page. Any suggestions? It's actually in my sidebar (I believe! I am just a beginner and am unsure of all the terminology) section that I am attempting to make a link.

    ReplyDelete
  5. How can I use this for my expandable posts?

    I am using the "Read more" hack and I would like my readers to go to the exact spot where they left off reading when they click on Read more and are linked to the Post page.

    Right now, when you click on Read more, it just takes you to the top of the Post page.

    Thanks in advance.

    ReplyDelete
  6. Hi Noyes,

    Would like to help but am tied up with living a Dream Driven Life(TM) and aiming to Kuala Lumpur Legacy (KL/Legacy). Hope you will follow the instruction here and test to see if this will result in a visitor getting to a spot in the hidden part when clicking on the link. Hope you will leave some feedback and let us know if the test pass or fail.

    If fail, and if I have the time, I may test it myself.

    Peter ChenBlog*Star
    Environmentally friendly presents (gifts)

    ReplyDelete
  7. hi there.. I'm still new in blogging. Need to ask u sumting: how do i make a link like 'Read More...' in every post i wrote? Is it call a link?

    TQVM

    ReplyDelete
  8. That is called expandable post summary and for that you have various choices including

    expandable post summary for New Blogger

    jquery expandable post summary

    ReplyDelete
  9. I cannot get blogger to see these comments correctly.

    I am copying/pasting exactly as you have it and the "new" version of blogger is just not working with this line of code...

    HELP!!
    Helen

    ReplyDelete
  10. Comments? Which comments?

    Copying/pasting exactly as you have it? copy what?

    ReplyDelete
  11. The post was very informative but I want to know how to make internal links i.e. when I go to other blogs at the end of any post I see two three links directing towards other posts in the same blog with pictures. It says Internal links how do I do that?

    ReplyDelete
  12. Refer to How to enable a visitor to jump from one part of a page to another part in the SAME page. The post is old and not too well written, if not clear, ask again for me to rewrite.

    ReplyDelete
  13. "...three links directing towards other posts in the same blog with pictures."

    Like in Food as medicine: Allergy test? That is done using LinkWithin

    ReplyDelete
  14. Your instructions worked fine in 2007. Now,
    Google does not recognize the target tag you
    suggest. Each time I click the COMPOSE button to review the HTML, Google adds href="" to the tag and eventually converts that to my blog URL.

    Google help now offers a different approach:
    see http://www.google.com/support/forum/p/blogger/thread?fid=31040029a01acdcc0004ba0ad959f4c8&hl=en - They insist that the proper syntax is [name="XYZ"]. Unfortunately, that produces the same result.

    I've reviewed an HTML text book [Cascading Style Sheets, 2nd Ed.] and concluded that your original advice is correct, Google's current advice is wrong and Google's blog software has a programming error. I've explained the problem to Google several times, via its FEEDBACK service, but the problem remains.

    What do you suggest?

    [My first attempt to publish this comment was refused. "Your HTML cannot be accepted:
    Attribute "ID" is not allowed in tag: A". Also, the comment box does not allow angle brackets, so I removed them.]

    ReplyDelete
  15. Tip: In XHTML, the name attribute of the <a> tag is deprecated, and will be removed. Use the id attribute instead.

    ReplyDelete
  16. Jack, there was some errors in the above post. In the place where you want to link to, type <p id="some text">paragraph of text</p> or <h2 id="some text">paragraph of text</h2>

    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