The “Read More” feature of Blogger is a handy little one that can help condense your posts on your homepage and increase click-throughs.
A lot of bloggers utilize this feature, but sometimes the default Blogger text can blend in a little too much with your post. It’s important to make that link stand out so visitors know that they are supposed to click to continue reading the remainder of a post.
Luckily, this link is really easy to stylize and edit to your liking.
You can change the “Read More” text to something of your own choice, add an image instead of text, and totally stylize the look of the “Read More” text link.
I’ll show you exactly what you need to do below! HOW TO EDIT THE BLOGGER “READ MORE” LINK
1. In your Blogger dashboard, go to Template > Edit HTML
2. Click inside of the editor text box and press CTRL+F (or CMD+F on Mac) to open the Find box in the top right corner.
Inside the box, enter:
<div class='jump-link'>
and hit Enter to search for this line. 3. The code that is found should display as this:
<div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div>
TO CHANGE THE “READ MORE” TEXT
<div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div>
Edit the text in red above with your new link text, such as:
<div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'>Continue Reading...</a> </div>
TO USE AN IMAGE INSTEAD OF TEXT
<div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><img src="http://urltoyourimage.com/yourimage.jpg"></a> </div>
Replace the original code with an image code as shown above.
The URL of the image will of course be the URL to your actual uploaded image.
You can use Photobucket to upload and host your image, and grab the HTML URL to use here.
TO STYLIZE THE TEXT LINK To add your own style to the text link, you can do so by adding CSS to the .jump-link element.
Press CTRL+F to open the search box again and this time find:
]]></b:skin>
Directly before that, enter your CSS.
An example could be:
.jump-link {
text-align:center;
}
.jump-link a {
font-size:15px;
padding:10px;
border: 1px solid #000;
background-color:#ccc;
color:#000;
font-weight:bold;
}
.jump-link will style the DIV that the text is sitting in, while .jump-link a will style the actual link text.
Just something to keep in mind. The above code will render your read more link as this:
You can modify the colours and whatever else you like if you are familiar with CSS.
I hope this helps you come up with a unique Read More link for your Blogger blog!
Get a little creative with it and see if you can make it match your layout and stand out!
