How to Use Jump Breaks in Blogger

Have you ever gone to a site and seen those "Read More-->>>" links? Well, this is going to tell you how to put these in your posts. These jump breaks are very popular in SEO circles as a way of getting your visitors to click-through to an interior page on your site. However, I plan to use them to help speed-up the loading of my main page. What I'm planning on doing is increasing the number of posts that appear on the main page, but I really don't want to increase the loading time of the page. This being said, I plan to add these little breaks to my older posts; thereby, giving more exposure to my posts, while not compromising the load time.

For those of us who use Blogger, they have made it very simple to add these Breaks. Using the "New Post Editor", place your cursor at the desired location and click the "broken page" symbol (see photo).



If you decide that you would like to move the Break to a different location, you can just drag and drop it. To view it, go to the main page of your site and scroll down to the post and it should be visible (if you go to the individual post page, it will not be visible. Yep, I did this).

If you do not use the New Editor and would like to use HTML, just click the "Edit HTML" button and enter the following code at the point you want the Break...

<!-- more -->

See photo, below:



Now, on the chance that you are using a template you got from somewhere else and you don't see the Jump Break, you may have to enter some additional code. If you can take a look at the picture below, you will notice a portion of code that is enclosed in a box. You will need to go to the Layout section of your dashboard and click the "Edit HTML" button. Check the "Expand Widget Templates" box and page down to where you see the code indicated by the arrow (see photo below).



You will then need to copy the code below and place it where indicated by the box.

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

You will notice that in the code seen in the picture I have added a <p></p> tag. This is just to put a little space between the body of the post and the actual Jump Break.

Finally, if you would like to have your link read something other than "read more," than you can customize that as well. First, go back to the Layout page on your dashboard and click "Page Elements". Next, click the "edit" button under "Blog Posts" (see photo below).



Next, go to the area denoted by the arrow below and have fun.




source: goggle support