Blogosphere Travels #3: Page Jumps

Posted December 12, 2013 in Blogosphere Travels / 0 Comments

Hello readers! I have noticed something a lot of bloggers, most in fact, have on their Review Index pages (or review archives, or whatever). I will call them Page Jumps- like where you can click on something and it takes you to another part of the same page. For example, the ‘click to return to the top of the page’ links you find at the bottom of pages.
This is a tutorial for Blogger, not WordPress. But there wasn’t a coherent way of explaining how to do it on Blogger, so after playing around a bit I finally figured it out myself. You basically have to treat it as if it’s a link to a different page, not to a part of the same page, and use the corresponding HTML.

Step 1

First identify where you want your viewers to click to take them to a section of the page.
Use this code:
<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterA“>A</a>
Replace my website with your website (or specific page url), and after the #, add a code word to help you remember what link that is. I’m using letterA, because I want the A at the top of the page to take viewers to the A where the reviews are. This code word helps tie the links together; it’s very important. Replace the blue A with whatever you want the text to say. For instance, if it’s a ‘click here to go to the top of the page‘ link, that’s what you’d put instead of A.
Step 2
Now determine what part of the page you want the link to take your viewers. Place this code above that line (in the HTML editor):
<a name=”letterA“></a>
Replace letterA with whatever your code word is. This should take your viewers straight to that part of the page. I want my link to take my viewers to the X section, so I pasted that code above the line for the letter X and used the code word letterX.
Examples:
Here’s the html at the top of my page. Highlighted is the html I added in Step 1:
<a href=”http://www.blogger.com/blogger.g?blogID=3538657372165344349″ name=”tothetop”></a>
All reviews are organized alphabetically by title.<br />
<span style=”font-size: large;”><a href=”http://www.awesomebookassessment.com/p/review-index.html#letterA”>A</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterB”>B</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterC”>C</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterD”>D</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterE”>E</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterF”>F</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterG”>G</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterH”>H</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterI”>I</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterJ”>J</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterK”>K</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterL”>L</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterM”>M</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterN”>N</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterO”>O</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterP”>P</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterQ”>Q</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterR”>R</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterS”>S</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterT”>T</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterU”>U</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterV”>V</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterW”>W</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterX”>X</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterY”>Y</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#letterZ”>Z</a>&nbsp;<a href=”http://www.awesomebookassessment.com/p/review-index.html#number123″>123</a></span><br />
Here is section X, and highlighted above it is the code I added in step 2:
<a href=”http://www.blogger.com/blogger.g?blogID=3538657372165344349″ name=”letterX”></a>
<span style=”font-size: large;”><b>X</b></span><br />
Note: It adds the whole www.blogger.com thing after you publish it. It doesn’t change it.
It may seem like a lot of work for one page, if you do the whole alphabet like I did. All I can say is copy and paste, copy and paste. Then change all the little code words and text. You can do this easily enough for a ‘top of page’ link too. Just put the code from Step 2 at the very top of the page’s html, and the code from step 1 at the very bottom.
Signature1

Tags:

Sign up here to receive ALL of Awesome Book Assessment's posts in your inbox!

Nose Graze - WordPress themes and plugins for the creative blogger

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz