This is how to link to an anchor on A DIFFERENT page...

  • 2
  • Idea
  • Updated 9 years ago
Here's how to link to an anchor on A DIFFERENT page...

Decide where you want your anchor to go (where the link will direct you to) then you insert this tag ... < a name = 'a1' >< /a > (with no spaces)....

now you go to the other page you want to create the link at.... and you change up the url as follows... http://examplesite.yolasite.com/page2... will take you to "page2" of your site, however, if you use http://examplesite.yolasite.com/page2... then it will take you to your anchor on that page. If you have more than one anchor on the same page, you would change a1 to a2 for the the second anchor and so forth.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
  • http://youcanneverbetoosmart.synthasite.com

Posted 9 years ago

  • 2
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks for sharing this idea. However, I think there may be part of the code missing.

Here's a link on how to implement anchor tags: http://tipsandtricks.synthasite.com/A...

I believe that is what you're were trying to share with us.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
that's how to link to the same page... the code you're "thinking" is missing is < a href = '#a1' >Anchor 1< /a >< br/ > ... but when you link to a different page's anchor, you leave this part out and create the second link as I indicated above...

http: // examplesite . yolasite . com / page2 . php#a1

the above url links to the first anchor on page 2, but you place the "link to" link on page 1 or 3 for example.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
I use that tips and ticks site as reference for my anchors all the time so I can just copy and paste the code but that explains how to anchor to the same page, not a different page.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
most people probably don't pay attention that when you create an anchor, all it does is add to the Url a "#a4" for example.... so when you want to link from a different page or even a different site, you add the #a4 and it'll direct you to the 4th anchor on the page or the one using "a4" in the code.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
so if you had for example...

topic A
topic B
topic C
topic D
on one page and on page 1 you want to direct to topic A and topic C and on page 2 you want to direct to topic B and topic D then you can do that. It makes things less confusing on my part since some of my topics have sub-topics that are linked from different pages, instead of taking someone to the top of the page, I can take them to the exact location.
Photo of papa

papa

  • 327 Posts
  • 20 Reply Likes
This is how I do mine now with little difference from yours. I keep adding to the #a1, #a2, http://anchorsite.yolasite.com/test12..., http://anchorsite.yolasite.com/test12.... I never have tried starting with#a1 with each new page.

You can see working example at http://anchorsite.yolasite.com if you'd like.

Thanks for sharing Donald

Papa
Photo of Steve

Steve

  • 13 Posts
  • 0 Reply Likes
Donald, (or anyone), using your example above I have spent literally hours trying to create a link to a particular piece of (anchor) text on another page of my site. I just can't get it to work and have wasted so much time! I've looked at tutorials elsewhere but to no avail.
Would it be possible to explain it to me using this example: If my site was called 'http://abc.yolasite.com', and I wanted to put a link titled 'test' on the homepage to take me to a particular word or section titled 'hello' on another page of my site called 'abc.yolasite.com/alphabet.php' (page 2 in my site menu'), how would the the html be written?
Also, how would the html be written to creat an anchor link on the same page using the example site above?
No matter how many times I try I can never get them to work.
Hope you can help. Many thanks (in advance).
Steve.
Photo of papa

papa

  • 327 Posts
  • 20 Reply Likes
Steve
if you're referring to the one directly above from myself (Papa) I do believe that I have set it up right. See http://anchorsite.yolasite.com/ I have also included a page at http://anchorsite.yolasite.com/formul... to view the HTML, and a working example starting at http://anchorsite.yolasite.com/test11...
I've set this up on firefox and seem to work for me. If its not working right let me know and I'll take it down
Papa
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Hi Steve,

I hope this info will help:

If you are wanting to have an anchor link open to a specific area on a different page you can do so as follows:

1. Drag and drop a HTML widget (it looks like a blue sphere) onto the page you want to link from. Add this code to the HTML widget
<!-- <a href="mypage.php#anchor">link</a> -->
(with "mypage being the page you want to link to).

2. On your page you want to link to, drag and drop another HTML widget to the area you want the link to jump to and add this code to it.
<!-- <a name="anchor"></a> -->

Your link on the first page will then link to the area you added the code to.

Please ignore <!-- and -->, those are there to stop the code from being interpreted in this post.
Photo of Eleonora Baldwin

Eleonora Baldwin

  • 2 Posts
  • 0 Reply Likes
Ciao Marije,
I can't seem to find this blue sphere... And I'm curious if what I intend is not what's being discussed here.
My request is this: I want to include in the description of a recipe on my blog, elements found in previously posted pages. Something like this: "Dress this salad with Green sauce." In my salad post I want to link to only the Green sauce recipe in the older post which lists Red sauce, Green sauce and Yellow sauce.

I can't explain it with the right terms, and I'm sure it's confusing... but I am just starting to learn blogging/Html...
Can you explain it like you would to a 3 year old?
Help!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Eleonora

The HTML Widget can be found in the "Basic" folder on the Sidebar, to the right of your page. You can create HTML Links to your specific posts. In order to do this, you will need to locate the URL of your specific post by going to your published site and clicking on the desired blog post. In the browser bar, copy the URL. Then, in your blog post, highlight the "Green Sauce" text and click on the chain link on your blog Text Editing Toolbar. Then input your URL you have copied for your external link.

I hope that makes sense! Please let me know if further clarification is needed.
Photo of Eleonora Baldwin

Eleonora Baldwin

  • 2 Posts
  • 0 Reply Likes
Sanja, thank you but this I know how to do.
What I need is to link to a specific part of a composit post, mine lists recipes for different color "sauces" and I want to link to ONE in particular, not the entire generic post. I would lke to link to a PART of a post, if I copy and paste the entire URL I get the whole post...
Also, I'm using Blogger and none of the editing terms you mention sound familiar...
Sorry to be such a dummy.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
You are certainly not a dummy! I believe I'm starting to get the gist of what you want to do.

1. On your blog post, click on the HTML button and add this code: <!--<a href="mypage.php#anchor">link</a>--> (with "mypage" being the page you want to link to). Click "Save."
2. On the blog post you want to link to, click again on the HTML button and add this code to where you want your link to jump to: <!--<a name="anchor"></a>--> Click "Save."

Your link on the first page will then link to the area you added the code to.

Please don't include the <!-- and -->. They are simply there to stop the code from rendering.

If you still have trouble with this, please email support@yola.com, ATTN: Sanja and I can assist further.
Photo of papa

papa

  • 327 Posts
  • 20 Reply Likes
Eleonora

try this link as it has a way to maybe help. http://anchorsite.yolasite.com/anchor...
Its should code for link anchor on one page ,linking from one page to a different page at a certain section.

hope that helps

papa
Photo of Steve

Steve

  • 13 Posts
  • 0 Reply Likes
Marije, using your example above worked an absolute treat... Just like a magic trick! Thanks!
Building a website is a bit like playing a Laura Croft game... Solve a problem and move on, solve another problem etc. I like it.
You guys at yola are priceless!
Papa, thanks also for your help!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Great to hear that you were able to get this working. =)
Photo of dana Florea

dana Florea

  • 78 Posts
  • 0 Reply Likes
Hi Sanja

I followed yr steps but still have an issue...after using this anchor links is there any chance to change the fonts and colors of the links? Please have a look at my home page last raw (2 blue links ) www.prieteninecuvantatori.yolasite.com
What can I do about it?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Dana

Yep.. you can change your link colors. If you added your links through the text widget, then you can click inside the text widget. Then, highlight the text link and select the color you'd like from the color blocks on your text toolbar.

If you added through the HTML widget or if changing via the text toolbar doesn't work, then you can add a little coding to it. Find your text link. It would look something like this:

<a href="yourlinkurl.com">your text goes here</a>

You will need to add a font tag to your code. So, it will look something like this:

<a href="yourlinkurl.com"><font color="#5dc4d3">your text goes here</font></a>

You can change the font color to whatever Hex number you'd like. Here's a great online color selector: http://www.colorschemer.com/online.html

I hope this helps. Please let me know if you have any trouble with this.
Photo of dana Florea

dana Florea

  • 78 Posts
  • 0 Reply Likes
Hi Sanja and a Happy New Year!

Thanks for your answer!
My link was html and your solution worked well but I was able to change only the color of the letters not underline color which is still blue. Do I need to introduce something additional in that code?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Dana!

I'm glad to hear the suggestion worked. Can you please let me know if you want to get rid of the underline or if you just wanted to change the color?
Photo of dana Florea

dana Florea

  • 78 Posts
  • 0 Reply Likes
Hi Sanja

I would like to get rid of the underline, if possible...Thanks a lot!
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
Here ya go :)
<!--

<a href="http://mysite.com" style="text-decoration:none">Click ME!</a>

Just change the url and the text to reflect what you want. And thats it.
-->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks lambofgod! :)

Dana.. let us know if you have any trouble with this.