Custom Archive/Label Page with Thumbnails and Titles in Blogger

In the last post, we discussed how we can replace the label archive page with a simple list of titles for that particular label and strip off the description to make your website more navigable. Today we'll discuss a further modification to that method to make this page a bit more beautiful.

I strongly recommend, that bloggers should add at least one image in every post. This makes definitely makes the UI attractive when you use things like popular posts widget with thumbnails. As you can notice in my website, the core colors are very basic and minimal design. However, this enhances the color of the images that i use, and they get automatically highlighted even when small. This is a very powerful tool, one should use. Silence is indeed the biggest tool in a comedian's toolbox!

Anyways, let's discuss how we can now replace those little arrow signs that we added last time by thumbnails from the posts.

** Make sure you backup your template before you make this change to it

1. Log in to your blogger account and open the blog that you want to edit
2. Go to 'Template' on the left.
3. Click on 'Edit HTML'. This will open the entire blogger template code for editing
4. (Ctrl+F) to search for <b:include data='post' name='post'/>
5. Replace this code with the following code:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<div style='padding:6px 0 6px 5px; solid #000; solid #000;margin-bottom:2px;color:#000000;'>
<img alt='&gt;&gt;&gt;' border='0' expr:src='data:post.thumbnailUrl'/>
<data:post.title/>
</div>
</a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

This should make it look something like this: