This page has moved to a new address.

Crackin' the Blogger Code ... another HOW TO Blogger Tutorial: How to Use the Jump Break Function

Mommy Blog Designs: Crackin' the Blogger Code ... another HOW TO Blogger Tutorial: How to Use the Jump Break Function

Friday, August 19, 2011

Crackin' the Blogger Code ... another HOW TO Blogger Tutorial: How to Use the Jump Break Function

I was asked the other day about how to make my Blogger Blog look more like a WordPress blog. My first suggestion, as we talked about in that tutorial, was to remove the Blogger Menu bar.

Today here is another suggestion to make your Blogger look more like WordPress ...

Use the Jump Break function.

WordPress blogs are very neat, clean and organized. The Jump Break (A.K.A read more button) can really help you tidy up your blog. It makes your home page look a lot neater. You can get more info on the page, and get it in front of your reader faster when they don’t have to scroll and scroll and scroll. Jump breaks are very handy!

Here’s how to use them ...

When you are writing your posts in your post editor, you’ll notice a bunch of ‘buttons’ at the top of the post editor. There are buttons to bold your text, change the color of your font, add links, and more.

One of the buttons looks like a piece of paper torn in two. If you hover over it, it says Insert Jump Break. So ... in the middle of your post where you want to put the read more button in, click on Jump Break button. And that’s it. Super easy to do.

This will add a Read More>> link into your post on the home page of your blog.

The standard text for this is Read more. If you would like to change the wording, I can show you can do so.
  1. Log into you Blogger Dashboard ... Click on DESIGN ... then PAGE ELEMENTS. 
  2. In the Blog Post box, click the EDIT button at the bottom right. 
  3. One of the main options is POST PAGE LINK TEXT. There’s a box there that you can put in whatever you want. It could be CLICK FOR MORE INFO ... or READ MORE OF THIS AWESOME POST ... or whatever else you want it to say. Then click save ... and that text is what will show on all your jump breaks. 
But what if you don’t want just plain text? What if you want a graphic for your jump break? Here’s how you do it ...
  1. Create the image that you want to use ... and upload it into a file hosting service. Copy the URL of the image 
  2. Log in to your Blogger Dashboard 
  3. Click on DESIGN ... then EDIT HTML .. then check EXPAND WIDGETS. 
  4. I highly recommend at this point that you back up your template as we are going to playing around in the HTML. 
  5. Click CTRL F and a little window will pop up. Type into the window JumpLink. This should bring you to the spot on your template that we need to work with. 
  6. You should see the following code: 
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</b:if > 

Change the code to read this:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img src="INSERT YOUR IMAGE URL HERE" border="0"/></a>
</b:if >
7.  Be sure to put your image URL where it asks for it. (I know ... I'm sure you would have figured that out ... but I thought I would throw that in just in case!)
8.  Click save ... and refresh your blog. You should see your new jump break button in there! Congrats!

So how did that work for you? Were you able to follow along? Leave me your blog URL ... I’d love to check it out and see what you created!! Do you have any questions? I’d love to hear from you! And keep the questions coming!

I hope you enjoyed tonight’s tutorial on using the Jump Break feature in Blogger!

Happy Blogging!
Ro :)

Labels: ,


At August 20, 2011 at 12:09 AM , Blogger Kathy said...

What would the advantage be to doing this Ro? Someone once suggested that I do this since I write an essay, but I didn't quite understand why this would help, thanks! Another great, easy to follow tuturial!!!! Thanks again!!


Post a Comment

Subscribe to Post Comments [Atom]

<< Home