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 *:-w waiting.

    1. 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:

    <div class='jump-link'>

    <a expr:href='data:post.url + &quot;#more&quot;' 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:

    <div class='jump-link'>

    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>New Link</a>


     Replacing the "Readmore" Link with an image/Button

    <div class='jump-link'>

    <a expr:href='data:post.url + &quot;#more&quot;' 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;

    .jump-link {

    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.

    I hope you got a lot of help from this, and your "ReadMore" is ready to go with a distinctive twist *o|^_^|o music. If you have problem following the steps, kindly Comment below.



    1. Good! I've been looking for this

    2. I'm doing what it says when adding the image link but I get this error.

      Could not load template preview: Error parsing XML, line 1520, column 165: The element type i m g must be terminated by the matching end-tag "< / img>".

      1. It is requesting for a closing Tag. Thanks it will be corrected.


    Any problem? Comment below.