Using if/else to customize elements in specific pages in Blogger

Controlling certain elements visibility, usually widgets, in your blogger pages can a bit confusing if you are not familiar with coding or with the blogger template. In this post, I will note down the things I learned in using the if/else tag for hiding or showing elements in specific pages in blogger.

I'll be focusing in using the if/else tags in your template - how to use it and where you can use it. Anyway, just let me know in the comments section if something isn't clear.

A couple of things before you begin following this tutorial:

• Back up your blog template. Just go to Template » Backup/Restore
• Use a test blog if you can.

Contents

1. Introducing the <b:if> and <b:else/> tags.
2. Writing the if/else code.
3. Showing and hiding widgets in specific pages.
4. Replacing element function with if/else
5. Nested if's and multiple conditions: if within an if
6. Recommended links

Alright so now let's start with the basics or just skip to the coding.

Introducing the <b:if> and <b:else/> tags.

The <b:if> and <else> tags are for writing conditional statements. Conditional statements could be something like: IF I'm on the homepage, show the welcome message. ELSE show the announcements.

Writing the if/else code.

In Blogger templates, you can use <b:if> with or without <b:else/> but you can never use <b:else/> without <b:if>.

Using if with else:

<b:if cond='CONDITION GOES HERE'>
  ...do something
<b:else/>
  ...do something else
</b:if>

Using if without else:

<b:if cond='CONDITION GOES HERE'>
  ...do something
</b:if>

Note that an <b:if> should always be paired with a closing <b:if/>. The <b:else/> tag however, doesn't have a closing tag so that it has a trailing slash "/".

As for the "CONDITION GOES HERE", well this is the condition you will put to test. For testing, you use either the equal "==" or the not equal "!=" symbol. You'll see more of this later.

Showing and hiding widgets in specific pages.

Here is a sample Layout I will refer to throughout the guide. Note that I've added a "Welcome!" and "Announcement" HTML/Javascript widget.

Layout with a welcome message and announcement HTML/Javscript widget.

And this is what the page looks so far.

Sample homepage with both Welcome and Announcement widgets.

Recommended reading: This post has a list and a good explanation of each of the page types in Blogger.

UPDATE (2019): Here is an updated list of the Blogger page types: https://mystady.com/blog/complete-guide-blogger-page-types-2019

Ok so let's start with showing the welcome message at the homepage and hiding it if it isn't a homepage. So what you do now, is that you open your template for editing (Template » Edit HTML).

Open your template for editing.

Then make sure to check Expand Widget Templates.

Remember to check Expand Widget Templates

Now we find the widget by searching for its title, in our case, "Welcome!". You can just use your browser's find function (usually Ctrl+F) to make it easier. Once you find your widget, you would then see something similar to this:

Find your widget using its title.

Now we are going to modify it using an if-statement. Since we only want to show the welcome message only in the homepage, there is no need to include an else-statement. We can do this by simply checking whether the page IS a homepage or not.

As explained in the post I mentioned earlier, for testing whether a page is a homepage, you will use the following code:

<!-- IF the page IS a homepage -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- do something -->
</b:if>

And so using it on our welcome message widget, we now get:

<b:widget id='HTML1' locked='false' title='Welcome!' type='HTML'>
<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>
  </b:if>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Save your template and test it out by going to your homepage and by visiting other pages. You should see something similar to the images below.

Welcome message is displayed at the homepage.

Welcome message is not displayed on other pages.

Note that you should see an empty space for your welcome message as marked in the figure above.

Now what if you wanted to display news/announcements instead of the welcome message if the page is not the homepage? Well, we can just add an if-statement to the announcement widget we want to display.

Repeat the steps of looking for the widget title and once again insert the <b:if> </b:if> pair between your widget code but this time, take note of the condition symbol ==. If we use the same code, our condition will be whether the page IS the homepage. Since we want to display the announcements on all pages but the homepage, our condition should read as whether the page IS NOT the homepage. To do this, just simply replace "==" (equal) with "!=" (not equal).

<b:widget id='HTML2' locked='false' title='Announcement' type='HTML'>
<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>
  </b:if>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Save your template and try it out again. Now you should see only the welcome message at the homepage and the only the announcements on all other pages.

Announcements are not displayed at the homepage.

Now you might be thinking why we didn't use an else-statement when we can just say: IF the page IS a homepage, display welcome message ELSE display announcements.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:widget id='HTML1' locked='false' title='Welcome!' type='HTML'>
  .
  .
  .
</b:else/>
  <b:widget id='HTML2' locked='false' title='Announcement' type='HTML'>
  .
  .
  .
</b:if>

While this is true, <b:if> and <b:else/> tags can't be used to wrap a <b:widget>. I tried doing so and I got this error:

The widget with id HTML1 is not within a section (actual parent element is: b:if.) Every widget should be in a section.

So for widgets, you can only do your conditional statements inside it.

Digging into the template: Replacing element function with if/else

Aside from widgets, there are a lot of other elements you may want to hide/show across your blog. So for our next sample, let's take a look at some code on our template. If you haven't got a customized template (you only used Blogger's default themes), you will find something similar to this: (try doing a search(Ctrl+F) on the Template editor)

<b:includable id='title'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
 <data:title/>
    <b:else/>
 <a expr:href='data:blog.homepageUrl'><data:title/></a>
    </b:if>
</b:includable>

This snippet is part of the Header widget. Let's look at the if-else block line by line.

<b:includable id='title'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
 <data:title/>
    <b:else/>
        <a expr:href='data:blog.homepageUrl'><data:title/></a>
    </b:if>
</b:includable>

The condition of the if-statement checks whether the URL of the current page (data:blog.url) IS EQUAL (==) to the URL of your blog homepage (data:blog.homepageUrl). Simply put, it checks whether you are on the homepage of your blog or not.

<b:includable id='title'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
 <data:title/>
    <b:else/>
 <a expr:href='data:blog.homepageUrl'><data:title/></a>
    </b:if>
</b:includable>

If the condition is TRUE (you are on the homepage), Your blog title (<data:title>) will be displayed.

<b:includable id='title'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
 <data:title/>
    <b:else/>
 <a expr:href='data:blog.homepageUrl'><data:title/></a>
    </b:if>
</b:includable>

But if you are not on the homepage (<b:else/>),

<b:includable id='title'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
 <data:title/>
    <b:else/>
 <a expr:href='data:blog.homepageUrl'><data:title/></a>
    </b:if>
</b:includable>

Display the blog title (<data:title>), as a link (<a expr:href='...'>) pointing to the blog homepage URL (expr:href='data:blog.homepageUrl').

Pretty neat eh? So how about we experiment with it. Let's start with removing the else-block.

<b:includable id='title'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <data:title/>
    </b:if>
</b:includable>

Without the else-statement, the condition to test will only be whether the current page is the homepage. If it is the homepage, the blog title will be displayed. If it isn't the homepage, nothing will be displayed.

So what if we removed the if-statement?

<b:includable id='title'>
    <data:title/>
</b:includable>

What happens now is that the blog title will always be displayed on ALL pages. If you want the blog title to be a homepage link on ALL pages, simply add the anchor tag (<a>) we had in the else-block earlier.

<b:includable id='title'>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:includable>

One more thing! You can't wrap opening/closing tags in an if-else block. For example, I want to add an id attribute to a <div> tag only if it is an Item page. So using the following code,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='blog-posts hfeed'>
<b:else/>
 <div id="post-list" class='blog-posts hfeed'>
</b:if>

Will produce this error:

We were unable to save your template. Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The element type "div" must be terminated by the matching end-tag ""/div"".

The way to get around this is to create an if-statement for the entire div block without an id attribute and an else-statement for the entire div block with the added id.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='blog-posts hfeed'>
 .
 .
 </div>
<b:else/>
 <div id="post-list" class='blog-posts hfeed'>
 .
 .
 </div>
</b:if>

Once you get the hang of the if-else statements, you will have an easier time customizing your template. Also, you can find a comprehensive list of the Layouts Data Tags (data:blog.url, data:title...) here.

Nested if's and multiple conditions: if within an if

If you are familiar with coding if/else statements in other languages, you are probably thinking of trying logical operators but as far as I know, this does not work in Blogger. I also tried but haven't got it working. If it's possible, anyone knows how?

Ok with that out of the way, let's begin using nested if's. To give you an example, let's say you want to display the Announcements we have earlier on all pages except for the homepage AND About page.

First, we check whether the current page IS NOT the homepage. If this is true, we then check whether it IS NOT the About page. Following the pattern we did earlier, we now get this:

<b:widget id='HTML1' locked='false' title='Welcome!' type='HTML'>
<b:includable id='main'>

    <!-- Check if the current page IS NOT the homepage-->
    <b:if cond='data:blog.url != data:blog.homepageUrl'>
  
        <!-- Check if the current page IS NOT the about page -->
        <b:if cond='data:blog.url != &quot;http://YOUR-BLOG.blogspot.com/p/ABOUT-PAGE.html&quot;'>

            <!-- 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>

 <!-- Closing if-tag for the About page checker --> 
 </b:if>  
 
    <!-- Closing if-tag for the Homepage page checker --> 
    </b:if>  
   
    <b:include name='quickedit'/>
</b:includable>
</b:widget>

As you can see, your if's should always come in pairs - think of nesting brackets "[[[]]]". Note that you can also have an if/else inside an if or an else. Just remember to always close them properly with their closing tags.

I'm finding it hard to explain this part well so just ask me a question if it isn't clear or something. Let's hope we can figure it out!

Recommended links

Once again, here's the links for the recommended topics I mentioned earlier, plus some other posts you might find useful.

• Blogger page types
• Blogger layouts data tags
• Creating your own Blogger template from scratch

Extra notes

• I've tried using the pageType attribute on the widgets but it never works! Anyone else tried this? I read about this on the Blogger support page here.
• Also tried using Blogger's conditional tags. Doesn't work for me as well. Anyone else tried using this? I guess if/else is still the way to go.

And I think that's it for the if/else tags in blogger templates. I hope this will help you in getting started in customizing your page elements. If there's anything I missed or messed up, just give me a holler. Cheers!