Blogger Page Types and Conditional Tags


Identifying Blogger page types is very effective in designing, different Layouts for different Types of pages and placing Page-specific meta tags.

Below are some of the common popular Blogger conditional tags formats that can help make your blog Dynamic and Awesome. So,

Blogger Page Types:

  • Archive Pages
  • Index Pages
  • Item Pages
  • Static Pages
  • Error Pages
  • Label Pages 
  • Search Pages

The Use of Conditional Tags with each Blogger Page Type

Archive Page

Blogger pages added by Archive widget that normally has “_archive.html” ending in its URL belong to Archive page type.

<b:if cond="data:blog.pageType == &quot;archive&quot;">
    CODE...
</b:if>

Index Page

Blogger pages with a list of posts are normally called Index pages. Eg - Homepage and Search result page.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    CODE...
</b:if>


Item Page

Blogger posts created by clicking new post button are called Item pages.

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

Conditional Tag for First Blogger post alone

<b:if cond='data:post.isFirstPost'>
    CODE...
</b:if>


Static Page

Blogger pages created by clicking new page button are called Static pages.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    CODE...
</b:if>


Error Page

Blogger pages can be redirected to Error pages when directed to non-existent URLs.

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    CODE...
</b:if>


Label Page

Blogger label-based pages contain similar or related posted articles.

<b:if cond='data:blog.searchLabel'>
    CODE for all Label Pages...
</b:if>

Specify Label Name in the conditional statement.

<b:if cond='data:blog.searchLabel== &quot;LABEL_NAME&quot;'>
    CODE for specific Label Page...
</b:if>

Example - Label Name: theme
https://blogger.theinfiniteinfo.com/search/label/theme


Search Page

Blogger pages that provides a list of posts that matches the given query terms.

<b:if cond='data:blog.searchQuery'>
    CODE for all Search Pages...
</b:if>

Specify Search Query in the conditional statement.

<b:if cond='data:blog.searchQuery == &quot;SEARCH_QUERY&quot;'>
    CODE for specific Search Page...
</b:if>

Example - Search Query: theme

https://blogger.theinfiniteinfo.com/search?q=theme

Some Additional Conditional Tags in Blogger

For Complete Blogger Tutorial: How to Create Blogger Blogspot Template from Scratch

The XHTML of the Blogger blog lets us edit the Template and make it Dynamic. We have already seen the different page types that blogger has and the various conditional tags that could be used with it accordingly in those pages. We'll now check out some additional conditional tags.

Want to implement a functionality only in the Homepage?

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


Want to add some elements only in the Post pages & Static pages?

<b:if cond='data:blog.url == data:post.url'>
    <!--Post and Static Pages->
</b:if>


Want to add some elements only in one specific post/page?

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


Wish some elements in all-pages except post-listing-pages?

<b:if cond='data:blog.pageType != &quot;index&quot;'>
    <!-- all pages NOT index pages -->
</b:if>


Do you have any multi-conditional function to do?

<b:if> and <b:else/> tags

Blogger has its own special <b:if> and <b:else/> tags.

<b:if cond='CONDITION-CODE-1'>
    <!-- Action-Code-1...-->
    <b:elseif cond='CONDITION-CODE-2'/>
        <!-- Action-Code-2...-->
    <b:else/>
        <!-- Default-Action-Code...-->
</b:if>


Would you like to perform AND/OR operations in the conditional tags?

<b: if  cond='CONDITION-CODE-1 && CONDITION-CODE-2'>
    <!--..Action-Code...-->
</b: if >
<b: if  cond='CONDITION-CODE-1 || CONDITION-CODE-2'>
    <!--..Action-Code...-->
</b: if >
For Complete Blogger Tutorial: How to Create Blogger Blogspot Template from Scratch

No comments:

Post a Comment