post titles with thumbnails on blogger

Others prefer a minimal look to browse over the posts found on blogger archive, label and search pages. It's easier and faster to scan through the posts if they're listed as titles along their corresponding thumbnails. Thus, here is a tweak to show only post titles with thumbnails on blogger archive, label and search pages.

Post Title With Thumbnail Demo on:
Archive Page
Label Page
Search Page - Home Page Older Posts
Search Page - Archive Year
Post Summary Demo on:
Home Page
Full Post Demo on:
Static Page


This tweak is a combination of How to Add Read More with Thumbnails WITHOUT JAVASCRIPT on Blogger and How to Show Only Post Titles on Blogger Archive, Label, and Search Pages with a lil twist. So don't forget to back up your template!

Step 1. Show Post Titles AND Thumbnails on Blogger Archive, Label and Search Pages Only.

1. Go to EDIT HTML page.
2. Tick EXPAND WIDGET TEMPLATES.
3. Search for <b:include data='post' name='post'/>.
4. Replace it with:

<!-- start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!-- end -->

THE TRICK.

<-- show on blogger archive, label and search pages only  -->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<-- show thumbnail -->

          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>

<-- show title -->

<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>

<-- ELSE show full post -->

<b:else/>
<b:include data='post' name='post'/>
</b:if>

Step 2. Add the Thumbnail Code WITHOUT Javascript.

1. Search for <data:post.body />.
2. You'll see a block of codes similar to this. Highlight them.

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if >

3. Replace the entire block of codes above with this new one:

<!-- start -->
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <b:if cond='data:blog.url != data:blog.homepageUrl'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>
      <b:else/>
      <data:post.body/>
           <b:if cond='data:post.jumpLink != data:post.hasJumpLink'> 
              <div class='jump-link'>
                <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'> 
                <data:post.jumpText/></a>
              </div>
           </b:if>
      </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<!-- end -->

THE TRICK.

<-- show thumbnail -->

          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>

<-- show post summary -->

           <b:if cond='data:post.jumpLink != data:post.hasJumpLink'> 
              <div class='jump-link'>
                <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'> 
                <data:post.jumpText/></a>
              </div>
           </b:if>

<-- ELSE show full post -->

      <b:else/>
      <data:post.body/>
      </b:if>

Step 3. Add CSS.

1. Search for </b:skin>. You'll see a line similar to this:

]]></b:skin>

2. Above it, add these lines:

.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}

Quick Description.
This is to wrap the post title around the thumbnail which in turn is aligned to the left. The image has a 10 pixel margin (right and bottom) from the text.

If you'd rather have the thumbnail on the right, you can change the codes to:

.thumb img {
  float: right;
  margin: 10px 0 0 10px;
}

3. Below </b:skin>, add these lines:

     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
     <b:if cond='data:blog.url != data:blog.homepageUrl'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <style>
          .post-outer {
          height: 100px;
          }
          h3.post-title {
          margin-top: 20px;
          }
        </style>
    </b:if>
    </b:if>
    </b:if>

Quick Description.
This is a conditional CSS property that will adjust the height to accomodate the thumbnail and vertically center the title to the image, on specific pages (i.e. blogger archive, label and search pages). See how it looks like if there is no conditional CSS property:

You can change the height and align the title vertically by changing the highlighted values.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
     <b:if cond='data:blog.url != data:blog.homepageUrl'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <style>
          .post-outer {
          height: 100px;
          }
          h3.post-title {
          margin-top: 20px;
          }
        </style>
    </b:if>
    </b:if>
    </b:if>

4. SAVE TEMPLATE.

Other "Read More" Tweaks.

3 ways to add "read more" on blogger
customize "read more" on blogger
2 ways to add read more with thumbnails on blogger
show only post titles on blogger homepage