The ability to display post summaries and automatic thumbnails is one of the most sought-after customizations for Blogger blogs. Using such a feature enables you to create good-looking a cohesive layout on non-item pages, while the entire posts and full-sized images are shown on item pages.
Recent changes to Blogger's functionality make it possible to achieve this using only Blogger code - no need for JavaScript, awkward CSS customizations or restrictions on the length or format of our posts!
With only a few small changes to the template of your Blogger blog, you can display post summaries and thumbnails on the home page or in the sidebar using this easy to manage hack.
How to add Blogger post summaries and thumbnails to your Blogger blog in three simple steps
Here is the step-by-step guide to the easiest solution for adding post summaries and thumbnails to your Blogger blog:
1. Back up your template!
It is important to create a back up of your Blogger template before making any edits. This ensures you can easily restore the working template if anything goes wrong.
To back up your Blogger template, go to Design -–> Edit HTML in your Blogger dashboard and click the Download Full Template link near the top of the page.
You'll be prompted to save an XML file to your computer hard drive - this XML file includes all of the HTML and widget templates required to display your current Blogger design. Be sure to save this in an easy to remember location and make a note of the file name in case you later need to restore your working template.
2. Add the code to display summaries and thumbnails on non-item pages
The next step is to add the Blogger code which will display a summary and thumbnail of our posts. Go to Design -–> Edit HTML and check the „Expand widget templates“ box. Then search (CTrl + F) for the following line of code:
<data:post.body />
Replace said line with the following code:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Preview the change to your template and you'll see that your posts will appear in a format similar to this:
As seen in the screenshot above, the thumbnail appears above the summary. You can align the thumbnail more cohesively to the left or right of the summary by adding CSS to your template.
At this point, you can choose to save the edit to your template or add the CSS and preview the final effect before committing the changes to your blog.
3. Add CSS to align the thumbnail image
While still on the Design -–> Edit HTML section of your dashboard, search for (Ctrl + F) the following line:
</b:skin>
Directly above this line, paste the following CSS statement:
.thumb img {
float: left;
margin: 0 10px 10px 0;
}
This will align the thumbnail to the left of the post summary, and allow some distance between the thumbnail and text. It will look like this:
If you would prefer to align your thumbnail image to the right, exchange float: left; with float: right;
Preview your template to see how this makes your posts appear on the home page. When you're happy with the layout, save your template and enjoy your automated summaries and thumbnails!
How this customization displays summaries and thumbnails
While simple to add to our Blogger template in order for the function to work, there is a lot of complex conditional code in use to ensure the summaries display as they should.
First, the code checks if the page being viewed is an item page or not. If the page is not an item page, the summary/thumbnail code will come into effect.
The second check finds out if a post snippet is available (meaning: if the post contains some text). If there is a snippet, the code checks if a thumbnail is available; if it is, it displays the thumbnail followed by the snippet. Where no thumbnail is available (the post does not contain an image), only the snippet is displayed.
If there is no snippet available for a particular post, the complete body of text is displayed normally. This ensures that posts with no content or which feature only an image are displayed normally; no thumbnail is displayed, and any images are displayed at full size.
Finally, the code checks if the post contains the <!-- more --> tag. If it does not contain this specific tag, a "Read more" link will be displayed beneath the snippet, thereby ensuring that visitors can easily click through to read the post page. Where a jump-link is present, this is displayed as normal after the snippet.
Note: The code presented above is best suited for blogs with a newspaper/magazine-style layout and ones with a narrow design. Altenatively, you can use it to display the summaries and thumbnails in a widget.
P.S.: If your blog is using stand alone pages then this code may create problems. STAND ALONE PAGES MAY NOT BE SEEN AFTER INSTALLING IT!!
That’s all!
Good luck!
