Download Here :
  Small Read More Buttons. (12.4 KiB, 529 hits)

Download Here :
  Large Read More Buttons.zip (108.1 KiB, 692 hits)

Customize Blogger “Read More” / “Jump Breaks” Links With image Buttons, Text And Alignment.

I wish you all like it’ and please share it.

this code should be included in your blogger template,

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

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"'>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, 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'>
<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.

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'>
<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 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'>
<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="http://www.allblogtools.com/image-url.jpg"/> 

After changing it, click Save template and check out your blog.
And here is some good samples for read more buttons :
You Can Get Read More Buttons From Here


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'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >

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, and the new added tag in blue color.

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

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'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="Left">Read More</p></a>
</div>
</b:if >

This will display read more in pain text aligned to left

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

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

we mentioned some errors with it, and the reason for this problems is not about blogger.
It’s all about you, me, and blogger templates coders.
And the three problems are :

• It’s Not Working At All.
• Read More Link Is Not Visible On Your Blog
• LayOut And Side Bar Errors After Using it

so lets see the 3 problems and learn how to fix it.

Why ?
If you still using the old blogger Post editor, After adding this code

<!-- more -->

You go to your blogspot blog to see how is the new addition works, and you see nothing, there is no read more link and my blog still show the full post.

How To Fix It ?
in this case you should make sure that you inserted this

<!-- more -->

And notice that there is spaces before the word More and after it, its not

<!--more--> This is wrong code 

The read more / Jump Breaks works and your blog displays posts summaries only, but you can’t see the read more link so your readers won’t be able to read the full posts

Why ?
This is because you use custom template and the template coder haven’t added blogger Jump Breaks codes and properties to the template code,

How To Fix It ?
Go to Dashboard >> Layout >> Edit HTML and select “Expand Widget Templates”
then find the next code

<data:post.body/>

And After it add this code

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

After inserting the read more code in your post, it works perfectly, but the sidebar shifts to the blog bottom.

Why ?
the code <!– more –> is inserted between two div tags.

<div>.. .. ...  <!-- more -->. . . .. </div> 

How To Fix It ?
Change your post inputting type to Edit html instead of Compose.
and find the <!– more –>, If it inserted between two div tags. just change the div to span
Here is an example :

<div align="center" >
The post summary 
<!-- more -->
The rest of the post 
</div>

After Fixing it.

<span align="center" >
The post summary 
<!-- more -->
The rest of the post 
</span>

This is it, if you found this tutorial useful, please Follow us