8 Blogger Page Types,Description,Code Snippets to Identify Pages - Designing Blogger Templates from Scratch Part Two

8-blogger-page-types
Designing Blogger Templates from Scratch Part Two 

This is the second part of series of tutorials on how to create a blog template on your own. In the previous tutorial, an overview on working of the blogger system was explained and also the role of the blogger template in generating the HTML pages was dealt. We ended up with coding a basic blogger template on our own and it's explanation. If you did not read it, I recommend you to go through it first. Here is the link.
In the second tutorial, I'm going to cover the types of pages in Blogger along with a detailed description of every page and how it can be identified using the blogger tags. The code snippets in this tutorial might be little technical, I've tried my best to include the comments and make it as clear as possible. Please comment if you feel anything is not clear and needs further explanation.

Why should you know about Blogger Page Types?

Identifying Blogger page types is very useful when dealing with the meta tags and placing page specific widgets in blogger. Page types also allow us to design different layouts for different types of pages. For example for a post page, we must display the post completely but in a home page, the posts must me displayed with an image and a small description about the post. pageType tag allows us to recognize the Type of the current page pointed by a specific URL.

What's in tutorial of Creating blogger templates on your own!
  1. pageType tag description
  2. Item Page
  3. Static Page
  4. Archive page
  5. Home Page
  6. Search Page
  7. Label Page
  8. Index Page
  9. Error Page
  10. Summary & Quick Reference

PageType Tag in Blogger :

The pageType tag in blogger contains the type of the page currently pointed by the URL. Please note that the pageType tag doesn't contain any spaces and the 'T' in pageType is capital. XML namespaces are case sensitive, so please note the cases of the tags also. Using a tag with wrong case will throw an error.
pageType tag returns the 4 basic values namely item, static_page, archive, index. But there are actually 7 types of pages in blogger. As we proceed, I'll explain how to identify the 7 page types in blogger using these four values and some extra tags.

Note: I recommend you to try the tag with a wrong case and see what will be the error. Observe that blogger doesn't throw an error when saving the template. but when you try to access a particular page, the template will not be parsed and returns you an error message. You'll get the following error message.
Error:Error in parsing the template.

Item page type in Blogger

Here Item page means the page value returned by the pageType tag is item. The pages that return value item are the "post pages" in blogger. The post pages are called the item pages. These post pages have a unique URL for each post.
We generally use 5 kind of tags to identify the page: blog.pageType, blog.title,blog.pageTitle, blog.pageName, blog.pageUrl.

Here is the table of contents of the item page for every tag. Left side consists of the tag used and the right side is the value contained for in item pages.
Tag : Value
blog.pageType : item
blog.title : (blog title)
blog.pageTitle : (blog title : blog post title)
blog.pageName : (post title)
blog.pageUrl : (home page URL)/YYYY/DD/MM/(post page url)

Code snippet to identify item pages:

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

Don't get panic by seeing the syntax. I'll be explaining about the conditional tags in future tutorials, for now, remember that
<b:if cond="YOUR_CONDITION"></b:if> is like an if block in programming. If the your condition is satisfied then the statements followed by b:if will be executed.
There is also an else case. Take a look at the syntax

<!-- start of if block -->
<b:if cond="Your_Condition">
  <h1>Condition matched</h1> <!-- I will get executed if condition matched-->
  <b:else/>
  <h1>Condition Failed</h1>
<!-- I will be executed if condition is not matched -->
</b:if>
<!-- if block ends-->

Static page in Blogger :

A static page is a page that you create through the pages section in blogger. The pageType tag returns value static_page for this kind of pages. Examples of these pages are contact page, privacy policy page etc. Here are the attributes of different tags for a static page.
Tag : Value
blog.pageType : static_page
blog.title : (blog title)
blog.pageTitle : (blog title : static page title)
blog.pageName : (static page title)
blog.pageUrl : (home page URL)/p/(post page url)
Url of an static page looks like http://www.tricksstar.com/p/blog-archive.html

Code snippet to identify Static pages:


<b:if cond='data:blog.pageType=="static"'>
<!-- static page type-->
</b:if>

Archive page in Blogger :

An archive page  usually contains the collection of posts written in a particular time. The archive pages are usually generated by the archive widget. The pageType tag returns the value of archive for those URLs that end with archive.html. Below mentioned are the values of different tags for archive page type
Tag : Value
blog.pageType : archive
blog.title : (blog title)
blog.pageTitle : (blog title : date)
blog.pageName : (date)
blog.pageUrl : (home page URL)/(date)_archive.html
Url of an archive page will be like this http://www.tricksstar.com/2016_05_01_archive.html

Code snippet to identify Archive pages:


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

Index page type in Blogger :

An index page type can be a search page, home page, label page and an index page. The home page URL is the web address of your blog and doesn't contain anything at the end. The pageType tag returns the value of index for a home page. As all the other index page type also returns the same value, we need to use something else to identify the home page. That is the blog.homePgeUrl tag.
Tag : Value
blog.pageType : index
blog.title : (blog title)
blog.pageTitle : (blog title)
blog.pageName :
blog.pageUrl : (home page URL)
blog.homepageUrl tag returns the home page url for any page type. So we can use this tag and compare it with the blog.url tag and identify the home page.

Code snippet to identify home page:


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

Search page in Blogger :

When you enter a search query in the bloggers built in search form, you'll be directed to a search page containing the search results. The type of pages that are generated using the most frequently used search keywords is called the search page. The pageType tag returns indexblog.searchQuery
to identify the search page. The bloggers built in search from is outdated as it uses only the latest posts to search from a limited set of keywords.
The search form has been replaced by the Search box gadget that creates a custom search engine for your blog and lets you to customize where to search updates as your blog updates.
Tag : Value
blog.pageType : index
blog.title : (blog title)
blog.pageTitle : (blog title) : Search results for (search query)
blog.pageName : search results for (search query)
blog.pageUrl : (home page url)/search?q=(search query)?(other attributes like max-results=...)
blog.searchQuery : (search query)
blog.searchQuery tag returns the search query entered. if it returns nothing then the page is not a search page. So we can use this tag and check whether it is empty and identify the search page.

Code snippet to identify search page:


<b:if cond='data:blog.pageType == "index"'>
  <b:if cond='data:blog.SearchQuery != ""'>
   <!--search page->
</b:if>

Label page in Blogger :

Label page in blogger is similar to search page and is of pageType index that displays the post related to a particular label specified in the URL. To get the label specified , we use a special tag. blog.searchLabel tag returns the label of the current page. To distinguish the label pages from other index pages, we first check if it is of type index and then check for the label.
Tag : Value
blog.pageType : index
blog.title : (blog title)
blog.pageTitle : (blog title) : (label_name)
blog.pageName : (label_name)
blog.pageUrl : (home page url)/search/label/(label_name)
blog.searchLabel : (label_name)
blog.searchQuery tag returns the label specified in the url. if it returns nothing then the page is not a label page.

Code snippet to identify label page:


<b:if cond='data:blog.pageType == "index"'>
  <b:if cond='data:blog.SearchLabel != ""'>
   <!--search page->
</b:if>

Index page in Blogger :

A page that returns type of index and that is not a home page or search page or label page is the index page. The index pages are generated by the navigation widgets. The page number navigation buttons contain the indexed page that order the posts chronologically.
An example of index page is http://www.tricksstar.com/search?updated-max=2015-07-10T20%3A29%3A00%2B05%3A30&max-results=5
Tag : Value
blog.pageType : index
blog.title : (blog title)
blog.pageTitle : (blog title)
blog.pageName :
blog.pageUrl : (home page url)/search?updated-max=YYYY-MM-DD....

Code snippet to identify Index page:


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

Error page in Blogger :

An error page is used to identify 404 error pages in blogger. the pageType tag returns error_page for 404 error pages.
Tag : Value
blog.pageType : error_page
blog.title : (blog title)
blog.pageTitle : (blog title)
blog.pageName : (blog title) : error

Code snippet to identify Error page:


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


Summary of page Types in Blogger


The below tables acts as a quick reference for all the page types in and the tag values returned and how to identify them.
blogger-pagetypes-quick-reference
Blogger page types quick reference
identify-search-label-pages-in-blogger
Identifying search and label pages of index pageType

Conditional tags for all page types


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

<!--static pages-->
<b:if cond='data:blog.pageType == "static_page"'>
  <!-- all static pages -->
</b:if>

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

<!--home page-->
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
  <!-- only homepage -->
</b:if>

<!--search pages-->
<b:if cond='data:blog.searchQuery'>
    <!-- all search pages -->
</b:if>

<!--label pages-->
<b:if cond='data:blog.searchLabel'>
  <!-- all label pages -->
</b:if>

<!--index pages-->
<b:if cond='data:blog.pageType== "index"'>
    <!-- all index pages -->
</b:if>

<!--error pages-->
<b:if cond='data:blog.pageType== "error_page"'>
    <!-- all error pages -->
</b:if>


2 comments:

  1. Very nice post....this is important for me......thanks for share........

    ReplyDelete
    Replies
    1. Welcome Amul, I'm very happy to know your feedback. We will be publishing more posts on creating blogger templates from scratch. Stay tuned.

      Delete

Please DO NOT SPAM. You're not allowed to use links in comments unless it's necessary.

I Appreciate your valuable Feedback.

Regards,

www.TricksStar.com