Customize the Read More button on your blog

Changing the look of your Read More button on the blog listing page can be very useful if you want this button to stand out. Learn how to customize the design of the button or edit the Read More text.

Please note: editing the look of your Read More button requires a basic understanding of HTML. For support with custom design work, connect with HubSpot designers on the Design Forum.

Customize the look of your Read More button

To customize the look and feel of your Read More button, create a CSS class that will hold the styling for the read more button. Add this class and any custom styling into your stylesheet. Here's some example styling:

.read-more-btn{
background: blue;
border-radius: 10px;
color: white;
}

To add a custom class to your Read More button:

• Navigate to your blog template.
• Click the blog content module to select it in the inspector, then under the Post Templates section click Edit Listing Template to access the listing page HTML.

• Locate the following code in the listing template HTML:

<a class="more-link" href="http://knowledgeqa.hs-sites.com/cos-blog/how-to-change-the-look-of-your-read-more-button">Read More</a

• Replace the more-link class with your new read-more-btn class. The code should now look like this:

<a class="read-more-btn" href="http://knowledgeqa.hs-sites.com/cos-blog/how-to-change-the-look-of-your-read-more-button">Read More</a>

• Click Publish changes.

Edit your Read More button text

On your blog listing page, you'll see a preview of each blog post with a Read More link that opens the full blog post. To to change the Read More text to another language or phrase, you'll need to edit your blog's template.

• In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
• In the finder, click the name of your blog template.
• Once in the template, click the Blog Content module. In the inspector under the Edit tab, click Edit listing template.

• Look for the following code around line 55:
  

   <a class="more-link" href="http://knowledgeqa.hs-sites.com/cos-blog/how-to-change-the-look-of-your-read-more-button">Read More</a>

• Edit Read More to customize this text on each post preview on your blog listing page.
• Click Publish changes.