Saturday, September 10, 2016

Rock the Blog-- Creating Page Anchors (linking to a point farther down a blog post)

Rock the Blog is our  "How To" for bloggers!

From graphics to html and all kinds of bloggery goodness!

This feature will focus primarily on the Blogger platform (since that's where I'm hosted) though some ideas may apply to Wordpress.


A long while back I was asked how to do page anchors and...I totally forgot about it. I'm sorry! I'm sorry! I can't even remember who asked. #BloggerGirlFail

Anywho so a Page Anchor. It's basically a way to link lower down on a post from the top of it. It's very handy when you have a lengthy post or index.



I use this on my Review Page. At the top I have the alphabet then if you click on the C it'll take you down the page to where all the LastName C authors are listed. I'm going to try to explain it and hopefully I do a good job and it makes sense. lol It sounds complicated but really it's pretty easy. 

You're going to start with the following code. It'll be input in the HTML compose view. The first line of code will be at the top of the page. The second bit of code will be what it links to lower on the page. You need both for it to work. How you get it to direct where you want is by replacing the #anchor

Base code:
<a href="http://www.PageURL.com#anchor">Link Text</a>
blah
blah
blah
blah
<a href="http://www.YourBlog.com/null" name="anchor">
So if you were doing a post that included raptors it would be...

<a href="http://www.PageURL.com#raptors">Read more about raptors!</a>
blah
blah
blah
blah
<a name="http://www.YourBlog.com/null" name="raptors">

So an example.

This is what my code will look like when I switch over and paste it into my HTML view. I wanted the text links to show next to each other with a | between them instead of stacked on top of each other so changed it a little.

At the top of the page...

<a href="http://www.herdingcats-burningsoup.com/2016/09/creating-page-anchors.html#ManCandy">ManCandy!</a>  | <a href="http://www.herdingcats-burningsoup.com/2016/09/creating-page-anchors.html#ChickCandy">ChickCandy!</a>

Man Candy Pics

<a name="http://www.herdingcats-burningsoup.com/null" name="ManCandy">
pics
pics
pics
pics

Chick Candy Picks
<a name="http://www.herdingcats-burningsoup.com/null" name= "ChickCandy">
pics
pics
pics
pics

And when I input that in the Compose view you get the following.



Man Candy Pics













Chick Candy Pics









Okay. So that's it. It looks really complicated. And I won't lie. The first time I attempted this I had to publish > revert to draft > publish > revert to draft a couple times to get all the kinks worked out (I was linking 27 anchors in so it got a bit messy) but go slow and it's not TOO bad.

::sort:: I actually had to do that with this post because I did the post and examples then changed my permalink so they linked to broken pages. Oops!

If you have questions let me know and I'll try to explain :)



Have a topic idea? Submit it HERE!



No comments:

Post a Comment

I always enjoy hearing what YOU think so come on and leave a comment. Everyone's welcome :) And feel free to leave comments on old posts. I'll check in on you there too :)

Bloggers don't forget to leave your links!
~Anna

The Herd Archives