Customize Read more (Jump break) option in blogger

read more

Read more link facilitates the visitor of the blog or site to whether to read the content full story or not. By adding the jump break  (read mor) at your desired part of the post you can decrease the page loading time of the blog homepage and will keep your blog posts well organized.

In this post I am going to explain some simple tricks of customizing read more link like changing "read more" to "continue reading" or some other text what ever like and replacing "Read more" with any image you wish.



At first easiest way to rename read more.

Here I am explaining in new user interface of blogger

Login to Blogger. Then go to Layout>>Blog post>>Edit.
Then replace Read more with your text

    ex:- Continue Reading, Read the full story, full article, etc.,

I dont  prefer this way because you cannot customize much you can't even add your own image
in this method. But for those who just want to replace jump break  text this is best process.

To rename or add an Image


Go to Template>>Edit html, click "expand widget templates" check box.
Now find

<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>

Then delete + "#more" .


Now replace <data:post.jumpText/> with the text you want.


To add image


Just replace <data:post.jumpText/> in previous step with

<img src="http://your-image-URL.gif"/>

Remember to change http://your-image-URL.gif with your image url.


Stay tuned!
In further posts I am going to explain the wonderful ways to stylize read more without using any images.