3 Issues / Problems With new Blogger Read Me / Jump Breaks And How To Fix It

I was so happy with blogger’s new addition “Read more”.
Or as blogger calls it Jump Breaks.
but after using it,
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.

1 .It’s Not Working At All. Why And How To Fix

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 

2. Read More Link Is Not Visible On Your Blog

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"'><data:post.jumpText/></a>
</div>
</b:if >

3. LayOut And Side Bar Errors After Using it

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.