Thursday, October 19, 2006

How to enable your visitor to jump from one part of your post to another

Sometimes bloggers may want to make it easier to navigate to a particular section of their page by clicking on a link rather than scrolling around the page to look for it. For this, you will have to use the target attribute and the name attribute.

For example, you want your visitor when they click the link evolution to be led to a section "Evolution". Then what you should do is to first put a target attribute at the section "Evolution" somewhere on that same page.

Then in the section Evolution, the target attribute you should put there will look like this:

<h2><a name="evolution">Evolution</a></h2>
or you can also write it this way:
<a name="evolution">lt;/a><h2>Evolution</h2>
or even
<a name="evolution">lt;/a>Evolution or any text, it doesn't matter.

Then, in the original spot from where you want your visitor to jump to the "Evolution" section, you put the name attribute which will look like this:

<a href="#C4">See Evolution</a>

Example



Let's say this have a block of information here, and then described something that would help the reader to jump to the section on evolution. (not sure how much text I need to put in to make a good example). So I put a link here See Evolution

The code for the above link is
<a href="#"evolution">See Evolution</a>

Then I may have a block of text here, which I wish is much longer, but for the moment I am just going to do a simple example to try to demonstrate better. OK, this is the part I want the reader to jump to when I click on the link above:

Evolution

Study of Evolution


The code I put in front of "Study of Evolution" is
<h2><a name="evolution">Evolution</a></h2>

I really wish I have more text to demonstrate better, but there are just too many files in my "to do" folder. However, I think what I did above is enough to illustrate and explain further how to do it. If any reader find any difficulties, do comment in the comments section, and if I have the time, I will do something about it.


NEWER POST    OLDER POST

25 comments:

  1. I can't figure out for the life of me what I'm doing wrong. if you want, please look at the blog i'm doing at the gallery I work for as an intern:

    32finearts.blogspot.com

    thanks!

    (I've tried everything; at first after my attempts at regular html anchor linking failed, i figured that it had something to do with the blogger interface. i found your site and tried it but it still doesn't work. also tried linking it through Blogger's Compose section, but it still didn't work....)

    ReplyDelete
  2. Hi Gramercy,

    Perhaps a better idea is to send the relevant sections (and the URL of the post in which they occur) containing the HTML of the link you are trying to make and to which part of the post you are trying to link to (make sure you are in the EDIT HTML mode in the post editor)

    It is very hard for me to tell from your site.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  3. Peter,
    First of all thanks for your informative site.
    Should this work linking work going from a blog article to a widget? I tried linking a post of a poll notification to the poll widget at the bottom of the page but couldn't get it to work.

    ReplyDelete
  4. Hi Unzar,

    I haven't tried it, but it may work in a TEXT Page Element. If I have time (got lots of things to do at the moment) I may test it with various Page Elements at Testing Blogger Beta (now New Blogger). Anyway, I will copy the URL of this post into Notepad and put it into my "to do" folder.

    Peter (Blog*Star 2006 and 2007)
    Generating Revenue from your Website

    ReplyDelete
  5. hi! i'm looking for a topic about how to add a "related articles" portion in my post.

    is there any code where a certain topic will show automatically related articles?

    i have posted this question on the help pages of blogger but to my dismay nobody answered this question.

    its hard for me to link per post especially when i'm in a hurry to publish a certain issue/update.

    i hope you can help me with this. thanks in advance. :)

    ReplyDelete
  6. Hi Zephyr,

    You can add same label for for related post which will appear below your post and you can also add a Label List to the side bar. Very useful and described in a section in Customizing your blog.

    You will have to add the label (see Making labels do what up want each time you publish or edit a post.

    As for a script to do that automatically for you, I am 99% there is no such thing. Come on. Adding a label to the post is not difficult. Trying to get a script to do that for you is very much more difficult, if not impossible.

    Peter (Blog*Star)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  7. Hi Peter I tried doing this from one post to another.

    In post A where I wanted to the link to start from or people to jump from it worked fine but in post B where is where the destination is or where readers should jump to it was telling me that

    Your HTML cannot be accepted: Tag is not closed: (<)script type="text/javascript"(>)


    Please Help

    and again thanks for all your help so far.

    ReplyDelete
  8. Hi again Peter don't bother about the last post I just posted on this

    "How to enable your visitor to jump from one part of your post to another"

    It wasn't your script that was causing the error it was another script thank you sooooo much now I can do this jump thing easily.

    ReplyDelete
  9. Hi again Peter it appears I spoke to soon becuae I put in the codes but they didnt work for instance when I published the post and tried clicked on them it took me instead of the destination on the 2nd post but to the blogger login page.

    What am I doing wrong?

    ReplyDelete
  10. Did you type this: <script type="text/javascript">?

    ReplyDelete
  11. Ok this is the site

    http://buyingairyeezys.blogspot.com/

    The first attempt was the word stores in the senctence ''Please also see the free list of stores with the Air Yeezy Sneakers'' which is 4 lines from the start of the 1st paragraph .

    Where the Jump Starts
    I went to edit html and put in the name attribute with the word stores

    The Jumps Destination is inthe post with the heading Want a Pair of Nike Air Yeezy Sneakers... Scroll Down

    Then where the jump should land which can be found 8 pictures down in the post starting with the heading

    Stores Where You can Get The Nike Air Yeezys


    Here I put

    the target attribute with the word stores and the clickable link shows ''Stores Where You can Get The Nike Air Yeezys''

    So when I published the post I expected it would work but it didn't.

    ReplyDelete
  12. I checked your source codes and searched for the word "store". Unfortunately there are just too many stores and I gave up. You will have to give the actual HTML codes you used.

    ReplyDelete
  13. Hi again Peter,can you give me an e-mail address that I can email it to you on becuase Im not allowed to put the html tags in this message.

    Regards

    ReplyDelete
  14. Thanks for this one Peter,

    I have created a link in between my two blogs

    here is the source blog:
    Source

    when you scroll down and reach the song

    "Flying Without Wings - West Life" when you hover your mouse it will say "Click here to view the lyrics"

    when you click the link it will redirect you to my other site Destination

    try it

    and here's how i did it (Thanks to Peter)

    source file (i changed the <> to ()
    (a href="http://ilovethisong.blogspot.com/2010/08/west-life-back-to-back.html#Flying" title="Click here to view the lyrics")(b)Flying Without Wings - West Life(/b)(/a) as you can see I added #Flying at the end

    and here's what i did to the destination file

    (a name="Flying")Flying Without Wings(/a)

    thanks again Peter and thanks everyone for visiting my sites…

    The Psalmist

    ReplyDelete
  15. Hi Psalmist,

    Thanks for taking time to express your appreciation. Some additional notes:
    1. Instead of <a> and </a> use <div> and </div> instead
    2. instead of name="" use id="" instead or even better, use both like in
    <div id="key" name="key"> and </div>
    3. Refer to how to display HTML tags in posts and comments instead of substituting ( for <

    ReplyDelete
  16. Hi Peter,

    so instead of using <a href="http://"></a>
    is <div href="http://"></div>

    what is the difference? does it affects the speed of loading page?

    ReplyDelete
  17. Hi Peter,

    so instead of using <a href="http://"></a>
    is <div href="http://"></div>

    what is the difference? does it affects the speed of loading page?

    ReplyDelete
  18. A commentator speculated that perhaps Google doesn't like an empty hyperlink, so it is very much speculation but since nothing is lost by using <div> instead or maybe even <span> or <p>

    Or perhaps putting some anchor text like <a id="key">this is about something</a> may make Google happy. Speculation, not hard facts

    ReplyDelete
  19. Hi Peter,

    How are you?

    Just want to share what I created from your teachings..
    please check my blogpost here

    Happy Reading!

    ReplyDelete
  20. Huh, very nice customization of a Simple template. I see you are away from home so do take care.

    ReplyDelete
  21. can you tel me .how to create a page in blogger,not a static page.a real looking page

    ReplyDelete
  22. There are many kind of pages with Blogger - home page, individual page, archive page, label page, static page. The problem with answering your question is what do you mean by a real looking page. Perhaps a better answer should be try to understand what we know about the various type of pages I mentioned above.

    ReplyDelete
  23. Ηi, dear sir! I followed the steps above:
    I created the links from where I want my readers to jump to another spot in the same post. The trouble is when I try to make the anchor: I can not see what I am doing wrong.
    The post I am referring to is
    http://newcaredentist.blogspot.gr/2013/11/blog-post_8.html
    I write the code in the html of the post, where the anchor text should be, then I turn to "view" (the code does not work) and then, when I turn back to "html" the code I added is different! I hope I was clear...Any hints? Thanks in advance!

    ReplyDelete
  24. I have noticed that after writing some HTML with Blogger.com HTML post editor and if one then change to COMPOSE then back again to HTML, some HTML codes may change

    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