Mommy Hacks #11 - Customize Your Jump Break in Blogger

Jump Breaks allow you to display snippets of lots of blog posts on your home page.

They're great because they give readers a good overview of all your most recent posts. Plus, they are really easy to insert via the Blogger tool bar. Just put your cursor where you want the break and click the icon circled red below.

The only problem is they are displayed in your default link font so they don't jump out, grab readers around the collar and shout "come and read this post".

Luckily with an easy mommy hack you can customize your jump break so it stands out.

For this hack you are going to edit your blog template so please back-up first.

Change the Default Jump Break Text

The first thing to do is to change the default jump break text.

In Blogger layout click on the Edit link at the bottom right of the Blog Posts box as below.

A pop-up window will be displayed. The second field down is your jump break text.

Write whatever you like in the field and click the Save button at the bottom of the pop-up.

All your jump breaks will now be displayed with the new text - fabulous!

But ... the text still doesn't jump up and grab readers so now we want to style it.

Style Jump Break Text

We are now going to edit your blog template, so if you haven't already please back up!

1. Now copy the code below into note pad so you can edit it safely.

The first bit of code tells the jump break to display on the right hand side - because we read top left to bottom right, this is the best place to put it for optimum impact.

The next bit of code defines how big we want the text to be (font-size), what colour we want it to be (color), which font we want it in (font-family) and that we want it to be in bold (font-weight). The final bit of code - .jump-link a:hover - defines the colour to be displayed when a reader hovers over the link.

Decide the font-size, color and font-family you want and change the values in note pad ...

.jump-link { float: right; }

.jump-link a, .jump-link a:visited {
font-size:15px;
color: #a91a00;
font-family: "Georgia";
font-weight: Bold; }

.jump-link a:hover { color: #000000; }

Now the bit where you MUST be careful.

2. Click on the Template link and then on the Edit HTML button highlighted below.

3. Now click carefully inside the scroll box displayed and press Ctrl-F on your keyboard. A search field will be displayed at the top right of the scroll box.

Enter the following code into the search field and press enter: ]]></b:skin>

The code you searched for will be highlighted as shown below.

4. Copy the code you edited in notepad and paste it just above the highlighted code as shown below and then click Save Template.

5. Now view your blog and check out the new Jump Breaks.

6. If you want to tweek the size, colour or font, just go back to steps 2 and 3 and change the values of font-size, color or font-family. Remember to click Save Template when you have finished.

If you don't want the jump break bold just delete the following code: font-weight: Bold;

7. Once your happy with your changes back-up your blog.

More Jump Break Styling

Once you've added this code to your template, it's very easy to style it further by adding simple borders.

These are a few examples of what you could do in just a few lines of code ....

To underline the jump break with a dotted line just
Click for more
add the code: border-bottom: dotted 1px black;

Click for more
To add some stylish brackets just add the code:
border-right: dotted 2px black;
border-left: dotted 2px black;
border-radius: 15px;
padding: 4px 12px;

Click for moreTo create what looks like a button add the code:
border: solid 2px black;
border-radius: 15px;
padding: 4px 12px;
background-color: #a91a00;

If you found this post useful, you might also enjoy my other mommy hacks and for loads of great blogging tips from load of great bloggers check out The Mommy Archive ...