Display image "thumbnails" on non-item pages

Styling the "Read More » text

The "read more" text (or whatever phrase you may have changed this to) is enclosed in a <div> with the class of "jump-link". This enables us to add CSS to our <b:skin> section to affect the style of this particular link.

For example, the following CSS will give the Jump Link a red background, with white text and 3px of padding, thus overriding any other style statements for any instance of this particular link:

.jump-link a {
background: #ffff00;
padding: 3px;
color: #fff;
}

We could also add a :hover property with different colors for the background and text to create a different effect when a reader hovers over the "read more" text:

.jump-link a:hover {
background: #000000;
padding: 3px;
color: #ccc;
}

If you're fairly confident with CSS, you could easily adapt these examples to include background images, rounded corners, and indeed any property which would work with a link in the post.

Replace "Read More &raquo" with an image

Those who would prefer to use a linked image instead of a plain text link can replace <data:post.jumpText/>  with image tags, like this:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img src="url_of_image" border="0" alt="Alternative text" /></a>
</div>
</b:if >

Where "url_of_image" is the true URL of your image as hosted by your image provider (Picasa Web Albums is my current preferred option, and free to boot!). 

Display image "thumbnails" on non-item pages

I rather like the hacks which enable automatic post summaries with image thumbnails, so was very interested to see if a similar solution can be used along with our Blogger Jump Links.

Unfortunately, our summarized posts do not (yet) offer an extra class to which we can add attributes for images displayed within them. Instead, we can use some conditional CSS to alter the size (and alignment) of images on non-item pages.

Here's the work-around I've successfully used so far:

Go to Layout>Edit HTML and locate the closing ]]</b:skin> tag using your browser's search function.

Immediately after this line, add the following code - adapted to your personal preferences of course:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body img {
img {
max-width: 100px;
width: expression(this.width > 100 ? 100: true);
float: right;
}
<style> 
</b:if>

Categories: