How To Use A Button As Read More Link On Your Blogger Blog

Recently i shared a tutorial on How i added auto read more with thumbnail to my blogger blog. If you were able to successfully integrate it into your blog template then here is another tutorial on how to style your read more link by using a button as the link.
If you check my blog home page then you will see i am already using a button as my read more link. You can also see it in a screen capture of my blog in the image below.

How to Use a Button as your read more link:

=> Login to your blogger dashboard

=> Navigate to your template section and click Edit Html

=> Use ctrl + F to locate this code in your template html section
<span class='readmore' style='float:right;'>

=> When you find the code it will look like the below code

<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a>

=> Replace The Read More » in blue colour with the code below

<img src=""/>

=> Click save template.

Note: You can also replace the  link of the button with the link of any button which you chose to use.

Now you can go and view your blog. You should have the read more link showing as a button.

I hope this tutorial was helpful. You can share your contributions using the comment box.


  1. Nice one boss... already implemented on my blog..

    1. hello, i am glad it worked for you

  2. Hi Kaesy,

    Couldn't locate tag span class='readmore' style='float:right;'> in my template. Any alternative to it? Please suggest.


    1. Oops! Sorry, my browser crashed. Should work after restarting.

    2. Can only locate this < div class='readmore-wrap'> Should work with same process?

    3. Hello, What blogger template are you using?


Post a Comment

I Love To Hear From You. Feel Free To Drop Your Comments