How to Use Blogger’s Integrated Read More Feature

Mukund, who often leaves comments, suggested I try the new Blogger feature to create post summaries on the home page. Well, it was quick and easy! It’s great for blogs that have long posts — you can show magazine style summaries with just enough text to get readers to click the ‘read more’ link. Instead of 2 posts, I now have 6 highlighted on the home page.

This may be your dream solution since most Blogger template hacks are very complex and don’t work for older posts! So try this. It will be a lot easier if you switch to the new Blogger editor. The editor has loads of new advancements on its own, including better image handling!

Follow instructions in Google’s overview of the new editor.

Steps:

  1. Edit your last few published posts. In each post, position the cursor in front of the sentence you want to excluding text from the summary. This is where the ‘read more’ link appears on the home page.
  2. Click on the ‘jump to’ icon on the right side of the editor toolbar.

    A separator appears across the page, dividing the summary and the rest of the text. This is the visual equivalent of the html code, to avoid accidental deletion. Of course you can move it around or delete it.

  3. Publish the post.View the homepage. Click on the ‘read more’ to view the full text. If the ‘read more’ is not there you must update your template. This only happens if you’ve heavily modified your template.
  4. Only do this step if the read more does not appear. This is the excerpt from Blogger help article for creating summaries:

    To do this, access your blog’s Layout | Edit HTML tab, and first backup your template by clicking the Download Full Template link at the top of the page. This will download an XML version of your template which you can upload later at any time if you need to.

    After backing up your template, then click the Expand Widget Templates checkbox, and scan your HTML for the following snippet:

    <data:post.body/>

    Once you’ve located that code, paste the following snippet directly below it:

    <b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
    <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
    </div>
    </b:if >

     After you’ve pasted in the code, click Save and then you’re done!

  5. Then adjust your Layout, Settings, Formatting to show more posts. Don’t forget your Adsense settings for ads between posts might also need to be changed.

For new posts, just use the jump icon as you compose your article! You can then change all of your posts over time to give summaries in search results as well. 

Works like a charm. Now I need to show recent posts gadget only on the single post pages — it’s now redundant on the home page. Oh well… Took care of that with this post: Hiding widgets on the home page.

If you found this post useful, leave a comment to let me know. Grab the BPWebnews tips button and share the luv with others. Get future posts in your RSS feed or by email.


If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.


8 Comments

  1. This is a great idea. I've seen this on site and wondered how they did it. It looks cool. I might try it when I get time. So many irons in the fire right now. Hopefully I can get time to put a new article up soon.

  2. Hi there! Long time since I left a comment here. Had lots of problem with my net connection. By the way, your blog looks much better with the read more widget installed in it! Whole new look. But, there is one problem now, that is, Print this Page box is very odd. Take a look at it yourself. It is not aligned properly!!

    Recent blog:=- Add A Sliding Featured Content To Your Blogger Blog

Comments are closed.