Bogger - How to Jump Link

 I know very little HTML.  In fact I could correct that and say I know basically nothing at all about it.  I started a free online course almost 2 years ago to start learning but it was summer time and I had other distractions going on like jumping on the trampoline and trying to fix my CRV.  Anyway, I know what jump linking is or rather I know that it is possible but I have never actually created one before.  In my previous post Buying a domain name I listed it as something new that I learned and BOY did I learn.  I am sure it was mostly due to ignorance but I had a heck of a time figuring this out.  For something so simple I thought there would be thousands of tutorials and how to videos but everything I could find did not do the best job of giving an in depth step by step guide.  So here is my step by step guide for you, enjoy!

What I learned

• How to Jump Link
• How to arrange Blogger's HTML view so it's readable

How to Jump Link

Do not be afraid but there is a tiny amount of code you need to write in order to make this happen.  So let's rip the band aid off quickly, this is the required code

<a href="#jump1"></a>

<a id="jump1"></a>

Okay!  We survived, not all that scary right?  Now that we know the code let's get started

• Open the blog page you are editing

• Open the page view drop down menu (the pencil looking icon in the upper left)

• Select the HTML view option
• Click the format HTML button

• Select the find tool

• Type in the text you are adding the jump link to (in my case "How to Jump Link") and press enter

• Select the area where you are jumping from

• Insert <a href="#jump1"> directly before the text

• Insert </a> directly after the text

• Selection the area where you are jumping to

• Insert <a id="jump1"> directly before the text (notice the # is not needed here)

• Insert </a> directly after the text

• Switch back to Compose view

• BOOM! D-O-N-E, your page should have jump links now.

Something to note.  In the above walk through I used the word jump1 to showcase how this jump link thing works.  In reality that can be changed to anything that you want it to be as long as there are not any spaces in the word.  One key point to remember though, this text needs to be exactly the same in both locations to work correctly.  If you have multiple jump links the text will need to be different for each jump link. i.e., "#example1" to "example1", "#example2" to "example2", "#example3" to "example3"

Lastly, this took me quite a bit of time to figure out and I wanted to give special thanks to another blog I stumbled across that gave me the information I needed to figure this out.  Swing by and give this blog and check it out, I know I will be.  Easy Blogging Tricks

How to arrange Blogger's HTML view so it's readable

Here is some great news!  You already know how to do this because I included it in my tutorial above.  I wanted to add this in because it is a feature I discovered by accident while trying to figure out how to add in jump links.  This made it sooooooooo much easier to read the code and figure out where to add in the new code.  All you need to do is press the 3 horizontal lined button (shown below) found on the format banner while you are in HTML view.

Looking forward

Now that I have learned this new skill I plan to update my old posts and include jump links in my new post.  The only way for this skill to really sink in is to continue to use it until it's second nature.  I am super excited that I was able to figure this out and share it with you!

-John