BLOG-ger. SI-nangag (fried rice). it-LOG (fried egg).
All the tricks, hacks and treats while enjoying your breakfast.

Blogger 101. How-to's, tutorials, all the basics you need to learn about Blogger (dot) com.
Blogger Tweaks. Style and dare to tweak your blog. Make it custom. Make it different.
Blogger Fixes. Encountered errors, glitches while blogging? Check here for possible solutions.
Blogger Conditional Tags. If, Else then WHAT? Learn the secret behind most of the tweaks on blogger.

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.

how to customize read more link on blogger

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.

how to change the read more text on blogger

Technique #2.Change the JumpText tag in the template.
Backup your template!
1. Go to EDIT HTML page.
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>
</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>
</b:if >


how to change jump break text on blogger

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.


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>
</b:if >

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
share. comment. subscribe. link.


<< 5 Shared Thoughts >>

November 1, 2013 at 7:43 PM

Thanks for this, spent way too long googling the answer and was so relieved to finally find it. Works like a charm.

Sherab Tenzin
September 15, 2015 at 2:56 AM

Thank you for this trick. It worked well with my blog

Chantel M
February 1, 2016 at 11:02 PM

Great, but how do you center it?

Freshers Job
March 22, 2017 at 1:36 AM

Thank you so much. This is really great Post


Copy below HTML link to quickly create a link to this post.

back to share

about web.silog
Curabitur sodales leo et quam venenatis eu faucibus quam placerat. Aliquam metus diam, pretium nec commodo at, tristique nec mauris. Vestibulum urna massa, convallis vel laoreet in, ultrices eu nisl. Nulla facilisi. Nam tristique mollis semper. Mauris ac vestibulum lorem. Mauris erat libero, lobortis nec faucibus non, tempor in leo.

Nulla facilisi.
Nulla facilisi.
Nulla facilisi.

about the blogger
My Photo
In hac habitasse platea dictumst. Aenean congue, lacus in sagittis tempus, dui risus pretium nunc, semper bibendum arcu libero sollicitudin diam. Pellentesque lectus lectus, consectetur at sodales sit amet, sollicitudin eu augue.