How to Replace the Expandable Post "Read More" (Jump Link) Text with an Image Button

I wanted to kick of DIY Week with this tutorial because I had so many requests for it :)  If you don't know what or how to use expandable posts, click here for my first tutorial on Expandable Posts.

So, lets get right into it....

Check your "Expand Widget Templates"

and find (command F) this line of code:

<b:if cond='data:post.hasJumpLink'>

Now select the above code, all the way down to </b:if>  (shown below, it may vary slightly)

 and replace it with the code below (if you cannot find the code shown above, add the below code after <data:post.body/>)

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align='left'><img border="0" src="Your Button URL Here"/></p></a>
</div>
</b:if >

You can change where your button is aligned by replacing "left" with "center" or "right"

And Voila!  You have it!

How to do Expandable Posts in Blogspot

I was trying to clean up my site the other day, and I hadn't even realized that blogger's new posting editor allows you to condense your posts on the main page and click on "Read More" to read the rest of the article.  It is a fabulous way for your readers to be able to find what they are looking for more easily, with out having to scroll down long articles.

The new tool offered is called the Insert Jump Break tool.  This is what it looks like:

Here is how you post and use the tool: