How to Enable Read More in Blogger and How to Use Image in place of Text

Without using the read more feature available in blogger your blogger home page might be too lengthy because full post articles will be displayed. Depending on your home page posts settings, it could be lengthy or way too lengthy.

Some third party blogger templates have the read more feature by default. This means that you do not need to bother yourself about the read more feature because these templates will automatically apply breaks to your posts and display only a few number of lines. Your site visitor must now click read more to read the full article; if he finds it from the home page.


Read more is particularly benefitial to your home page alone. If a visitor lands on a page on your blog other than the home page, they would not need to use the read more feature as the full article will be displayed

How To Apply Read More to Your Posts

If you have not been using the read more feature you only need to enable it for the posts that are displayed on your home page.

To apply the feature to your posts,
  • log in to your account
  • click on a post to edit it
  • Place the cursor on any point within the post article and click on the 'Insert Jump Break' icon to insert a break at that point

  • Update the post and check to see what you have done
If you have done it properly you should see the post with only a summary displayed and the full text available upon clicking on read more
Now, you need to do this to the other posts displayed on you home page. This is determined by your posts settings which can be modified thus

  • From your control panel, click Layout
  • On the layout page, look for Blog Posts layout and click on edit right at the bottom right
  • It should bring up a popup window on which you can change the number of posts you want displayed


layout setting blogger
 ... ... change number of posts displayed





How to use an Image in place of the Read more link


  • Log in to your blogger account and click on template (as you can see from the image above)
  • Next click on Edit HTML from the Template Edit page
  • Now click on Expand Widget Templates

expand widget template


  • Press Ctrl+F to search for .jumpText and you should see something like the picture below

search jumptext techbase


  • Now replace <data:post.jumpText/> with <img alt='Read More' border='0' src='image url here'/>
Replace 'image url here' with the proper image url


Download read more images for your blog free below
Learn how to host images on your blogger account and link to it from any site



read more icon-techbase



Subscribe via RSS or Subscribe by Email.
Like TechBase on Facebook

4 comments:

Unknown Says:

Great! this was the simplest and most useful tutorial (: Thanks !

Krisi Miller | www.krisimiller.com Says:

thank you thank you thank you!!!!!! I have spent half the day trying to do this and codes from other blogs were just resulting in errors. much appreciated!

Unknown Says:

thank you dude

Unknown Says:

Thank you so much :3

Post a Comment

Post your comment or feedback