Using a Button or an Image as your "Read More" link creates a wide Tap targets i.e. helps make it apparent from posts on your homepage and increase clicks through your posts. It allows readers to see a brief of your post with a link “Read More" to continue reading the remainder of a post. Hope you know making the link stand out is very important. So you may want to replace that with an image or button. And fortunately, I've got some cool buttons just for you. But I'm gonna be posting that next time. So, right now lets sharply turn our 'READ MORE link into something else. I mean sweet buttons! Don't worry, it's as simple ABC...if you get any trouble doing this just comment below .
Finding the "Readmore" Link
- Access your Blogger dashboard, go to Template and click on the Backup/Restore button to save your current Blog design...supposing you messed with it you can just reverse the process by uploading it back.
- Still in Blogger dashboard, go to Template ⇒ Edit HTML.
- Click anywhere in the text editor and press Ctrl +F (Cmd+F on Mac). The "Find box" opens in the top right corner of the box.
- Input or copy&paste this <div class='jump-link'> and hit Enter to search for this code.
- By now you should have found something like this:
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
Replacing the "Readmore" Link with a Text
- Edit the text in red above with your new link text, like this:
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>New Link</a>
Replacing the "Readmore" Link with an image/Button
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><img src="Your image Link"/></a>
Your Image URL should be replaced with (Your image Link) above. The URL of the image will of course be the URL to your actual uploaded image. You can use these to upload and host your image, and copy the HTML URL;
Adjusting the "Readmore" Image.
Thinking of how to adjust the text link or image? You can do so by adding some simple code to the .jump-link element.
- Again press Ctrl+F to open the search box and this time find:
The properties you may need to style are;
text-align: center; This works for the alignment of the Text Link ; Right, Center or left.
font-size: 12px; This works for the font-size of the Text Link; how big.
padding:7px; This works for the packing of the Text link; Closely packed or loose.
border-radius: 3px; This makes your border curvy.
border: 1px solid #037aab; This works for the border of the Text Link.
background-color: #cee6dc; This works for the background of the Text Link.
You can also take your ReadMore to the Left or Right - just anywhere.