Targeting specific pages/URLs with conditional tags

Conditional tags are Blogger template tags that allow you to specify parts of your template to appear only under certain conditions. One particularly useful application of conditional tags is in specifying on which page or pages a HTML element should appear.

Ever wish you could display only relevant widgets onto a page, hide sidebars on certain pages, display different buttons on different pages, or apply a meta tag only to selected pages? Well, if applied properly, conditional tags can make all that happen.

 

I. Conditional tag syntax

The syntax is like this:

<b:if cond='PUT_CONDITION_HERE'>
</b:if>

It is made up of a <b:if> tag, with a  cond attribute added. Condition is entered as the value of the cond attribute. Each (opening) <b:if> tag need to be closed with a closing </b:if> tag.

 

II. List of conditional tags

Below is a list of conditional tags that target specific pages. I only list the opening tags here. Just make sure you include the closing </b:if> tag when applying a conditional in your template.

  1. Index (list) pages
    Index pages include homepage, labels page and yearly archive page.
    <b:if cond='data:blog.pageType == "index"'>
  2. Post (item) pages
    <b:if cond='data:blog.pageType == "item"'>
  3. Static pages
    <b:if cond='data:blog.pageType == "static_page"'>
  4. Archive pages
    <b:if cond='data:blog.pageType == "archive"'>
  5. Homepage
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
  6. Specific page/URL
    <b:if cond='data:blog.url == "PUT_URL_HERE"'>
  7. Post and static pages
    <b:if cond='data:blog.url == data:post.url'>
  8. Label-search pages
    <b:if cond='data:blog.searchLabel'>
  9. First post
    This is not a page, but a conditional for the first post. Used for targeting the first post on multi-post pages.
    <b:if cond='data:post.isFirstPost'>

III. Applying conditional tags

  • To apply a conditional tag to a content, simply put the content between the opening <b:if cond…> and the closing </b:if>, like so:
    <b:if cond='data:blog.pageType == "item"'> 
    CONTENT (TO BE EXECUTED IF CONDITION IS TRUE)
    </b:if> 

    In the example above, the content will only appear on post pages.

  • If you want to specify a alternate content (when the condition is false), you need to insert a <b:else/> tag followed by the content, like this:
    <b:if cond='data:blog.pageType == "item"'> 
    CONTENT 1 (TO BE EXECUTED IF CONDITION IS TRUE)
    <b:else/>
    CONTENT 2 (TO BE EXECUTED IF CONDITION IS FALSE)
    </b:if> 

    You can place the conditional anywhere in your template HTML, except inside a section or inside a widget content box. The content can be a div, a section, a style tag, another conditional tag etc.

  • Reversing a condition

    A condition can be reversed simply by replacing the comparison operator from == (is equal to) to != (is not equal to), like so:

    <b:if cond='data:blog.pageType != "item"'> 
    CONTENT (TO BE EXECUTED IF CONDITION IS TRUE)
    </b:if> 

    In the example above, the content will only appear on pages other than post pages (i.e. removed/hidden from post pages). This method is not applicable to Label-search and First Post conditionals.


IV. Application examples

Below are some examples of what you can do with conditional tags:

 

Enjoy!

54 comments to "Targeting specific pages/URLs with conditional tags"

Thanx for this post. =D
I always wondered how to do this.

Affan Ruslan August 8, 2010 at 9:13 PM    

thanks, I've read one like this before and already implemented to my blog. But this one is more useful to make the blogspot blog looks more professional.

Greenlava August 8, 2010 at 11:56 PM    

@I like Kung-Fu Movies!
My pleasure :)

@Affan Ruslan
You're right, conditional formatting, coupled with Blogger Template Designer can work wonders (provided you know what you're doing).

Dawn September 30, 2010 at 10:47 PM    

Hi, I've benefited from this article! I do have a question though. I'm trying to display a widget on ONE specific static page. The code above limits the widget to static pages... but ALL of them. I have 10. Is there a way to specify ONE particular static page to display a widget on? Would love to do this on my baking blog.

Dawn @ BeatUntilFluffy@gmail.com

Dawn October 1, 2010 at 5:31 AM    

I figured it out. I had to use #6. Thanks so much for posting this. It's easy to find things here as well. You know, the google search gadget doesn't work that great from what I've found. Is there a way to make your own that actually pulls up all related posts to a label and not just a few here and there?

Greenlava October 1, 2010 at 10:43 AM    

@Dawn
I use Google Custom Search.
If you're interested, here's a tutorial for installing the search box in navigation bar, just like Blogger Sentral's.

Cenangau November 27, 2010 at 11:25 PM    

How if I want ts to display for examples in index and tem only? Help please...

Greenlava November 28, 2010 at 6:45 AM    

@Cenangau
This variation should work:
[b:if cond='data:blog.pageType == "index"']
CONTENT (TO BE EXECUTED IF CONDITION IS TRUE)
[b:else/]
[b:if cond='data:blog.pageType == "item"']
CONTENT (TO BE EXECUTED IF CONDITION IS TRUE)
[/b:if]
[/b:if]

Leo January 5, 2011 at 1:59 AM    

thanks for this useful hack =D
but what if you like to display a widget NOT on a specific page, but on all other pages?
have you got an idea?
thx
leo

Greenlava January 5, 2011 at 7:42 AM    

@Leo
"To reverse the condition, change the comparison operator from == (is equal to) to != (is not equal to)"

Rollin Shultz March 11, 2011 at 5:29 AM    

Thanks very much for the lesson as well as the code. I used #6 with some modifications.

I wanted to have a thank you page for those who used the paypal donate button. I did not want any widgets ontheat page especially a donate widget. I already have five widgets on my template and I did not want to do this for each widget and redo for future widgets so I found the ID for the sidebars and used the same code arrangement to hide them, which means I only had to do it twice.

Code here:
[b:section-contents id='sidebar-left-1']
[b:widget id='LinkList1' locked='false' title='Alternative News Sources' type='LinkList']
[b:includable id='main']
[b:if cond='data:blog.url == "http://rollinshultz.blogspot.com/p/thank-you.html"']
[style type='text/css']
#sidebar-left-1 {display: none;}
[/style]
[b:else/]

skipping on down to inserting the [/b:if] before the [/b:includable] tag.
I have succesfully trimmed of the sidebars and now I must find a way to hide the page and expand the center post body to full width. I am having trouble finding the control for the center section. I am using the awesome inc template.

Greenlava March 11, 2011 at 10:20 AM    

@Rollin Shultz
There is a better/easier way of hiding the sidebar and widen the post column. I would suggest you use this method:
Applying different styling to static pages
however you want to replace the conditional tag in the tutorial with the one you posted above.

varisphere April 3, 2011 at 5:04 PM    

can I used operand AND / OR in If conditional statement?
thanks in advance! :)

Greenlava April 3, 2011 at 7:45 PM    

@varisphere
I'm afraid you can't do that.

Al,  May 1, 2011 at 7:06 AM    

Hi,

It doesn't work for me. Can you check my code? I would like to widget to only show on a specific page. (i had to as a space in h2, style and div tags in order to post here)





























#WidgetID {display:none;}/*to hide empty widget box*/







Many many thanks!

Greenlava May 3, 2011 at 10:50 AM    

@Al
When posting HTML/XML code, replace < and > symbols with [ and ] respectively.

Al,  May 8, 2011 at 10:34 AM    

Hi,

I tried it again on a different widget and it worked. Here is the code:



[b:widget id='LinkList1' locked='false' title='Links' type='LinkList']
[b:includable id='main']
[b:if cond='data:blog.url == "http://myblog.blogspot.com/p/links.html"']
[b:if cond='data:title'][h2][data:title/][/h2][/b:if]
[div class='widget-content']
[ul]
[b:loop values='data:links' var='link']
[li][a expr:href='data:link.target'][data:link.name/][/a][/li]
[/b:loop]
[/ul]
[/div]
[b:include name='quickedit'/]
[b:else/]
[style type='text/css']
#LinkList1{display:none;}/*to hide empty widget box*/
[/style]
[/b:if]

[/b:includable]
[/b:widget]


Thanks again!

Sagar May 9, 2011 at 4:54 AM    

I want to highlight the links in my post with a Blue background color, for eg: links on (www.shoutmeloud.com) on post pages.

How do i apply blue background color for Only links in my post content ?

I tried using the conditional tag you specified above for post pages but it applies to all content including sidebars, which i dont want.

Thanks.

Greenlava May 9, 2011 at 11:37 PM    

@Sagar
To target in-post links, use .post-body a selector instead of a.
Example:
.post-body a {background: blue;}

w@N June 5, 2011 at 12:41 AM    

great tips. solve my problem. keep up the good work..

J Eldridge June 16, 2011 at 7:32 AM    

Is there any possible way to make it where you can target specific pages for this tactic? I couldn't find a way to get it to work on different pages.

Basically what I'm going for with the blog I have is that I want a sidebar of buttons (a nav tool) to pop up on any post I make featuring a certain item (in this case 3d Models) so that you can easily navigate to other models and such.

I have the sidebar popping up when you click on 3d Models, but then when clicking on each button to go to that model (which is an individual post) the sidebar disappears. I'd like to know how to target multiple posts with this code so that any post I create with my 3d models will let the sidebar show up, but the motion graphics/main page/animation pages will not have the sidebar.

Here is a link to the page:
http://jeremieldridge.blogspot.com/p/3d-modeling.html

(all of the images are pretty crude and are simply standins before plugging in new items)

For any more clarification please feel free to email me at eldridgejeremi@gmail.com

Greenlava June 18, 2011 at 9:29 PM    

@J Eldridge
It's rather complicated but achievable, I think. Here's an idea:
1. Label the posts with a common label.
2. Detect the label, and style the page accordingly. This post: Creating static pages in Blogger will show you how to do that (in step 3).
3. Wrap your code in a post page conditional tag.

Prayag Verma July 4, 2011 at 2:47 PM    

thanks a lot

Honeybee July 4, 2011 at 5:19 PM    

I like your tutorial. I keep coming back to your blog and get reference. This one works like a charm on my blog. Million tQ!

Alain-Christian August 17, 2011 at 5:38 PM    

You're missing two very important page type: label and search

My tutorial shows you how to customize ALL seven page types. Have a look: 7 Blogger Page Types: Analysis, Code Snippets, Data Matrix | MY STADY

Greenlava August 21, 2011 at 2:04 AM    

@Alain-Christian
I didn't know about the search page type. Thanks for the info :)

yblinx October 10, 2011 at 11:39 PM    

i need complete sitemap like index for my blog posts. there are more than 4000 posts, i can't get it via any proper means.
help me create a sitemap code so that i can create a page with posts categorized by labels.
my blog here: www.mobilemoviesite.com
hope you help me resolve this mess.
Best Regards

Greenlava October 18, 2011 at 9:13 AM    

@yblinx
Try this link:
http://www.abu-farhan.com/2010/05/table-of-content-for-blogger-new-style/

Muhd Firdaus November 29, 2011 at 9:30 AM    

it is can be done with id element? i really really need your answer.

example..

[b:if cond='data:blog.url == "http://css3-jquery-html-lab.blogspot.com/#hide"']
[/b:if]

Using #hide .. Can it be done?..

Greenlava November 29, 2011 at 4:20 PM    

@Muhd Firdaus
I don't think that will work.

Mr Admin May 13, 2012 at 6:47 PM    

Hi, i want to ask you about how to customize juste the first post on just the item page (just first post) i mean which conditions to use; because i’d used this code:

<b:if cond='data:blog.pageType != &quot;index&quot;'> <b:if cond='data:blog.pageType != &quot;archive&quot;'> <b:if cond='data:post.isFirstPost == &quot;true&quot;'> <div class='new-post' id='new-post'/> <div class='clear'/></b:if> </b:if> </b:if> but no success. the Badge (new-post) appear on non new post on item page please help me

cinta June 19, 2012 at 9:31 AM    

thank you for your tutorial, I finally know how to put if cond.. great result.

Axis_n July 25, 2012 at 11:04 PM    

How do I reverse this ?!

Greenlava July 26, 2012 at 1:21 AM    

@Axis_n
Just go back and remove the code you added.

Glo July 30, 2012 at 9:08 AM    

I currently have 3 images in the sidebar of my blogger template. I want each image to display on a different page. I was able to get the first image to display on only the home page with no problem. The second image I want to display on only an 'about' page. I was able to do this too but I had to leave out the statement with #widget id {display:none} in order for it to work. Even with leaving this statement out the picture did only show up on the 'about' page. I was also able to get my third image to display on only one page that I want it too but I noticed that it is pushed down slightly. I am assuming this is because of the image on the 'about' page that does not have a display:none style. If I did add that style element to the 'about' image it would not display at all. Can you tell me why it would not display if I added the style element to it? I am confused to as to why it would work without the style element.
Here is my code for the first two images:


<b:widget id='Image1' locked='false' title='' type='Image'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://testgb567.blogspot.com/&quot; '>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:link != &quot;&quot;'>
<a expr:href='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption != &quot;&quot;'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#Image1 {display:none;}/*to hide empty widget box
</style>
</b:if>
</b:includable>
</b:widget>
<b:widget id='Image2' locked='false' title='' type='Image'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://testgb567.blogspot.com/p/about-me.html&quot; '>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:link != &quot;&quot;'>
<a expr:href='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption != &quot;&quot;'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>

</b:if>
</b:includable>
</b:widget>


Thank you very much for any advice you can give me!

Greenlava August 8, 2012 at 6:44 AM    

@Glo,
I can't view your test blog (it's on private), so I'm not sure what might've caused that. Have you tried this?
<b:if cond='data:blog.url == &quot;http://testgb567.blogspot.com/p/about-me.html&quot; '>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:link != &quot;&quot;'>
<a expr:href='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption != &quot;&quot;'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#Image2 {display:none;}/*to hide empty widget box
</style>
</b:if>
</b:includable>
</b:widget>

Zerei August 14, 2012 at 8:36 PM    

Man! You saved my life! I was looking for this by hours. Finally i found the answer! Thanks a lot!

Artemisia Moltabocca November 9, 2012 at 2:21 AM    

I just want you to know I constantly use this page for my target information. The firstpost target was especially useful. Thanks.

Anonymous,  December 1, 2012 at 4:34 PM    

Thank you.

Pak Lang December 4, 2012 at 1:37 AM    

I want display certain picture in different post. I tried this code but nothing happen. Please help me

<b:if cond='data:blog.url == &quot;http://cara-cara-kuruskan-badan.blogspot.com/p/senaman-membakar-kalori.html&quot;'>
<b:if cond='data:blog.url == &quot;http://cara-cara-kuruskan-badan.blogspot.com/p/senaman-harian-yang-ringkas.html&quot;'>
<b:if cond='data:blog.url == &quot;http://cara-cara-kuruskan-badan.blogspot.com/p/senaman-kempiskan-perut.html&quot;'>
<b:if cond='data:blog.url == &quot;http://cara-cara-kuruskan-badan.blogspot.com/p/senaman-kecilkan-lengan.html&quot;'>
<b:if cond='data:blog.url == &quot;http://cara-cara-kuruskan-badan.blogspot.com/p/senaman-kecilkan-peha.html&quot;'>
<b:if cond='data:blog.url == &quot;http://cara-cara-kuruskan-badan.blogspot.com/p/senaman-kecilkan-punggung.html&quot;'>
<a href='http://cara-cara-kuruskan-badan.blogspot.com/p/cara.html'><img alt='kuruskan badan' border='0' src='http://i1171.photobucket.com/albums/r559/paklangzaidi/kevinsenaman1.jpg' style='float:left;padding:5px;'/></a>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>

Greenlava December 6, 2012 at 11:23 PM    

@Pak Lang
You want to add the code one by one (instead of nested), like this:

<b:if cond='data:blog.url == &quot;http://cara-cara-kuruskan-badan.blogspot.com/p/senaman-membakar-kalori.html&quot;'>
<a href='http://cara-cara-kuruskan-badan.blogspot.com/p/cara.html'><img alt='kuruskan badan' border='0' src='http://i1171.photobucket.com/albums/r559/paklangzaidi/kevinsenaman1.jpg' style='float:left;padding:5px;'/></a>
</b:if>
<b:if cond='data:blog.url == &quot;http://cara-cara-kuruskan-badan.blogspot.com/p/senaman-harian-yang-ringkas.html&quot;'>
<a href='http://cara-cara-kuruskan-badan.blogspot.com/p/cara.html'><img alt='kuruskan badan' border='0' src='http://i1171.photobucket.com/albums/r559/paklangzaidi/kevinsenaman1.jpg' style='float:left;padding:5px;'/></a>
</b:if>

and so on


Artemisia Moltabocca December 16, 2012 at 3:20 AM    

How do I target pages with appended with http://blog.blogspot.com/search?

Muhammad Shoaib December 17, 2012 at 1:46 AM    

how can i learn blogger xml complete. is any website you know please share with me

Greenlava December 20, 2012 at 1:18 PM    

@Muhammad Shoaib
Try this URL:
http://support.google.com/blogger/bin/answer.py?hl=en&answer=47270

Michael Landfair January 4, 2013 at 4:58 AM    

I want sidebar text link ads to only show when a particular page is clicked on. I think this is the code, but I have not been able to make it work:







b:if cond='data:blog.url == "PUT_URL_HERE"'>




Michael Landfair January 4, 2013 at 5:04 AM    

<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Text8' locked='false' title='' type='Text'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

Software ERP Indonesia January 20, 2013 at 10:46 PM    

Thank you very much for posting this post!
"Targeting specific pages/URLs with conditional tags"
This is very useful!

Taimoor March 10, 2013 at 3:47 PM    

thank you so much bro!

Jasa SEO March 27, 2013 at 12:26 AM    

thank you for your tutorial

Daniel,  April 14, 2013 at 2:17 PM    

Hi admin, first... thanks for the useful tips, I've a questions....it is possible to use conditional tag to not index breadcrumbs in Google SERP. Caus I dont want to show breadcrumbs in the SERP, I just want to show only the post URL. Please help and thanks

Greenlava April 16, 2013 at 3:40 PM    

@Daniel
I think the way to do this by not declaring them as breadcrumbs to search engines i.e. removing the breadcrumb properties from it.

Tech Tricks Corner May 13, 2013 at 8:19 PM    

Hi Admin
thank you for writing such a informative post. This is what i was searching, finally found it.
thank you once again.

Blogger Conditional Tags June 22, 2013 at 1:38 AM    

Good, it works well.

Blogger Copast August 8, 2013 at 12:56 AM    

thanks information this post

Click to go to top Click to comment