5 Secrets of Blogger (Service) You Don't Know

Recent Posts

Learn and Apply Blogger Conditional Tags

To develop Blogger Theme or Template understanding Blogger PageType with conditional tags or statements is the major concerned and essential. As we need to customize different look or style for different type of Blogger states (actually targeting specific pages or URLs). Example: we must expect the different look of homepage than blog post or page. Similarly we may need different layout with customized CSS for different URL. If we want to set up landing page for homepage and want to show sidebar for blog post or if we want to show the title for specific page type in browser, then we need to customize those with if else condition and it is possible to Blogger platform. I have already used many conditional tags to develop this site.
Learn Blogger Condtional Tags
General format of Blogger conditional statement:

if statement: 
<b:if condition>
<!--Statement-->
</b:if>
Here Statement will be executed if and only if condition be true.

So it can say, the conditional tag works as:
Blogger if cond true, then work

If else statement:
<b:if condition>
    <!--Statement One-->
    <b:else />
    <!--Statement Two-->
</b:if> 
Here Statement One will be executed if condition be true otherwise Statement Two will be executed.

Pattern of conditional tags:

We can use Blogger Conditional Tags for multiple purposes.
Example: we can use this condition for HTML, CSS, Title etc.

Conditional Code for Title:
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if> 
Conditional Code for CSS:
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
/**CSS CODE HERE**/
</style>
</b:if> 
Conditional Code for HTML:
<b:if cond='data:blog.pageType == "item"'>
<div class="section_two">
    <p>This is HTML Code</p>
</div>
</b:if>
Some Conditional Attributes:

cond='data:blog.url
cond='data:blog.pageType
cond='data:title
cond='data:blog.searchQuery
cond='data:blog.searchLabel
The main purposes of using conditional tags in Blogger is targeting specific page or URL.

Target specific page

1. Target Index/Home Page

To target the page of list of posts. Example: Show post by Label, Search Query etc.
<b:if cond='data:blog.pageType == "index"'>
<!--Content for Index-->
</b:if>

2. Target Dynamic/Item Page (Post)

Dynamic page means post we publish and its URL is like

http://www.compromath.com/2017/05/customize-featured-post-in-blogger-blogspot.html

To target single post that is created by ‘Create Post’.
<b:if cond='data:blog.pageType == "item"'>
<!--Content for Item-->
</b:if>

3. Target Static Page

Static page means page we publish and its URL is like

http://www.compromath.com/p/html-to-xml-parser-tool.html

To target single page that is created by ‘Create New Page’.
<b:if cond='data:blog.pageType == "static_page"'>
<!--Content for Static Page-->
</b:if>

4. Target Error Page

To target error page (404) the conditional code is:
<b:if cond='data:blog.pageType == "error_page"'>
<!--Content for Error Page-->
</b:if>

5. Target Archive Page

To target archive of posts, the following code snippet works.
Generally, the URL of archive is like below with date.

http://www.compromath.com/2017_02_22_archive.html
or
http://www.compromath.com/2017/02/
<b:if cond='data:blog.pageType == "archive"'>
<!--Content for Archive Page-->
</b:if>

6. Target Search Page

Search page means the page with searching result under index page.
<b:if cond='data:blog.searchQuery'>
    <!-- Content for Search Page -->
</b:if>

7. Target Label Page

Label page means the page with list of post by specific label.
<b:if cond='data:blog.pageType == "index"'>
  <b:if cond='data:blog.SearchLabel != ""'>
   <!--Content for Label Page-->
</b:if>
We can also target specific label by following code.
<b:if cond='data:blog.searchLabel== "Label Name"'>
<!--Content for Label Name-->
</b:if>

Target specific URL

It is possible to target specific URL base on data:blog.url condition.

1. Home Page URL

It works as:
blogger if home page, then do it.
To target home page we can consider the code.
<b:if cond='data:blog.url  == "data:blog.homepageUrl"'>
<!--Content-->
</b:if>
2. Specific URL

To target specific URL we have to follow the code snippet.
<b:if cond='data:blog.url  == "http://www.compromath.com/2017/04/effective-seo-tips-for-blogger.html"'>
<!--Content-->
</b:if>
Target More

Here is the collection of more conditional tag.
<b:if cond='data:post.showBacklinks'><!--content--></b:if>
<b:if cond='data:displayname == "specific-name"'><!--content--></b:if>
<b:if cond='data:post.numComments == [number_here]'><!--content--></b:if>
<b:if cond='data:post.hasJumpLink'><!--content--></b:if>
<b:if cond='data:post.allowComments'><!--content--></b:if>
<b:if cond='data:blog.metaDescription'><!--content--></b:if>
<b:if cond='data:mobile'><!--content--></b:if>
<b:if cond='data:title'><!--content--></b:if>
<b:if cond='data:title != ""'><!--content--></b:if>
<b:if cond='data:showThumbnails == "false/true"'><!--content--></b:if>
<b:if cond='data:showSnippets == "false/true"'><!--content--></b:if>
<b:if cond='data:post.thumbnail'><!--content--></b:if>
<b:if cond='data:display == "list"'><!--content--></b:if>
<b:if cond='data:blog.url == data:label.url'><!--content--></b:if>
<b:if cond='data:showFreqNumbers'><!--content--></b:if>
<b:if cond='data:useImage'><!--content--></b:if>

Customize Your Blogger as you want.
Tutorial to Convert HTML to Blogger XML.

Have got this article helpful or not working? Put your comment below.