I went on a search for the right tutorial that actually 1. worked and 2. made sense. You'd think it would be easy since those are the two things you want your tutorial to do, but of course it was harder than that because for some reason people don't like using pictures. It was a humongous pain in the neck to track one down (at least, it takes a long time and I don't get all the HTML-talk they use) but I finally found one in my good old buddy Blog Know How. << if you click on that link it will take you to his little-bit-less-confusing-than-everyone-else's tutorial on how to create a link that will take you to certain spots within the same blog post. His was confusing but with a little bit of squinting and changing and editing I finally figured it out so a little bit of thanks to Blog Know How (not too much though because we don't want him to get conceited, thinking he was the reason I succeeded because it really was not a very intuitive tutorial if you don't understand HTML which I don't).
But since I did all the hard work, I'm here to present you with an easy, intuitive tutorial on how to make a link in your blog post that takes you to another part in the same blog post. This should be easy and understandable so if it's not and you're confused, please tell me because I want to have a tutorial you can understand and most importantly a tutorial I can understand. ;)
1. You should already have your post written out and edited or else you can't do this tutorial. So go ahead and write it and then come back. Once that's done, go to the blog > edit post. I would suggest doing it to a different post that you're not going to keep just so that if you mess up, no harm done. You still have your beautiful finished product, that you actually are going to post, safe and sound in your inventory/inbox/thingamajigger. So don't do this to the real honest-to-goodness final product if you've never done this before because there is a chance that you will mess up and screw it all up. In that case it is your fault.
2. Next, create the headings you want to have displayed on your blog. For example, my blog, called, well, BOOKS, has free books you can read online (only two, but I'm working on it so hold your horses) and since it's a Blogger blog, I need links that jump to different chapters on my page. So in this case I would want my header(s) to be called "Chapter One" and "Chapter Five", etc. Figure out what you want your headers to be. Some people want their headers to be the different things they're talking about in their blog. They'll have an introduction, three different points, and a conclusion. So for them they would have headers like "Introduction to Math", "Why Math Is Important", "How to Use Math In Your Every-day Life", and "Conclusion to Math". Then you can say which would I rather read first?, decide you don't want to read any of it, and go find an interesting murder mystery to read instead. Good choice.
B u u u t anyway. I wrote "chapter one" on to the last chapter in my blog. That way readers could leave off wherever they wanted to, come back later, and jump right into the thick of things. Depending on how many headings (or chapters) you have, you might not want it to be boom boom boom, in a line like this:
In this case, since there are fourteen headers, I split them up into five rows, each consisting of three headers plus the two at the bottom, with dividers in between so you could distinguish between them. This is what I would suggest for chapters (picture one). If you're just doing headers, I would suggest splitting them with three spaces in between each header (picture two).
 |
| (picture one) |
 |
| (picture two) |
I know I didn't do much to make it look super authentic but that's an actual blog and that page has had a lot of issues so I didn't try too hard. ;)
Change it up a bit, see what you think looks good, and then, after writing out the headings and arranging them and editing as necessary, go to your post's HTML (see below).
3.
Yes, you're dealing with HTML so you need the code, which is basically
the skeleton of the post. You're going to add to the skeleton, not
change or take away, so go ahead and click on "HTML" which is at the
upper lefthand corner next to "Compose".
Once you click on it, it's going to be chockful of confusion but don't get stressed out! Mine looks just as bad as yours and I'm still doing it. This is what yours should look like, roughly. Hopefully it says difference stuff (it better, plagiarist).
4. You should be able to see where your headers are or else you haven't added them (if not go back to step 2 and read slowly and carefully until you've gotten back to step 3). It should look like this (or similar):
<a href="#withinposts">
...right before each header (example below). It will look really weird, but keep your head on your shoulders and stick with it. You'll be so glad you did once you see what it looks like (still really weird, but you're in HTML so of course it does).
5. Now that that's in there, copy and paste this code...
</a>
...right after each header (example below). It still looks really weird, but at least it's there. Draw a deep breath, calm yourself, take a quick drink of water, stop shaking, and move on. You've finally completed what should have been the first step (not the fifth). Whupsy.
6. Now that you've finished that, it's time to tell the code where you want to jump to. It knows, now, that you want to jump somewhere, it just needs to know the exact location. This step is to show you how to tell it where to go. Simple. Of course, it involves a code because you are in HTML so of course there's going to be a code. Insert this code...
<a name="identifier">
...right before the point of interest. Example, for my blog, I want the first header, "Chapter One", to jump to, uh, Chapter One. In this case, then, I would insert the above code right before THE REAL Chapter One (not to be confused with the HEADER called "Chapter One" - get it?), like so:
Do this just to the first point of interest (that would be the *real* Chapter One), because I don't want you getting confused. Take your time and do what I say and it should turn out fine. So just stick with the first, in this case, chapter, and you can go back and deal with the others after you've dealt with this one.
7. You now have the first part of the code. All you need is the last part, which is going to be the same last one as the last last one. Get it? Good. Insert this code (look familiar?)...
</a>
...right after the point of interest. It should look like the picture below. If it doesn't, change it so that it does because otherwise it won't work. Just trust me on this. It won't.
Now comes the fun part that will put everything into working order and kick your blog post up a notch! Ooh exciting.
8. Go to back to the header (not the point of interest - the REAL LIVE header). Wherever you want this header to take people, for example, if you want the header to take people to Chapter One, remove the "withinposts" from between the < and >, inserting your own words. If you don't understand what that means, here are some pictures to help you understand:
 |
| #1. highlight "withinposts". |
 |
| #2. remove the "withinposts". Goodbye. |
 |
| #3. add your text, whatever it is the blog is supposed to use to find the spot to jump to. |
Hope the pictures help a little bit more. In picture #3, I just highlighted it not because you're supposed to remove it for some reason, but because I wanted you to be able to see what I had put in there. My opinion is that you should label them all as "one", "two", "three", so that you're not confused. You can put whatever you want in there but it has to match up with the location word, which might be confusing, but that's the next step (below).
9. Do that step to every single header. Once you're done, go back to your point of interest (my "Chapter One"), which is the location that you want to jump to, and insert the same word as the one in picture #3, whether that's "one" or "hello" or "1" or "goodbye" or "slkdjfalsidjf". All you need to do is copy and paste, or just type, that same word into the location's code which is "identifier". See picture below if you're still confused (I am, too).
 |
| #1. highlight "identifier", but leave the quotation marks (also called inverted commas). |
 |
| #2. remove the "identifier", but leave behind the inverted commas (also called quotation marks). |
 |
| #3. add your text, in this case "One", which is the same as the text in header #1. This will direct the reader to the right spot, which is why it's so important that they're the exact same. EXACT same. |
These should be identical to each other, no difference at all. You can see that they're both three letters long, the same three, and that both O's are capitalized. You want them identical so that there isn't any trouble in finding the spot you want to jump to. This should be pretty intuitive and if you're confused as to why it's so important that they be the exact same, you can comment and ask, but I'm not going to go into that for those of you who already understand more than I do.
And there you have it! Yes, you have finally come to the end of the tutorial. Now all you have to do is go back and do the exact same to each and every one of your headers/points of interest. And for those of you who haven't done that because you didn't understand what you were doing, go back and read what I have to say about that in step #9, right after the first picture. It shouldn't be too hard to find.
That is all. Very easy and if you have questions, comment below. I never get comments so I should respond fairly quickly to yours! ;) Anyone can comment, even those of you who don't have blogger accounts.
Thanks and good job for reading all the way through! Hopefully I was a little more intuitive than those other people out there who are confusing, because I'm going to use this tutorial for my other blogs and if I'm just as confusing then I'm in as much trouble as you are. ;)
P.s. I used this tutorial on my blog and it worked the first time - and that was it. I'm working on fixing the problem but right now I'm kind of confused as to why it's not working. After visiting the HTML coding of the page, I noticed that blogger had added a bunch of junk which might look familiar to you: "https://www.blogger.com/blogger.g?blogID=972470579327523667#Nine" (bold is the stuff Blogger added). It will only look familiar if you've seen it and since I don't know whether that's the problem or if it does that to everyone, I can't say you'll get this once the link stops working. Who knows, it's confusing to me too (I did remove the part in boldface and then it really stopped working - it didn't take me back to my posts which is what it did before, but then it stopped taking me anywhere). But I am working on it and trying to figure it out and if I get it to work again, I will do another tutorial on how to fix the problem. If your link(s) have stopped working too, please tell me because I want to know whether this is my computer being a problem, if it's the post, or if it's just Blogger being itself. Comment below or email me and tell me what yours looks like! I'd love a link to your blog. :)
Google search: "create link to sections within blog post"
No comments:
Post a Comment
keep it simple, keep it clean, and keep it on one idea! Comments that don't follow these instructions will be removed immediately. Click here to learn how to insert boldface, italics, and links into your blogger comment.