How To: Do Page Jumps-Return to Top of Page. Updated to make it Simpler.


I’ve been doing something called Page Jumps on my articles lately and I’ve had requests how to do them. So here I am. Page Jumps are when you do things like click on something that says Return to Top and it takes you to the top of the article.

Here are the Codes to use to have your Readers Return to the Top of page by clicking on those words. Make certain to do this in your Text Tab of your Post Editor.
AND where you see quotation marks that look backwards? They should face the words. They appear backwards here due to the color fonts. I know it sounds crazy but apparently the quotation marks are prioritizing the font stuff over the text stuff. Go figure.

Anchor Code-It goes at the very top of your article.
<a id=”Top“></a>
Go To/Return to Top Code-It goes where you want the Reader to be able to click.
<a href=”#Top“>Return to Top</a>

Don’t worry about the colors. That’s just something I have from later in the post where the red is what you leave alone, and the blue is what you can change. The Reader won’t see the colors. Just the words Return to Top in that second code.

That’s the simple way without any explanation of how things work. You can do it and things are fine. If you want to understand more, keep reading. You can bail out of here any time you like.


 

If you’re still with me, I’ve been using a lot of references and instead of having all the links and colors filling up the body of the article/post, I decided to go with a little more professional look.

I am going to break this up into different posts for different Titled jumps, even though they are all basically the same.

Today will be

How To: Include a Return to Top of Page “Page Jump”.

I’ll be honest with you. If you can do this, You can do any of the other Page Jumps I will discuss later in the series. But I’m not going to clutter up things with too many things at once.

You need two pieces of HTML Script/Code to do the Return to Top Page Jump. I gave them at the top but don’t worry they appear several times in the article. You saw how simple they are.

Bur first there are things to remember about HTML:

  • Always use HTML in the Text Tab of your Post Editor. It will not work in the Visual Tab.
  • When going through this article, all Red Bold Text is what is to be left alone. Blue Plain Text within the HTML Code is what you can change to meet what your need.
  • Save often if doing a lot of HTML Code.
  • Always open an HTML Code intensive post in the Text Tab. 

The following is how the Codes appear in a generic form, before you do what you want to them. I will also call the codes by these two Titles throughout this series but without the word Generic.


Generic Anchor code:

<a id=”unique-identifier“>words for reader to see</a>

Generic Go To code:

<a href=”#unique-identifier“>words for reader to see and click</a>


For Return to Top of Page, the Codes will end up like this.

Anchor code:

<a id=”Top“></a>

Go To code:

<a href=”#Top“>Return to Top</a>


Let’s talk Anchor Code a moment. You can now copy and paste the Anchor Code to the top of your post before everything else, even with the colors. Remember  no one will see the colors or anything else. The only way anyone can see the Anchor Code is if you put in something between the ><. And even then they don’t see the actual code itself.

Place the Go To code anywhere you need to in your post. For the Go To code, the only thing people will see is Return to Top. Why? because those words appear between the >< in the Go To code.

You can now do the Return to Top jump in your post.


If you keep reading, I explain about how the two scripts work and what makes parts of them important. If you are simply going to use them as is and you think any further explanation might confuse you then stop now. Just make sure to scroll down to connect with me at various places like Twitter and Facebook.

But if you stay, those two pieces of code will appear again at the end, so you won’t have to scroll back up to get them or worry about copying and pasting right now.


You are still with me. Here is the Generic Anchor (GA) code and the new Top Anchor (TA) code, see how the Anchor code changed?

GA <a id=”unique-identifier“>words for reader to see</a>

TA <a id=”Top“></a>

The unique-identifier was changed to Top. That’s the word I am using to let the Go To code know where to go to. 

The words for reader to see was deleted. I personally don’t want anyone to see something at the top of my article that isn’t part of my article. You can have the word Top in there if you want people to know that’s where the Top is they are going to. The code would look like this

<a id=”Top“>Top</a>

In the Article the Reader would see the word Top in the article.

If I made the code look like this <a id=”Top“>Banana</a> the Reader would see the word Banana in the article.

But to make this work, the important part is that unique-identifier, what is now showing as Top. Now we need the Go To code and something for the Reader to Click so they can Go To the Top.

You have  the Anchor <a id=”Top“></a>
Now here is the Go To <a href=”#Top“>Return to Top</a>

Notice how the word Top appears after the = sign in both of the codes? The words are identical to each other. That is important. The script is case sensitive. Leave that # in the Go To code.

With those two scripts above you can now have some fun. You can put that Anchor at the top of your page, or anywhere in the page for that matter, and then paste that Go To script anywhere you like and as many times as you like.

That’s it for today.

If you want more detail today, and I mean MORE detail, click here. Otherwise I’ll have another article soon with more Page Jump tips. In the meantime,

Let’s connect. and then if you have a How To suggestion click here for the Contact Form.

https://twitter.com/RonovanWrites

https://www.facebook.com/pages/Ronovan-Writes/630347477034132

https://plus.google.com/u/0/+RonovanWrites/about

ronovan-profile-bw

 

 

 

 

Enter your email address to follow this blog and receive notifications of new posts by email.



You decided you wanted a little more. Okay. Well, it’s a lot more now that I’ve typed it up.

Anchor Code: <a id=”unique-identifier“>words for reader to see</a>

Go To Code: <a href=”#unique-identifier“>words for reader to see and click</a>

You can do all the Page Jumps you want with these two pieces of code. I’ll have posts coming up that breaks them out more but if you want to play a little here’s all you need to do.

See that unique-identifier?

As long as you have that Identical in both codes, you can put them anywhere in your post. You want someone to have the option of skipping down to here, like I did earlier? This is all you do.

Anchor Code: <a id=”here“></a>

Go To Code: <a href=”#here“>here</a>

The id is what is known as a Header. So the id/Header for the page jump to this section equals “here“. So my header is the word here. That lets the Go To Code know what Header word to Reference when looking for where to Go To. See what I did with the red bold letters? href, and what does the Go To Code include? href.


Review for a moment and catch your breath. All of that we just talked about means, the words unique-identifier must be identical in both codes to talk to each other. If they don’t, they won’t work. That’s all we said.


Now to walk through what each part of the Anchor code means. Like I said earlier, I’m not using techie words here. At least not intentionally. If you think is too much, bail now before I confuse you.

<a id=”here“></a>

Each character in the code means something. I may not give you the technical jargon, but I will give you the gist of it all.

  • <a (Tells the blog this HTML script is going to create a link up with another script on the page or another page. That’s what <a means, a link. Just like <p means paragraph.)
  • id=”here(This is identifying your Header. Your unique place for the Go To Code to unite with. The word you type where it says here is what the Go To Script is going to look for. It’s case sensitive and needs to be exact in both HTML Codes.)
  • >< (Anything between these two will appear to the Reader of the article/post.)
  • /a> (This closes the script. If you don’t have the / in there,  there might be additional words affected. I found that out with another type of script.)

Let’s walk through what each part of the Go To code means. Or at least what it means to us.

<a href=”#here“>here</a>

  • <a (Tells the blog this HTML script is going to create a link up with another script on the page or another page. That’s what <a means, a link. Just like <p means paragraph.)
  • href=“#here (This is telling the blog the HTML script is looking for a Header Reference that is equal to a specific word. When you created the Anchor with the Anchor Code you created a Header. Now when a Reader clicks the Go To words your URL will change slightly. For example, when you clicked the word here in order to come down to this part of the page the URL now ends with #here. Notice in the following how it appears when References is used as the Anchor. https://ronovanwrites.wordpress.com/2015/04/11/japan-manga-comics/#Tezuka6-8)
  • Now this is the cool part. You can put that link, that URL since it has that Header in it, with that #, in your Go To code where it says here, and now Jump To that spot in that page. Because that URL is an Anchor on that other page.) But what would that Go To code look like? <a href=”#https://ronovanwrites.wordpress.com/2015/04/11/japan-manga-comics/#Tezuka6-8“>here</a>
  • >< (Anything between these two will appear to the Reader of the article/post. This could say here, or Return to Top, or Banana. As long as there is one something in there for the Reader to click, they can Page Jump.)
  • /a> (This closes the script. If you don’t have the / in there, then there might be additional words affected. I found that out with another type of script.)

Now you can see with just these two codes you can do a lot.

Anchor Code: <a id=”unique-identifier“></a>

Go To Code: <a href=”#unique-identifier“>word for readers to see and click</a>

Return to Top


© Copyright-All rights reserved by ronovanwrites.wordpress.com 2015

 

 

Advertisements

How to do Bloglovin. It’s pretty easy.

Bloglovin’ It

What is it?

First, if you are a Blogger then you can break this up into three parts to make it less work for you at a time, although it’s not that much work. For some of us it just takes time away from blogging itself. And it LOOKS like a lot of work.

Let’s look at two basic purposes:

#1

Just to Follow blogs

For a lot of people that either don’t want to sign up for accounts with a lot of different blog providers just to follow a blog, or don’t want to subscribe by email, Bloglovin’ can be a great alternative. Simply go to Bloglovin.com, sign up and follow any blog that’s on the site or add a blog to the site. These blogs are from every imaginable blog provider, from blogspot to WordPress. I don’t mention those to promote those but one is toward the beginning of the alphabet and the other is toward the end.

#2

As a Blogger

For bloggers this is a great way to have people follow your blog without  having to do blog accounts or email subscriptions. Even I am hesitant to do the email and I am a blogger. I do follow a handful that way but I receive enough email driven from my own blog to keep me busy as it is. Okay so I don’t get that much from my own blog but it’s still email to go through. And the more email you have the more of it that turns into junk for you, my blog included.

Once you register your blog with Bloglovin’ then your posts will show up on Bloglovin’. Yes, you read correctly. You don’t have to share or do anything special after you have registered your site itself, not just registered as a member. I repeat after you become a member and then register/claim your site, that’s it.

How do you do it?

#1

Just to follow blogs:

Simply sign up by going to bloglovin.com. When you first register you’ll be asked if you want to use facebook or your email to register. If you use facebook then you will have any friends that are on Bloglovin’ already with blogs perhaps automatically in your list. Kind of cool. I did the email option simply because I like to keep my Blog world and my everyday world separate and manageable as I like it.

bloglovin_register

Then you search the categories for something you like or search for that favorite blog you like, perhaps ronovanwrites. Several of my friends are there but too many to mention and I don’t want to slight anyone here. Once you find a blog you like, such as ronovanwrites  follow it. Then every time you log in you will see posts available to click and check out and even on the right side of the screen see a list of your friends and how many posts they have going on at the time. Did I mention ronovanwrites is on Bloglovin’? Well if not, ronovanwrites is on Bloglovin’. Hey, if I don’t promote myself who will, right?

#2

For a Blogger you need to sign up just as above. Then: (Updated-12/09/14)

  • Look at the top and to the right and you will see the Heart icon.   Click and you will see ‘Settings’ in the drop down list. Click it.
  • Next you will need to scroll down until you see, Blogs by Me  and a button next to it that says Add Blog. It’s located under the Profile section. Click ‘Add Blog’.
  • Now a screen called Blog analytics comes up with the ‘claim blog’ button.
  • Type in your blog address and search for it. bloglovin claim blog imageIt should come up. Click your blog. If it’s not there you need to register it and Bloglovin’ does well showing you how.
  • Crazy as it sounds, my blog actually had a couple of entries already and I had never been to Bloglovin. I just picked the one that had the most followers and claimed it. It was my address. People can put in a blog they want to follow so don’t be surprised if you see your site there.
  • Whoa! What do I do with that box with the script in it and says ‘Claim blog’?bloglovin_register_html
  • To actually register you need to copy that text into a new post on your blog in the TEXT tab, not the VISUAL tab. You know, just like when you share a video.
  • Once you publish the post and go back to Bloglovin’ you are now registered. Difficult, huh?

How do you add the Bloglovin’ Widget?

No need for numbers now, this is all Blog World business. And it’s simpler than it at first seemed as I tried to follow some directions.

  • First thing, it’s a Widget that will be in your sidebar.
  • I would go ahead and have a Text Widget open and read so you can copy a simple code from Bloglovin’.
  • The image is in the code so no worries there. The Bloglovin’ Widget site has different widgets you can choose from.  Click ‘Get this icon’ under the one you like and copy the code into your text widget. Save it and guess what, you’re done.
  • You can always change your widget when you like, just choose the one that best fits you, your blog and your theme.
  • And also it’s not a bad idea to change up that widget at times just to make things look different and draw your readers eye.

“But wait, Ronovan, some people don’t look at those thingies on the side. What other way can I let a visitor know how to follow me on Bloglovin’?”

  • Copy a Follow me on Bloglovin’ image you like and add it to your media in your blog.
  • When you create a post, add the image and then click the image in your post editor and add the address to your actual Bloglovin’ site. Make sure to check the box for open in different window if you like. What, you didn’t know you could add a ‘link’ to your images? Yep, you do it the exact same way you do any other link. Click the image and then the add a link option in your post editor.
  • Sounds tedious that you need to do it each time. Nope. It’s just like adding any image but this time you have one that should be called Bloglovin’ and one link in your list called Bloglovin to add to your image.  It’s that simple.

We all freak out a little when we start using these new to us features/options, but the truth is, once you actually sit down and walk through it yourself to explain it, it’s easier than a lot of people think and make it sound. I’ve found some sites that just totally confuzzled me. I probably confuzzled you. Have questions, ask me, or I am sure any of my Blog friends who do Bloglovin’ can help as well.

Much Respect

Ronovan

bloglovin

2014 © Copyright-All rights reserved by ronovanwrites.wordpress.com