How To Add Read More Link in Posts On Blogger

Updated:

by

How To Add Read More Button In Posts On Blogger

Do you want to show Read More link on your Blogger post? You’re in the right place. In this tutorial, I will guide you step-by-step on how to add/insert Read More in a Blogger post.

The Read More link is particularly useful for those themes which display the full content of the post on homepage. When the full-content of a page is loaded on the homepage it increases the page loading speed, which is not good for a website. And also, people don’t want to do long scrolling all the time to find their desired content on a website.

On Blogger Editor “Insert jump Break” is used to create “Read More” link. When you insert “Jump Break” it inserts a horizontal line in your editor. The content above the horizontal line will be visible and below will be hidden on your homepage. The horizontal line does not appear on your blog, it is converted to “Read More” link.

01. Add a Read More in a Blogger Post

In order to insert the “Jump Break” first move the cursor to the position where you want to show “Read More” link.

  • On Blogger Toolbar, click the More Options icon (Three horizontal dots).
  • Click the Insert Jump break(-) icon. A horizontal line will inserted in the position where your cursor was placed.
On Blogger Toolbar, click the More Options icon (Three horizontal dots)
  • You can see that the Read More link appears on the same position where I had added the Insert jump break.
The Read More link appears on the same position where the Insert jump break was inserted.

02. Style the Read More Button

In this section, I will share a small CSS code to add a button style to your Read More link.

  • On your Blogger dashboard, click the Theme from the Sidebar.
  • Click the CUSTOMIZE button.
On your Blogger dashboard, click the Theme from the Sidebar. Click the CUSTOMIZE button.
  • Click the Advanced tab to expand the options.
  • Click the Add CSS option.
Click the Advanced tab to expand the options. Click the Add CSS option.
  • Copy & Paste the below CSS code in the text area.
  • Click the Save icon, located at your bottom-right to save the changes.
.jump-link {
background: yellow;
width: 122px;
font-size: 18px;
font-weight: bold;
color: black !important;
padding: 7px;
text-align: center;
}
Paste the below CSS code in the text area. Click the Save icon, located at your bottom-right to save the changes.
  • You can see that the Read More link appears as a button. You can change the color, width, etc.
The Read More link appears as a button.
  • Get access to all Blogger Tutorials.
  • If you like this post then don’t forget to share with other people. Share your feedback in the comments section below.
Download Blogger Templates

Also Read

Related Topics: , , ,
Buy Domain and Hosting on Namecheap Now
Find a Freelancer for website design, logo design, graphic designing, WordPress, Blogger, NFT, AI, SEO, Digital Marketing, Amazon Seller Services, Voice Over, Script Writing, Data Entry, Translations, and many more...
Amazon Seller Services, Account Management, Amazon PPC, Catalog Management, Amazon SEO, Product Research, Product Sourcing.
Download Website Themes
Mangools SEO Tools

Subscribe to Our Newsletter!

Leave a Reply

Your email address will not be published. Required fields are marked *