Saturday, August 15, 2015

An Easy Customized Read More Link

The read more link provided by Blogger, is, shall we say, slightly boring. I like mine inside a very visible box. So here is a simple way to add it without going into HTML. 

Go to Customize>Advanced>Add CSS...

Put the below code into the box. (Sometimes you have to hit the space key to get it to work. Who knows why?) Save.

.jump-link { text-align: center;background: transparent;} 
.jump-link { position:relative; top: 8px; } 
.jump-link a { background: #ce0000; color: #ffffff;padding: 5px;border-radius: 7px;} 
.jump-link a:hover { background: #dddddd;color: #000000;text-decoration: none;} 

Now of course mine is red. And my text is white. You can change that to your own preferred colors. 

And to change what your Read More says, go into Layout, click on Blog Posts, where you put your content. The second thing you will see is how to configure your text. You can write "Read More", "Continue Reading", whatever you want. And Save. 

That's it!

Enter your email address:

Delivered by FeedBurner
Follow on Bloglovin
follow us in feedly

No comments:

Post a Comment