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!