How to change your read more link into a beautiful read more button

Lets make things very easy for ourselves! but before then, I wold like to take you through how you can change you read more link in your blogger into a logo very simple and very easy as well. You would agree with me that the beauty of your site together with the content in your site is exactly what triggers
people to come to your site as well as getting returning readers.. make your site highly different from others..!


Now to start with, Study this procedures or method very well so you would no mistake anything for anything and cause harm to your loved and well designed site. I always recommend that before any changes is done to your blog especially from the HTML you first back up your Blog Templates to avoid any inconvenience...
I believe you know how to add a read more break link in your post.. Now i assume you know this things already before trying to change the Link to a button...

Follow this steps carefully to change your read more link into a read more button

• Go to your bloggers dashboard , select template and edit HTML template

• Find this text by CTRL F and paste this text in it (   <b:if cond='data:post.hasJumpLink'>  )     

you should find something like this

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

• Remove this code in it      + &quot;#more&quot;

•  Replace the code below with the button HTML  

BUTTON HTML (replace the code with this )

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR6gH5TkASaSjyP5bpSFN-DXmcbELGUxdxQt6uXgxSGSYt_5llvc2jGVyZEZA8uiuKDKUhtTGs__V34fr97f_Gs8R22ynnuUtDpGyf7JTbRg9YSsh23ur30qfvS-BmeqVKMYLoxD65WI04/s1600/read+more+in+blogger.gif" width="87" height="47"/>

note you can change the size of the button to any reasonable size you want

• After everything, it would look like this

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url ' expr:title='data:post.title'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR6gH5TkASaSjyP5bpSFN-DXmcbELGUxdxQt6uXgxSGSYt_5llvc2jGVyZEZA8uiuKDKUhtTGs__V34fr97f_Gs8R22ynnuUtDpGyf7JTbRg9YSsh23ur30qfvS-BmeqVKMYLoxD65WI04/s1600/read+more+in+blogger.gif" width="87" height="47"/></a>
</div>
</b:if> 

Save your templates and see it working