Customizing the "Continue Reading" Link with CSS

August 13, 2014

Note: Today's tip uses the Custom CSS feature, which is available at the Pro Unlimited subscription level and above. Upgrading is easy - learn how here.

If you use the Split Extended Entry feature, you know that it's a great way to tease your readers with an excerpt of your post on the main and archived pages of the blog. The link that appears then easily guides the reader to the rest of the post content.

Here's how it looks:

Let's learn how to jazz that link up a bit. The class name for the link is entry-more-link, so that will be our starting point. To keep things simple, let's make the link a little larger in size and bold, like this:

.entry-more-link a { font-weight: bold; font-size: 125%; }

Changing the font is as easy as:

.entry-more-link a { font-family: Courier, Arial, sans-serif; }

It's a good idea to stick to websafe fonts. You can learn about those at w3schools.

A color change for the link is easy, too! You can find a ton of colors to choose from here. Just replace the CC6600 in the example below with your own color code.

.entry-more-link a { color: #CC6600; }

If you want to get really fancy, you can replace the entire link with one image. This is great if you have a special font you want to use or if you want to draw attention to the link with a graphic.

First, create your image and save that to your computer in a websafe file format - GIF, PNG or JPG. The image shouldn't be too large. Our example is 160 pixels by 35 pixels - large enough to stand out but it doesn't dominate the post too much.

Then, go to Library > File Manager in Typepad and upload your image. After uploading the image, click on the filename in the listing. That will open the image so you can copy the URL from the browser's address bar.

Next, go to Blogs > Design > Custom CSS and add in this code:

.entry-more-link a {
display: block;
text-indent: -999px;
background: transparent url(http://example.typepad.com/folder/read-more.gif) left center no-repeat;
padding: 10px 0;
}

Be sure to update the code with the URL for your image in the area highlighted above. You may also need to adjust the padding to allow your full image to show. When you save and view the blog, you should see your image where the "continue reading" link was, like this: