TechAlain-Christianblogger67 Comments

The Complete Guide to All Blogger Page Types (2019)

TechAlain-Christianblogger67 Comments
The Complete Guide to All Blogger Page Types (2019)

UPDATE 19 JAN 2019: I already know what you’re thinking. ‘Why is this amazing Blogger hacking guide hosted on Squarespace?’ Great question! For the past ten years this blog was hosted at Blogger. During my stay I was a very active Blogger developer. Even though I don’t use Blogger anymore I still want to give back to the community I called home for the past ten years.

For returning developers (and those filthy web scrapers who keep stealing this), I’ve re-written and updated this guide. It should read a lot better now. The old guide reads like Mojo Jojo wrote it. I don’t know why I was so verbose before. I also replaced the graphical tables (data matrix) with markup. I should have used semantic markup in the first place. I guess that’ll also make it easier for those damn web scrapers to copy the updated version. Did I forget to mention I constantly find rogue copies of this guide on other blogs? If you’re gonna use this to write another guide at least give me credit, please? Thank you.

I’ve finally added a section on error pages. That was often requested and I finally got around to it. Sorry for the delay. That brings our total number of page types from seven to eight. I can’t imagine they’ll be adding more but if they do let me know in the comments and I’ll update this guide.

Cheers!

If you've only been using the pageType tag to identify the page types then you’ve seriously been limiting your potential. That data tag only returns five unique values but the total number of page types is eight. This guide will teach you how to identify all eight of Blogger’s page types. If you’re not family with the terminology consult the glossary section. If that still doesn't help leave me comments. I understand the terminology in this document could be confusing at first. But you’ll pick it up in no time!

The code snippets in this guide are the absolute least amount of code required to get the task done. Blogger’s template engine has seen a revision so I’ve updated my snippets to match. They’ve all been tested to work as of this update.

See also: Printer Friendly Posts for Blogger Made Easy! (Update)

blogger2ools

This data was collected using my blogger2ools project. It’s a Blogger developer template designed to exposes all the underlying code and data tags in realtime. So as you navigate the blog you can see how the variables change from page to page. It’s an excellent tool for advanced Blogger developers out there and it’s been instrumental in helping me put this guide together.

Contents

Glossary

Page Type
The classifification (or type) of the page in question. Blogger uses various types of pages to display information. For example, search results on Blogger are displayed via search pages. Terms like "search page", "search type", and "search page type" mean the same thing and are used interchangeably in this document.
Globally Available Layout Data Tags
They get their name from the fact that you can use these tags literally anywhere in your template code. Think of the possibilities! These tags have the blog. prefix. This guide may sometimes omit the prefix for brevity. Every tag in the data matrix is global.
blog.title Tag
Returns the value of what you entered as your blog title. This can be found under Settings > Basic > Title.
blog.pageType Tag
This is the actual globally available layout data tag. The pageType tag returns a value of item, static_page, archive, index, or error_page.

Item Page Type

These are your blog posts. Fun fact: You used to have to enable post pages in the dashboard but everyone now has them on by default. I’m thinking this was changed with the permalink rollout. Before permalinks they would pull up your blog post with query strings. Not too SEO-friendly, is it? Only someone who’s been using Blogger as long as I have would remember a thing like that.

Item Page Type Data Matrix
Data Tag Result
blog.title (blog title)
blog.pageTitle (blog title): (blog post title)
blog.pageName (blog post title)
blog.pageType item
blog.searchLabel
blog.searchQuery
blog.url (homepage URL)YYYY/MM/(permalink)
blog.homepageUrl (homepage URL)

This code snippet will identify item pages:

<b:if cond='data:blog.pageType == "item"'>
  <!--Item Page-->
</b:if>

Static Page Type

In 2010 Blogger added the ability to publish content as stand-alone, or static, pages. These are what you use to go about adding the standard “About” or “Contact” pages. When they first rolled them out you could only have ten; now it’s unlimited!

Static Page Type Data Matrix
Data Tag Result
blog.title (blog title)
blog.pageTitle (blog title): (static page title)
blog.pageName (static page title)
blog.pageType static_page
blog.searchLabel
blog.searchQuery
blog.url (homepage URL)p/(permalink)
blog.homepageUrl (homepage URL)

This code snippet will identify static pages:

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

Archive Page Type

Ideally, any link you click from the Blog Archive widget would take you to an archive page but that's not the way it works. The pageType tag will only return a value of archive for pages whose filename ends in archive.html. (See also What is an archive filename on Blogger Help.)

Most links generated by the Blog Archive widget follow this format. The remainder use query parameters. Any page formatted that way has a pageType value of index.

This affects Blog Archive widgets using the Hierarchy style because it generates some pages using search queries. In general, search queries (when the URL is your homepage followed by /search? or /search/), return a pageType value of index.

There's a similar problem with the navigation links generated by the Blog widget on archive pages. Instead of linking to other archive pages (pages that end in archive.html), they link to search queries. And once again, these search queries return the index value.

Thus, any customizations you have for archive page types are lost by the next page, and your visitors will have an inconsistent experience.

This problem affects all three Blog Archive widget styles. Also, the search queries themselves are malformed half the time which leads to posts getting skipped or repeated.

  1. Only use the Flat List and Dropdown Menu styles when configuring the Blog Archive widget.

  2. Omit navigation links from archive pages.

  3. Add another Blog Archive widget (that only appears on archive pages), in place of the navigation links.

  4. And finally, style the widget so it looks like it belongs there.

Archive Page Type Data Matrix
Data Tag Result
blog.title (blog title)
blog.pageTitle (blog title): (date)
blog.pageName (date)
blog.pageType archive
blog.searchLabel
blog.searchQuery
blog.url (homepage URL)YYYY_MM_DD_archive.html
blog.homepageUrl (homepage URL)

This code snippet will identify archive page types but keep those caveats in mind. Hmm, are they caveats or bugs? Makes you think…

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

Error Page Type

Error pages were just introduced last SIX YEARS AGO? Yikes! Well, as a copout I'll say that if you were following my template development on github you would have known about this already. In fact my github page is full of delicious Blogger hacks. But yeah, this guide needed an update anyway.

This is how your 404 pages are identified. And as you can see from the link abov, you can costimize the message that appears. You can even use HTML! The message is returned by navMessage inside the Blog Posts widget. By default this message reads: Sorry, the page you were looking for in this blog does not exist.

Error Page Type Data Matrix
Data Tag Result
blog.title (blog title)
blog.pageTitle (blog title)
blog.pageName
blog.pageType error_page
blog.searchLabel
blog.searchQuery
blog.url (current page URL)
blog.homepageUrl (homepage URL)

The code for error pages is straightforward.

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

Home Page Type

This identifies the default URL of your blog, also known as your homepage. You can find it under Settings > Basic > Publishing > Blog Address in the Blogger dashboard. The blog.homepageUrl global tag always returns the same value no matter what type of page you’re viewing: your homepage.

Home Page Type Data Matrix
Data Tag Result
blog.title (blog title)
blog.pageTitle (blog title)
blog.pageName
blog.pageType index
blog.searchLabel
blog.searchQuery
blog.url (homepage URL)
blog.homepageUrl (homepage URL)

This code snippet will let you know you’re on the homepage.

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

Search Page Type

Now here’s where we start getting creative! For the next four page types the pageType tag only returns a value of index. This is why I mapped the data matrix. Search pages display the results of a search performed using Blogger's built-in search form. This is not to be confused with the Search Box gadget.

You should know that the built-in search is extremely limited: it only searches from a pool of the most recent posts, older posts are ignored and labels are ignored. In the future I might transition to the search box gadget but I'm still exploring my options.

The searchQuery global tag returns the value of what the user searched for.

The second instance of blog.url is to illustrate how the URL changes when you navigate to the next page of results.

Search Page Type Data Matrix
Data Tag Result
blog.title (blog title)
blog.pageTitle (blog title): Search results for (search terms)
blog.pageName Search results for (search terms)
blog.pageType index
blog.searchLabel
blog.searchQuery (search terms)
blog.url (homepage URL)search?q=(search terms)
blog.url (homepage URL)search?q=(search terms)&(query strings)
blog.homepageUrl (homepage URL)

Here’s my code snippet for search pages. It’s been factored down from before and now uses two less lines!

<b:if cond='data:blog.pageType == "index" and data:blog.searchQuery'>
  <!--Search Page-->
</b:if>

Label Page Type

Label Pages are generated by the labels widget. You may only view one label at a time. There is no way to combine multiple labels for viewing. I've tried it! There is also a bug affecting ALL label widgts by default. Head on over to blogger2ools to read about this bug and download my fix. The blog.searchLabel tag gives you the label name.

Every label has its own RSS feed.

(homepage URL)feeds/posts/default/-/(label name)

The second instance of blog.url is to illustrate how the URL changes when you navigate to the next page of results.

Label Page Type Data Matrix
Data Tag Result
blog.title (blog title)
blog.pageTitle (blog title): (label name)
blog.pageName (label name)
blog.pageType index
blog.searchLabel (label name)
blog.searchQuery
blog.url (homepage URL)search/label/(label%20name)
blog.url (homepage URL)search/label/(label%20name)?(query strings)
blog.homepageUrl (homepage URL)

Here’s the label code. It’s also been refactored.

<b:if cond='data:blog.pageType == "index" and data:blog.searchLabel'>
  <!--Label Page-->
</b:if>

Index Page Type

By order of elimination we are left with the index page type. As I stated back in the Archive Page Type section, when a page is generated using query parameters the pageType tag returns a value of index. So basically anything that isn't one of the seven previously mentioned page types we'll consider to be an index page.

Index Page Type Data Matrix
Data Tag Result
blog.title (blog title)
blog.pageTitle (blog title)
blog.pageName
blog.pageType index
blog.searchLabel
blog.searchQuery
blog.url (current page URL)
blog.homepageUrl (homepage URL)

Here’s the code for finding index pages. As you can see it’s just trying to eliminate all other possibilities.

<b:if cond='data:blog.pageType == "index" and data:blog.searchQuery == "" and data:blog.searchLabel == "" and data:blog.url != data:blog.homepageUrl'>
  <!--Index Page-->
</b:if>

Putting It All Together (Revised!)

The following code snippet comes directly from my own template here at MY STADY. I use this snippet as a guide for when customizing multiple or even all eight Blogger Page Types. If you're SEO-obsessed this is probably what you're looking for. We use this snippet in the header and Blog Widget portion of our code. For other sections it's not as important to customize for every different page type. Use it wisely!

This code has been revised.You now have WAY LESS </b:if>s to deal with. It's only 22 lines versus the original 29. But if you remove the error page code (which wasn't there), the code would only be 20 lines. That's a huge savings! I appreciate Blogger adding to the expression language used by the template engine. It really adds more flixibilty and developers have been begging for this forever!

<b:switch var='data:blog.pageType'>
    <b:case value='archive' />
    <!--Archive-->
    <b:case value='error_page' />
    <!--Error-->
    <b:case value='item' />
    <!--Item-->
    <b:case value='static_page' />
    <!--Static-->
    <b:default />
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <!--Homep-->
        <b:elseif cond='data:blog.searchQuery == &quot;&quot; and data:blog.searchLabel == &quot;&quot;'/>
        <!--Index-->
    </b:if>
    <b:if cond='data:blog.searchQuery'>
        <!--Search-->
    </b:if>
    <b:if cond='data:blog.searchLabel'>
        <!--Label-->
    </b:if>
</b:switch>

Closing Thoughts

Hope you enjoyed this much needed update to my very popular guide. Feels good to give back to the community. Though I'm not using Blogger anymore to host my site I'll still be keeping an eye on its development. To me Blogger is a platform with tremendous potential if you're a movated enough developer. But for me I just didn't have the time to work on it anymore.

Please let me know if you find any of this confusing or if you need clarification or even if there are typos. Thank you!

P.S.: Please link back to this guide in your own blogs if you use it in a tutorial or something. I'd really appreciate the credit. Puting this together was a lot of work.

Changelog

Oct-25 2018

  • Added the error page type.

  • Refactored search code snippet.

  • Refactored label code snippet.

  • Refactored index code snippet

  • Refactored the code snippet that detects all the page types.

  • Data matrix changed from spreadsheet screenshots to HTML tables.

May-22 2011

  • Initial Release.

New York photographer, party mammal, and Internet troll for hire. Alain-Christian is an OG who’s been blogging for over 20 years dating back to the early days of AOL. He loves sharing his offbeat opinions on pop culture, bestowing his tech knowledge, and making arts.