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
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:
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
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:
background: MAIN COLOR;
padding: 8px 18px;
background: HOVER COLOR;
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 =)