Tutorial | How To Style A Jump Break Graphic Link

One of the biggest questions I get from both clients and readers is how I created my adorable jump break graphic link. If you are on the Blogger/Blogspot platform It is actually far easier than you would think (trust me here, I was taken by surprise when I discovered that it really is a simple tweak in one line of template code)

Since it is so super, duper easy, today I am going to share with you this extremely easy-peasy single line of code, tell you how to tweak it and get you going on having your own absolutely beautiful, custom jump break graphic!

Ready to get started? Clicky click my own pretty jump break graphic and let's get to making yours!

Now Blogger offers you the option in your blog post settings to change what you want your jump break to say but it's text only! What's a blogger to do?!

Well, the very first thing you need to do is have a graphic ready and hosted because you are going to need the image URL. Once you've done that, head on back here and let me show you how to get that graphic in your post. 

Back already? Ok! 

The next thing you need to do is make sure you are truncating your posts. These graphics need a place to go after all! 

Now back up your blog! I cannot stress enough how crucial it is to always back up your blog any time you are working with code. Simply go to your Dashboard >> Settings and "export" the XML file. 

Once you have done both of those things you will need to go to your Blogger Dashboard >> Template >> Edit HTML. 

I promise this will be painless and if you have a fear of coding, this is virtually fool proof!

Once you are in the code you'll want to hit CTRL+F and the word "jump".

Highlight that entire code and replace it with this one:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
<img src='DIRECT IMG URL' />
</a>
</div>
</b:if>

Next, where it says 'DIRECT IMAGE URL' you will paste in the direct image URL that you created and hosted way back at the beginning of this post. When you've done that it should look like this:

See how mine has the < center > (no spaces) in there? You have to add those ONLY if you want your jump break graphic to be centered in the middle of your post. Otherwise, leave it alone and it will automatically appear as left justified. 

Finally, save your template and then go look at your blog. If your posts are truncated you will see your pretty new image. Here's how mine looks:

There you have it folks. I told you it was relatively quick and painless! 

Start the Discussion:

Do you truncate your posts? Why or Why Not?

How/Where did you create your jump break graphic?

Until next time,

Happy Designing!