WEB.SILOG.

post titles with thumbnails on blogger

2011-07-16T18:42:00.000-07:00

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

show only post titles on blogger homepage

2011-07-15T04:46:00.000-07:00

View demo.

There are several ways to tweak the default posts seen on your blogger home page. You can show snippet of every post, and maybe display them with thumbnails. Or if you prefer a minimal look, you can show only post titles instead.

How to Show Only Post Titles on Blogger Home Page.

Back up! Back up!

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;item&quot;'>
<b:if cond='data:blog.searchLabel == &quot;&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include data='post' name='post'/> <!-- archive pages -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/> <!-- static pages -->
<b:else/>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages -->
</b:if>
</b:if>
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- label pages -->
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- item pages -->
</b:if>
<!-- end -->

5. SAVE TEMPLATE.

The Code.

The thing with blogger home page is that it has default links to next and previous posts. Thus, showing a list of post titles is not limited to home page alone, we have to display them to search pages as well.

THE COMPLETE CODE.


<!-- start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.searchLabel == &quot;&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
<b:include data='post' name='post'/> <!-- archive pages -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/> <!-- static pages -->
<b:else/>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages -->
</b:if>
</b:if>
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- label pages -->
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- item pages -->
</b:if>
<!-- end -->

Let's inspect each IF statement and what each means.
1. FIRST "IF". For ITEM PAGES.

View demo.


<!-- start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.searchLabel == &quot;&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
<b:include data='post' name='post'/> <!-- archive pages -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/> <!-- static pages -->
<b:else/>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages -->
</b:if>
</b:if>
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- label pages -->
</b:if>

<b:else/>
<b:include data='post' name='post'/> <!-- item pages -->
</b:if><!-- end -->

What this means.
<b:if cond='data:blog.pageType != "item"'> - If blogger page type is NOT an item page (i.e. if the page type is not a POST page)
codes here - perform these highlighted codes
<b:else/> - ELSE if it is an item page
<b:include data='post' name='post'/>  - show entire post content or body on the item pages
</b:if> - end of IF condition

2. SECOND "IF". For LABEL PAGES.

View demo.


<!-- start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.searchLabel == &quot;&quot;'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
<b:include data='post' name='post'/> <!-- archive pages -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/> <!-- static pages -->
<b:else/>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages -->
</b:if>
</b:if>
</b:if>

<b:else/>
<b:include data='post' name='post'/> <!-- label pages -->
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- item pages -->
</b:if>
<!-- end -->

What this means.
<b:if cond='data:blog.searchLabel == ""'> - If the label page has a label name that IS "" or blank,
codes here - perform these highlighted codes
<b:else/> - ELSE if the label page has a label name that is NOT blank (i.e. there is a label name)
<b:include data='post' name='post'/>  - show entire post content or body on the label pages
</b:if> - end of IF condition

3. THIRD "IF". FOR HOMEPAGE.

View demo.


<!-- start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.searchLabel == &quot;&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage -->
<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
<b:include data='post' name='post'/> <!-- archive pages -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/> <!-- static pages -->
<b:else/>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages -->
</b:if>
</b:if>

</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- label pages -->
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- item pages -->
</b:if>
<!-- end -->

What this means.
<b:if cond='data:blog.url == data:blog.homepageUrl'> - If the blog url IS the homepage URL,
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>  - show post title and its link on home page
<b:else/> - ELSE if it is NOT home page, (i.e. perhaps, it IS archive page or static page or search page)
codes here - perform these highlighted codes
</b:if> - end of IF condition

4. FOURTH "IF". For ARCHIVE PAGES.

View demo.


<!-- start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.searchLabel == &quot;&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
<b:include data='post' name='post'/> <!-- archive pages -->
<b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/> <!-- static pages -->
<b:else/>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages -->
</b:if>

</b:if>
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- label pages -->
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- item pages -->
</b:if>
<!-- end -->

What this means.
b:if cond='data:blog.pageType == "archive"'> If the blogger page type is an archive page,
<b:include data='post' name='post'/>  show entire post content or body on archive pages
<b:else/> ELSE if it is NOT an archive page, (i.e. if it IS either a static page or search page)
codes here - perform these highlighted codes
</b:if> - end of IF condition

5. FIFTH "IF". For STATIC and SEARCH PAGES.

STATIC PAGE:
View demo.
SEARCH PAGES:
Home Page Older Posts demo.
Archive Year demo.


<!-- start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.searchLabel == &quot;&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include data='post' name='post'/> <!-- archive pages -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/> <!-- static pages -->
<b:else/><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages -->

</b:if>
</b:if>
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- label pages -->
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- item pages -->
</b:if>
<!-- end -->

What this means.
<b:if cond='data:blog.pageType == "static_page"'> If the blogger page type is a static page,
<b:include data='post' name='post'/>  show entire post content or body on static pages
<b:else/> ELSE if it is NOT a static page, (i.e. if it IS a search page)
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>  show post title and its link on search pages
</b:if> - end of IF condition

To understand more about Blogger Page Types and its code snippets, please visit My Stady's 7 Blogger Page Types: Analysis, Code Snippets, Data Matrix

Show Only Post Titles on Blogger Home Page, Archive, Label and Search Pages

If you prefer a neater code to display post titles on blogger home, archive, label and search pages, and retain full post on static pages, this code might be what you're looking for:


<!-- start -->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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>
<!-- end -->

Just follow STEPS 1-3, and on step 4, replace <b:include data='post' name='post'/> with the above code.

Show Only Post Titles on Blogger Archive, Label, and Search Pages.

If you prefer post titles on archive, label and search pages only, post summaries on home page and full post on static pages, here is the code:


<!-- start -->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "item"'>
<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 -->

Post Title 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

To see complete instructions, check out Teresa Giesecke's post.

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
post titles with thumbnails on blogger

5 places to move "older" and "newer posts" on blogger

2011-07-09T07:19:00.000-07:00

View demo.

This is a continuation of rename "older posts" and "newer posts" to post titles on blogger. This time, let's move them to different sections of the post page.

How can we make "older post" and "newer post" appear on post page only?

Post Page, the landing page for each and every blogger post.

First, let's remove it from blogger homepage. Dont forget to backup your template!
1. Go to EDIT HTML page.
2. Tick EXPAND WIDGET TEMPLATES.
3. Press CTRL + F, type in <b:include name='nextprev'/> on the search bar.
4. You'll see a similar code like this:


<!-- navigation -->
  <b:if cond='data:mobile'>
    <b:include name='mobile-nextprev'/>
  <b:else/>
    <b:include name='nextprev'/>

DELETE the highlighted line: <b:include name='nextprev'/>.
5. SAVE TEMPLATE.

THE CODE.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>

what it means.
<b:if cond='data:blog.pageType == "item"'> if the page type is "item" page or also known as "post" page,
<b:include name='nextprev'/> show or "include" next and previous links

Where can we strategically place "previous post" and "next post" inside the post page?

-above title
-below title
-below post body
-on footer section
-above comments

Before we move them, make sure to:
1. Backup your template as always.
2. Go to EDIT HTML page.
3. Tick EXPAND WIDGET TEMPLATES.

Let's get on with it. To move "older/previous posts" and "newer/next posts"..

.. ABOVE TITLE.

1. Press CTRL + F, search for <b:includable id='post' var='post'>
2. BELOW that line, add the code.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>