Hi dear friend,
I promised you in a previous tutorial, here ” Blogger Now officially Supports “Read more” links. ” that i’ll add a tutorial about customizing your read more links in blogspot.
So you have to check out the previous tutorial if you are not familiar with the new blogger jump breaks addition.
Now is the time for this tutorial,
after reading this tutorial you’ll be able to Customize you read more links in those ways:

• Change the text ” read more ” to another words.
• Add An Image / Button To Your “Read More / Jump Breaks ” In Blogger Links Instead Of Plain Text
• choose your read more link / button to be displayed on left side, right side or center it.

so lets start,

 Please <span class="IL_AD" id="IL_AD1">download</span> a copy of your <span class="IL_AD" id="IL_AD5">template</span> before <span class="IL_AD" id="IL_AD9">applying</span> any changes.    

this code should be included in your blogger template,

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

i’ll tell you where to add it, but before you add it, make sure that it’s not already included in your template.
Go to you blogger dashboard >> Layout >> Edit HTML and Check on Expand Widget Templates use your internet browser to search for the code,
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"'><strong>Read More</strong> </a><font color="#009900"><strong></strong></font>

And not

<a expr:href='data:post.url + "#more"'><strong><data:post.jumpText/></strong></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, and i’ll tell you where you should add it.
Go to you blogger dashboard >> Layout >> Edit HTML and Check on Expand Widget Templates use your internet browser to search for this code,

<data:post.body/>

and just after it, add the next code,

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

Now we finished adding the require code for customizing this trick.
this is the easiest on ever,
after applying the first step to your template, you should have this code added to your template :

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

This code will display your read more link in this format : Read More
and to change it to another word, simply, change the word Read More in the code in your template to what ever you want, Example? Keep reading, continue reading, read the rest, and more.
After changing it, click Save template and check out your blog.
Ok, now again, after applying the first step to your template,
you must have this code added to your template

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

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="<font color="#ff0000"><strong>Paste here the button Image URL</strong></font>"/><font color="#009900"><strong></strong></font>

so you should have some thing like this

<img border="0" src="<font color="#ff0000"><strong>http://www.allblogtools.com/image-url.jpg</strong></font>"/><font color="#009900"><strong></strong></font>

After changing it, click Save template and check out your blog.
And here is some good samples for read more buttons :
And you can find more buttons by searching in google for “read more button”.
lets back again for the first step, after applying the first step to your template,
you must have this code added to your template after applying first step.

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

this code will display read more link in default format, and your template may display it at left or right, but if you want to control where it’ll be displayed, you should add small tag for the code, andthe new added tag in blue color.

<b:if cond='data:post.hasJumpLink'><div class='jump-link'><br><a expr:href='data:post.url + "#more"'><font color="#0000cc"><strong><p align="</strong></font><font color="#0099ff"><strong>xxxx</strong></font><font color="#0000cc"><strong>"></strong></font><font color="#ff0000"><strong>Read More</strong></font><strong><font color="#0000cc"></p></font></strong></a></div></b:if ><br>

and you can replace the xxxx with Left, right, or center.
any in this way you can control the position for your link or button.
and here is some examples to help you

<b:if cond='data:post.hasJumpLink'><br><div class='jump-link'><br><a expr:href='data:post.url + "#more"'><font color="#0000cc"><strong><p align="</strong></font><font color="#0099ff"><strong>Left</strong></font><font color="#0000cc"><strong>"></strong></font><font color="#ff0000"><strong>Read More</strong></font><strong><font color="#0000cc"></p></font></strong></a><br></div><br></b:if ><br>

This will display read more in pain text aligned to left

<b:if cond='data:post.hasJumpLink'><br><div class='jump-link'><br><a expr:href='data:post.url + "#more"'><font color="#0000cc"><strong><p align="</strong></font><font color="#0099ff"><strong>right</strong></font><font color="#0000cc"><strong>"></strong></font><font color="#ff0000"><strong><img border="0" src="<font color="#ff0000"><strong>http://www.allblogtools.com/image-url.jpg</strong></font>"/></strong></font><strong><font color="#0000cc"></p></font></strong></a><br></div><br></b:if ><br>

This will display read more in image button aligned to right
i wish this can help you, you comments are welcome, and please share it if you found it useful
enjoy then !

---

Link To This Page:
<a href="http://bloogoz.blogspot.com/2010/05/customize-blogger-read-more-jump-breaks.html" rel="follow" target="_blank">Customize Blogger “Read More” / “Jump Breaks” Links With image Buttons, Text And Alignment.</a>

Link To Home Page:
<a href="http://bloogoz.blogspot.com/" rel="follow" target="_blank">bloogoz</a>

or subscribe in as a reader