Customize Blogger Read More Links With image Buttons

Add This To Del.icio.us StumbleUpon This Add to Technorati Digg This

I'm happy to share here some related tips for those seeking to learn how to customize and style the 'Read More' or Jump link in various ways.

Please download a copy of your template before applying any changes.

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Then, find (CTRL+F) this code in the template.

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

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

if it’s not in your template you’ll have to add it
So,find (CTRL+F) this code in the template.

<data:post.body/>

and 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 this trick.

after applying the first step to your template, you should have this code added to your template :

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

This code will display your read more link in this format : Read More

and to change the text to image / button , we should replace the word Read More in the code with the following

<img border="0" src="Paste here the button Image URL"/>

so you should have some thing like this

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbbevmmT7Dn88CkQQ5oLuFKJph14fZqQ81Bj1-Rf6rAENao80ATLfrWt6pfHu3ZSDWzLcB49kDYG_FxLoBo1jyNwe2I-BYAMvCl1DvDaIGbppKynzVjERxQKIuOSV5EH5QMTdYj2XVSykn/s1600/images.jpg"/>

if you want to control where it’ll be displayed, you should add small tag for the code, and the new added tag in red color.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="Left"><img border="0" src="Paste here the button Image URL"/></p></a>
</div>
</b:if >

This will display read more in image button aligned to left.

or

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="right"><img border="0" src="Paste here the button Image URL"/></p></a>
</div>
</b:if >

This will display read more in image button aligned to right
Now click Save Template.

Here is some good samples for read more buttons :

 

And you can find more buttons by searching in google for “read more button”.