11.02.2010

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!

7 comments:

  1. Excellent tutorial! Thank you! Any chance you know how to remove the border from it? I use borders on my photos but don't like it on the "read more" image. :( Adding you to my blog list. :)

    ReplyDelete
  2. I have just found your blog... love it! I'm new at all this, so this is sooo very helpful!
    Everything worked great... but I don't have a "button" that says "read more" or "click here to read more" etc... where do I get that?

    ReplyDelete
  3. Great thing you have discussed in your post. Thanks for all this work. Web Designers.

    ReplyDelete
  4. Hi!
    I tried doing this and I couldn't get the picture to show up. I tried dropbox and photobucket and it didn't work.. so I tried just getting rid of it but now my html is all messed up and it won't save anything because it finds mistakes.. and now at the bottom of each of my posts it says,

    "Read more »
    b:if>"

    Even without a page break in my post. Its super ugly and frustrating to have that there.. is there any way you could help me? I even backed up html before i did it but it won't go away..

    lacynicol@hotmail.com

    ReplyDelete
    Replies
    1. Never mind I fixed it! Although.. I'm wondering why my pictures didn't show up? I tried photobucket and dropbox.. neither worked.. am I missing something?

      Delete
  5. You share nice tutorial related blog, which give me some good ideas in creating my own blog, For more detail you can
    Visit our site here

    ReplyDelete

Related Posts with Thumbnails