Understanding the Read More Link

Today we are going to tackle something that is very often misunderstood, and that is the Read More link. I touched on it briefly in a different DIY post, but I think it’s important enough to have its own tutorial =)

In order to understand how the Read More link works, we need to take a look at how the different post formats operate.

1. Default – Full Post

I’m sure everyone has seen this post format. You write a post and the whole thing gets displayed on your home page, and then the next post, and the next, and the next. You get the idea. Honestly, this is my least favorite of the post format types because it can cause a really long load time on your home page. I know some people like it because they don’t want to click into each individual post, but if you have a lot of images/rafflecopter JavaScript, you main page is going to be very slow.

2. Summary/Snipit Formatting

If you saw my previous DIY tutorial, you’ll know what I’m talking about with summary/snipit formatting. This type of formatting takes a featured image thumbnail(if there is one), displays a specific amount of text from the post and displays it next to the image, and a read more link is at the end. This type of formatting is done automatically and is all specified in your template’s code. The DIY tutorial I did for this formatting is specific to Blogger, however, you can do this formatting in WordPress too. The theme I installed already had this formatting set up for me, but there are probably plugins out there that might do this formatting for you if your theme doesn’t.

3. Cut Off Post Formatting

This formatting is what confuses people the most and will be the focus for the rest of this tutorial. This type of formatting shows on the main page, like the default full post format, but is cut off part way through. After the mysterious cut off, a read more link appears that readers can click on to read the rest of the post. Now how does that cut off point get set? Unfortunately, to the dismay of many, it is set manually for each individual post (for WordPress and Blogger). The cut off point does not happen magically, you have to specify it when you are editing a post.

For Blogger, it is that piece of paper ripped in half (you must be in the Compose tab):


So while you are creating the post, set your cursor where you want the break to occur and then click that ripped piece of paper icon. It’s the same process in WordPress except instead of a piece of paper, there is a button that says “more”.

In Blogger you can specify the text for the Read More button by going to Blogger > Layout:


Now the Read More link itself is in your Blogger template code. For most templates it will look like this:

To find this section of code in Blogger, go to Blogger > Template > Edit HTML (button) > and search for jump-link. That first “if” statement line is just saying “if you set a cut off point in your blog post, display the read more link.”

The next line is your .jump-link class that you can use to style your Read More button. Here is an example of CSS you could use:

After that is just the link. Now if you wanted the read more link to display even if you did not specify a cut off in your post, just remove the beginning and end “if” tags.

Another important thing to note about the Read More link is that it does not affect feed readers like Feedly or Bloglovin(it does affect Jetpack). That is a separate setting in the setting tab.

And that brings us to the end of this tutorial. I hope I covered everything but if you still have questions, just let me know in the comments =)

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

10 thoughts on “Understanding the Read More Link

    1. I actually think I would suggest the cut off post format, but only for the longer posts. Quite a few of your posts are short enough that you wouldn’t really need a read more link. You have a lot of cute meme banners but I’m just not sure if they would look the best pushed off and minimized as a featured image for the summary format. Hope that helps =)

  1. This was a great post! Very helpfull!

    Any idea why there might be an odd white box above my read more button? I copied and pasted everything just as you had it!

    1. Hi Jessica that is odd. Did you try pasting it in Blogger > Template > Customize (button) > Advanced > Add CSS then paste this:
      .jump-link {
      padding: 0 !important;
      .post-body {
      position: static !important;

      if that doesn’t work, just send me an email =)