Friday, September 18, 2020
Home Blogging Tips & Tweaks How to Add a Read More or Continue Reading Button In Blogger

How to Add a Read More or Continue Reading Button In Blogger

As a new blogger running a blog that is powered by Blogger, you should have noticed that all the default templates readily available on Blogger theme section when enabled for your blog will always display your full post instead of a summary of the post as seen on other blogs that are also powered by Blogger. If you have come across such blogs which are still running on the default Blogger themes, you should have noticed how annoying they are since you will have to scroll to the end of one post before you can see the next post.

The beautiful thing about Blogger is that it is very flexible and user friendly, allowing you make changes to your blog’s template without much technical know how. Adding a Read More or Continue Reading button makes your Blogger powered blog more user friendly as your blog visitors will only be shown summary of each of your posts when ever they visit the blog’s homepage.

To add the Read More or Continue Reading feature to your blog in a situation where you are using one of the free Blogger themes available in the Blogger theme section, go through the below guide;

  • Login to your Blogger Dashboard.
  • Go to Template >>> Edit HTML.
  • On the Edit HTML page, search for the below code using Ctrl + F.
<data:post.body/>
  • You will see more than one <data:post.body/> when you search for it. Basically there are three <data:post.body/> in every Blogger template. To add the Read More or Continue Reading button to your Blogger blog, you will need to replace the second or the third <data:post.body/> with the below code snippet, depending on the one that works for you.
<b:if cond='data:blog.pageType == &quot;index&quot;'>

    <img expr:src='data:post.firstImageUrl' class='thumb' />

<data:post.snippet/> <a class='jumplink' expr:href='data:post.url'>Continue Reading</a>

    <b:else/>

    <data:post.body/>

</b:if>

Optional Customization:

Optionally, you can change Continue Reading as highlighted in RED above to whatever you wish e.g. Read More.

  • Finally click on Save Template and you are done.

For questions, don’t hesitate to use the comment section below.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments