Tutorial to Customize Blogger Read More / Jump Break Links With image Buttons

Tutorial to Customize Blogger Read More / Jump Break  Links With image Buttons. In the next tutorial I will provide 24 Read more buttons designed by me.

First as I always say Backup your Template, because if something goes wrong we can easily replace.



1. Login To Blogger Go To > Design > Edit HTML.

2. Expand Widgets

3. Search for the following code.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More </a>
</div>
</b:if >

4. If you found the code in your template, ok you have to skip this step. But before you skip it,
make sure that the third line in the code looks like this

<a expr:href='data:post.url + "#more"'>Read More </a> 

and not

<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> 

if you found it like the second one, please replace it with the first one.

5. If you cant find the code in your template you’ll have to add it . To add it,  search for

<data:post.body/>

6. Just after it, add the next code,

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More </a>
</div>
</b:if >

Now we finished adding the require code for customizing Readmore link.

7. To change the text to image / button , we should replace the word Read More in the code with the following :

Code to Show Readmore Left side: 

<p align="Left"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyHC3REMHlSGuA6b8RzQ4FYm_P7LRNM0CeHHktLxn7wpVGL0Q3tHVZA3p_4guAct55cmp7v3nscxT8BXkztqWyZK8IVPLBOqWUSo0dY58qgZpdmVELkeAm5uERPTJQ0MmISldsEWIkuIc/s1600/RM+21.png"/></p>

Code to Show Readmore Right side: 

<p align="right"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyHC3REMHlSGuA6b8RzQ4FYm_P7LRNM0CeHHktLxn7wpVGL0Q3tHVZA3p_4guAct55cmp7v3nscxT8BXkztqWyZK8IVPLBOqWUSo0dY58qgZpdmVELkeAm5uERPTJQ0MmISldsEWIkuIc/s1600/RM+21.png"/></p>

8. Now Click Save template. Done.