customize "read more" on blogger

If you have already added a "read more" link to your blog, the next step is to customize it. You can change the text "read more" to "read full entry" or switch to an eye catching image instead.

Before we style the also known as "jump break link", let's take a quick look at the advantages of having a "read more" function on a blog.

Why add "read more" link?

for the readers:
they can see a snippet of the post right away
no more long posts to scroll just to view the next post
they can immediately choose which content to view based on the post summary

for the blogger:
he/she can show as many posts as he/she can on the main page
faster home page loading
he/she can showcase the posts by providing a "teaser" on each

On to the customization.

Change "read more" text.

This can be done in two ways.
Technique #1. Configure Blog Posts Widget.
1. Go to DESIGN. PAGE ELEMENTS page. Look for the BLOG POSTS widget. Click EDIT.
2. On the CONFIGURE BLOG POSTS pop up window, under MAIN PAGE OPTIONS section, change POST PAGE LINK TEXT to your preferred text. SAVE.

Technique #2.Change the JumpText tag in the template.
Backup your template!
1. Go to EDIT HTML page.
2. Tick EXPAND WIDGET TEMPLATES.
3. Search for <b:if cond='data:post.hasJumpLink'>. You'll see something similar to this:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'> <data:post.jumpText/></a>
</div>
</b:if >

4. Change the highlighted line to your preferred text so that it will be something like this.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'> new "read more" text here</a>
</div>
</b:if >

5. SAVE TEMPLATE.

Style "read more" text.

The style class of Blogger's "read more" is "jump-link". Therefore:
1. Go to EDIT HTML page.
2. Search for }]]></b:skin>.
3. Add these style codes above it.

.jump-link a {
font-size: 14px;
color: #f9f9f9;
background-color: #575757;
padding: 3px;
text-decoration: none;
}

.jump-link a:hover {
font-size: 18px;
color: #2d2d2d;
background-color: #eaeaea;
padding: 3px;
}

What it means.
jump-link a {} - style properties for the jump break link
jump-link a:hover {} - style properties for the jump break link when hovered by mouse
font-size - font size of the link and when hovered
color - color of the text link and when hovered
background-color - background color of the text link and when hovered
padding - space around the text link
text-decoration: none; - the link does not have an underline

Quick Demo.
Click to read more..

To learn more about styling links, check out W3Schools' Add different styles to hyperlinks and Create link boxes.

4. SAVE TEMPLATE.

Replace "read more" text with an image.

The process is similar to changing the JumpText tag in the template. Instead of text, replace <data:post.jumpText/> with an img tag thus the new code will be:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'> <img src="imageurlhere.jpg" border=0 /></a>
</div>
</b:if >

where:
imageurlhere.jpg - the url of the "read more" image
border=0 - no border around the image

Quick Demo.

Style "read more" image.

Basic styling of an image is simply adding a style property inside the img tag, i.e. <img src="imageurlhere.jpg" style="padding:8px; border:solid; border-color: #dddddd #aaaaaa #aaaaaa #dddddd; border-width: 1px 2px 2px 1px; background-color: white;" />

What it means.
padding:8px; - space around the image
border:solid; - border style applied to the image
border-color: #dddddd #aaaaaa #aaaaaa #dddddd; - color of the border from top, right, bottom, left
border-width: 1px 2px 2px 1px; - width of the border in pixel from top, right, bottom, left
background-color: white; - background color of the image

In this case, I created a drop shadow effect using simple css based on Notion's trick. You may also use CSS3 drop shadow to achieve the same effect.

Quick Demo.

Other "Read More" Tweaks.

3 ways to add "read more" on blogger
2 ways to add read more with thumbnails on blogger
show only post titles on blogger homepage
post titles with thumbnails on blogger

Related Blog.

Cool CSS Image Border Style