Display Elements only on Home, Item or Archive Pages in Blogger

When designing your Blogger template, you may prefer certain elements to appear only on certain types of pages.

If you would prefer certain widgets or elements of your design to appear on the home page, but not on individual post pages, for example, you can use the "b:if cond='data:blog.pageType'" function to control this.

In this tutorial, I'll explain how you can easily control page elements to display (or not) on certain types of pages in your Blogger powered blog.

To display elements of your layout on certain page types, you will need to edit your blog's template code.

Be sure to make a full backup of your existing template before attempting to use the information in this tutorial!

To make a backup of your template, go to the Edit HTML page in the Layout section of your blog's dashboard. Then simply click on the "Download full template" link near the top of the page.

This will enable you to save your template as an XML file to your computer, which you can use to restore your template if you accidentally mess things up!

How the layout tags work

The <b:if> function tells Blogger we are setting conditions for the following section of content.

To control whether elements are displayed for a particular page type (ie: index, archive or item pages) we add the data:blog.pageType tag to the b:if statement, and complete this by stating which type of page where we would like this content to be displayed.

After this tag, we add the code or content to be displayed. Then finally we close of the b:if conditional statement with a </b:if> tag.

Trust me, this is not as complicated as it sounds! Let me give you an example.

If I wanted to display a "Welcome to my blog" message only on the home page, I could use the following section of code:

<b:if cond='data:page.type == &quot;index&quot;'>
Welcome to my blog!
</b:if>

This code roughly translates as:

If this is the home page, display my "Welcome to my blog" message.
If this isn't the home page, don;t display anything here!

When we can translate the code into something more understandable, it becomes easier for us to use!

The three different page types

In the example above, I wanted to display my "Welcome" message on the home (or index) page.

In total, there are three page types for which you can use a similar statement:

• index (the home page)


• archives (to be displayed when readers view your archive pages)


• item (the individual post page)

We can replace the "index" section in the above example with either "archives" or "item" instead if we prefer to display only on archive or item pages.

To clarify:

If I want to display my welcome message on archive pages, I would use this section of code:

<b:if cond='data:page.type == &quot;archive&quot;'>
Welcome to my blog!
</b:if>

If I want to display this only on item pages, I would use this code instead:

<b:if cond='data:page.type == &quot;item&quot;'>
Welcome to my blog!
</b:if>

In your own blogs, of course, you may not wish to use this function to display a welcome message! In place of "welcome to my blog", you can insert any type of HTML code you like, such as an image, a hyperlink, and even an entire widget as we will explore below.

You can also wrap existing template code inside the b:if statements: simply type the first line above the section of content, and type the closing </b:if> tag directly below.

How to display widgets on certain page types

When we come to look at how widgets can be displayed on certain page types, the method is slightly more complicated (but not much!).

We cannot wrap an entire widget section in the b:if tags:

Instead, we must check the "expand widget templates" box near the top of the screen, and place the b:if tags just inside the b:includable tags which appear in the expanded widget template code.

Here is a diagram which displays where to add the two b:if lines to make a widget display only on the home page (click on the image for a larger version):

To clarify:

Place the initial <b:if cond='data:blog.pageType == &quot;index&quot;> tag just after the opening <b:includable id='main'> tag.

Place the closing </b:if> tag just before the closing </b:includable> tag.

Note: if you paste the sections of conditional code in the wrong place, you will receive an error message and cannot save your modified template code.

The "if not" statement

Let's say I wanted to display my "Welcome to this blog" message on all page types except for post pages. It would be much easier to say "if this is not an item page, display my message" than to use two seperate statements for archive and index pages.

For this, we can use (what I call) the "if NOT" tags.

In the examples above, you will notice the page type statement contains two "equals" symbols before the page type, like this:

<b:if cond='data:page.type == &quot;item&quot;'>

The doubling of the equals symbols basically tells Blogger:

If this page IS this particular type of page, display the following code.

To tell Blogger to display a section if the page is NOT a particular page type (for example, if the page is NOT a post page), we can substitute the first equals sign with an apostrophe, like this:

<b:if cond='data:page.type != &quot;item&quot;'>

The closing </b:if> tag should remain the same.

To clarify:

In the examples above,

== "[page-type]" (with two equals signs)

This means "If this IS the specified page type, display the content"

!= "[page-type]" (with an exclamation mark followed by one equals sign)

This means "If this is NOT the specified page type, display the content.

Note: these examples are just a part of the complete <b:if> template tags; for the entire conditional page type function to work, you will need to use the complete tags, as referenced above.

There are some limitations...

Unfortunately, there are some limitations when using page conditional tags in Blogger templates which I haven't yet been able to work around:

The "index" page type also functions for search pages and label pages.

Blogger's help center does state that one of the page types is "main", which refers to the home page.

However, using "main" in the pageType statement has never worked for me. Instead, we can use the "index" page type (not referenced in Blogger's help pages for some strange reason...), though this will also affect the search pages, which includes label pages too.

We cannot display elements only on certain page URLS

A few readers have asked if it is possible to display sidebar widgets only on certain post pages (which would be rendered by their unique URL).

I have tried many combinations of template tags, HTML and JavaScript code to accomplish this, but have had no success with this so far.

I have a feeling that Blogger may soon introduce password protected pages (since this is on the current wish list for user voting), though until such template tags are introduced, we are unable to display template elements for certain post URLs.

If anyone has successfully coded either of these two functions, please do get in touch to let me know how it may be achieved in Blogger!

Conclusions

Using the conditional page type function in our templates, we can choose to display widgets and other blog content only on index, archive and item pages. We can also choose not to display specified content on these page types.

I hope this tutorial has offered a good overview of how the b:if and data:page.type template tags can be used in your Blogger templates. Please let me know if this has been useful for you, or if there is anything you would like explained in more detail by leaving your comments below.