Customizing Tumblr “read more” breaks with HTML and CSS

Tumblr’s “read more” breaks are a perfect way to shorten long posts on your blog and Tumblr dashboard.

For text posts, Tumblr allows users to create a “read more” break in the text, by using this button, in the post editor:

image

HTML: Adding a “read more” link

To customize the “read more” button, use {block:More} within the text post block.

In this code sample, we’re creating a link to the permalink of the post, with localized text for “read more”:

{block:More} <a href="{Permalink}" class="button">{lang:Read more}</a> {/block:More}

Note that the break text is customizable, by changing {lang:Read more}. Depending on your Tumblr’s form, you may select a different “read more” break, such as “view the complete article” (for a news Tumblr) or “more details” (for a commerce Tumblr) .

Using {block:More} in your theme may look similar to this:

{block:Text}
<div class="text">
    {block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
    {Body}
	{block:More}<a href="{Permalink}" class="button">{lang:Read more}</a>{/block:More}
</div>
{/block:Text}

Now in our theme, at the bottom of truncated posts, we’ll now find a link that follows the rest of your post’s link styling such as this:

Simple HTML link styling

CSS: Styling the “read more” link

As usual, we can add some CSS goodness to add some click-friendly, button-like features to the “read more” link.

In the CSS, we’ll add styling to the .button class (which we added directly to the “read more” link, previously):

.button {
    background: #FF6161;
	border-bottom: 2px solid rgba(0,0,0,0.1);
	padding: 1% 2%;
	display: inline-block;
}

 Now our read more break has almost irresistible clicking properties:

Stylized button CSS

blog comments powered by Disqus