Blogger “Read more” link on posts

You can have your Blogger display whole posts on the home page or just a snippet with a Read more link.

To have a whole post displayed – just write your post as you usually do.

But if you want to have a Read more button present that takes you to the whole post, do the following:

 

more_link

 

Inside your post editor, place the cursor in place where you want the post snippet to end. Everything that’s above will be displayed on the blog home page, the rest only on a post page. Click the Insert jump break button above the editor. You’ll see that a new line appears in the editor marking the cut.

That’s it! Save the post, you’re done! Enjoy the result with your favourite coffe ;-)

 

Advanced use

To style the Read more link that will appear use these CSS classes:

.jump-link{ /* this is the whole div class */
}
.jump-link a{ /* only the link */
}
.jump-link:hover a{ /* link on mouse over */
}

You could do something like this for example:

.jump-link {
 background: black;
 display: inline-block;
 padding: 5px 10px;
 position: relative;
}

.jump-link a {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 text-indent:-999px;
 z-index:5;
}

.jump-link:before {
 position:relative;
 z-index:4;
 color:white;
 content: "Continue reading!";
}

So the read more button will appear this way:

continue reading

Notice that we’ve changed the text of the button and we didn’t have to modify the template file for that! Hurray!

PS. Of course add your CSS code on the Advanced tab of the Blogger Template Designer and not in the template code itself. Stay away from the code until there’s really no other way ;-)

SHARE

Leave a Reply