Customize Blogger Read More Text

Change Read more button, Change text, Add images or animations. How to customize Blogger read more button. These are the topics we are going to learn on this post. Blogger will add " Read more >> " Text as default Jump Break text. we can easily change this text and its attributes like font, size align using basic Html and Css codes. We also can link an image file for it. Have you seen animating read more buttons? It's very easy to do. Just make animating button and save it as .Gif image. now you can link that image to your Jump break as we learn on this post.

To replace you Read More Link do the following:

1. Go to Layout > Edit HTML

2. Back up your template

3. Press Ctrl + F , and in the search box search for the following code...

<data:post.jumpText/>

Change Read more text:

Now replace it using this code:

<P> Your Text </P>




You can enter any character, Number or a symbol in the "Your text" part.

Change alignment and other text properties of the Read more text:

               You can align your Read more button using "left" , "right" or "center" properties of Paragraph tag. For a sample lets use "Continue reading..." as our jump text button in center of the article page.. then that code will be 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'>

<p align='center' >Continue reading...</p></a>

</div>

</b:if>

Add an image instead of Text:

             Adding an image to the read more button is very easy. Just upload your read more button which you downloaded from below and get the direct image link. you can upload it to blogger or your picasa web album. easy way to get the direct link to a new image is create a new post and upload your image. then publish it and go to the published page, right click the image , click copy image location, now you can delete that post. once you have the direct link to the uploaded image you can use <img> tag to link the image to Read more button.

Download Read more buttons from below:

1.)

2.)

Now find this code on your Template code:

<data:post.jumpText/>

Now replace it using this code:

<P> <img src="image direct link"/></P>

You can use your image url in the red color text.  you can directly resize your image using width and height properties like this

<P> <img src="image direct link" Width="change" height="change" /></P>

That's It.