COS-Blog

How to change the look of your Read More button

Last updated: May 6, 2016

Available For:

Product: HubSpot Marketing
Subscription: Basic, Professional, & Enterprise

Changing the look of your "read more" button on the blog listing page can be very useful if you want the "read more" to stand out.

 

Example

Screen_Shot_2013-09-04_at_1.55.00_PM
  • Create a CSS class that will hold the styling for the read more button. Add this class and any custom styling into your stylesheet (which is accessible from Content > Content Settings > Blog > Templates > click on the name of your blog's stylesheet.)
  • Example code: 
.read-more-btn{
background: blue;
border-radius: 10px;
color: white;
}
  • Go to the template builder and locate your blog template. In the blog content module click the Edit Listing Template button to access the listing page HTML.

blog-listing-html.png

  • Locate the following code within the listing template HTML:
<a class="more-link" href="{{contact.content.absolute_url}}">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="{{contact.content.absolute_url}}">Read More</a>


read-more-code-1.png

  • Click Publish Changes.


Related articles: