Create 'Read More' with Jump Break Feature in Blogger
Why is the 'Read More' link not appearing after the post summaries on the homepage or main page? Post has break and shows snippet but the text 'Read More' is missing? What went wrong, asked a blogger friend? I was as bewildered since my blogspot didn't encounter this problem and creating the Jump break feature was simply a breeze for me!
After doing some research online, I've learnt the following and the reasons why the Read More text link is missing below the post summaries :
- blogspot blogs using any of the original templates selected from Blogger's template library shouldn't encounter such a problem. Inserting the Jump Break function in a post will automatically display the post's summary and present the Read More link below it on blog's homepage.
- blogs using a customized third-party template will have to add a snippet of HTML code into their blog's template to make Jump Break feature work as mentioned at Blogger Help.
- even though your blog template is that of Blogger's, you may face the problem of the missing 'Read More' text, if it had been highly modified or customized as attested at Blogger Plugins and probably encountering some other problems as stated at Blogger Buster.
How to make Blogger's Read More link work in customized templates :
- First, prepare and publish a post with the Jump Break function if you haven't done one yet. Learn how to create that function, if necessary. Then, check to view your homepage to see whether the link 'Read more' appear below the post summary. If it does, then all's fine, otherwise, you'd need to continue the remaining steps below.
- Go to Layout | Edit Template, then tick the Expand Widget Templates box. Use the browser's search function (press Ctrl+F keys) to find the word, jumplink. If the result shows, Phrase not found, that confirms that you'd need to add the relevant code to your blog's template to make the Jump Link function appear.
- Find the code, <data:post.body> and the rest, like this:
<div style='clear: both;'/> <!-- clear for photos floats -->
- Then, copy and paste the following code in red, directly below the above code as illustrated in image:
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
- Next, preview your changes. The 'Read more' text link should appear below the post summary. If the result is as expected, click Save Template and you're done!
Take note that if you have added the LinkWithin widget at the end of your post, the Read more link will be shifted below it. Find out how to rectify the incorrect placement here.
Hope this article had helped you somehow and put a smile on your face. It sure made me smile knowing that I've learned so much in helping a friend solve her problem.
Keep learning...keep sharing....keep smiling! :-D