Using Blogger page types to affect your blog design

In many of our tips we recommend wrapping the Javascript code that we're providing in something called a "if statement" and a "page type"; these two structures (in the form of 2 lines of code) enable us to limit code within our template to only work on a subset of pages within the site.

For example, lets say you want our thumbnail and summary script in your site to only run on the pages where your site naturally shows multiple posts (such as your homepage or label pages); this is how we achieve that result.

This post will not be a fully exhaustive list of the different methods of identifying/using page types and all of their variations; for that I recommend this amazing resource. Instead this post will focus on the types you'll probably want to use more often within your website and how to use them.

The different page types:

Index pages

Index pages are almost all pages that show (by default) multiple blog posts on one page. Your homepage is an index page, as are label pages and the "newer" and "older" pages.

<b:if cond='data:blog.pageType == "index"'>
Index Page Type
</b:if>

Home page

This one is pretty obvious, but it's the homepage of your site (http://www.yoursite.com/). If you're doing static page redirects for your homepage this will not work; you'll need to use the specific page url code in the next section.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Homepage
</b:if>

Specific page/url

This is a general purpose conditional, enabling you to bring a specific page outside the norm of either your site or the other page types.

<b:if cond='data:blog.url == "URL"'>
Page URL
</b:if>

Static page

People often want their static pages to look or behavior slightly differently than their blog posts; this enables you to differentiate a static page from a blog post.

<b:if cond='data:blog.pageType == "static_page"'>
Static Page Type
</b:if>

Blog post item

Blog posts; nothing else needs to be said.

<b:if cond='data:blog.pageType == "item"'>
Blog Post Item Type
</b:if>

Label page

While not exactly a "page type", this conditional enables the same ability by looking to see if the visitor is hitting a page via a label (such as by clicking on a label link that you have after a blog post).

<b:if cond='data:blog.searchLabel'>
Label Page
</b:if>

Error page

Error pages are a fairly recent addition. Detecting the error page type will enable you to further customize the look and feel of anyone that reaches the error page while in your site.

<b:if cond='data:blog.pageType == "error_page"'>
Error Page Type
</b:if>

Archive page

Often overlooked, the archive page is the one that people reach if they click on a Year or Month value in your Archive widget. It behaves similarly to an index page type except that it's its own unique entity.

<b:if cond='data:blog.pageType == "archive"'>
Archive Page Type
</b:if>


An example usage

You may be asking yourself when you'd ever need to know these things or how to use them. Here is an example: say you want to hide your social sharing buttons, author name, post date, and other footer information on your site's static pages, but want to keep them on your blog posts. You'd put the following code into your template right above the </head> tag:

<b:if cond='data:blog.pageType == quot;static_page&quot;'>
<style>
.post-footer {
 display: none;
}
</style>
</b:if>


* Note: if you are using these page types within your HTML as opposed to the templating language Blogger might throw an error due to escaping of your characters. What this means is that the quotation marks need to be "escaped" and replaced with &quot. So <b:if cond='data:blog.pageType == "static_page"'> would be added as <b:if cond='data:blog.pageType == quot;static_pagequot;'>