How to Show / Hide Elements on Different Pages in Blogger

How many of elements have you added to your blog? Most of time you add gadgets and widgets, images, advertisements or other elements to your blog except for posts to convey a message, attract visitors or for a specific purpose. But after adding some elements, you might encounter a problem of displaying them on appropriate pages. I mean sometimes you may just wanna display some widgets or elements only on specific pages but not on all pages. In such a scenario, do you know how to show off your elements only on a page where you wanna display them?

Absolutely, you may find it as an unusual scenario. But for example, if you added a Facebook like box to your blog, it will display on every page. But think you just wanna show it for your visitors on your homepage only. So how you gonna get it done? Here you can find how to display or hide your elements according to your preferences and relevance of the pages.

There are mainly four type of pages we can identify in your blog.

● Home/Index Page

● Archive Pages

● Post/Item Pages

● Static Pages

Blogger use pageType layout tag to identify your current page type. Also you can use Url tag to differentiate your pages. Using these tags, we can develop conditions on elements to be displayed on a specific page type.

Here you can see how to make use of conditional code snippets. Here we check for particular page type or URL using an if condition. Select your code snippet correspond to your requirement.

Note: If you use pageType tag, the condition will be valid for all pages which has same page type. But if you use Url tag, it works only for a particular page that specified URL refers to.

Specific Page/URL

You can use this method for widgets or any other element to be visible in specified page/URL.

<b:if cond='data:blog.url == "[Page URL]"'>
[Element or Other Code Snippet]
</b:if>

Home/Index Page

Here you can show up elements or affect other code snippets only for homepage.

<b:if cond='data:blog.pageType == "index"'>
[Element or Other Code Snippet]
</b:if>

OR

<b:if cond='data:blog.url == "data:blog.homepageUrl"'>
[Element or Other Code Snippet]
</b:if>

Archive Pages

Here you can show up elements or affect other code snippets only for archive pages.

<b:if cond='data:blog.pageType == "archive"'>
[Element or Other Code Snippet]
</b:if>

Post/Item Pages

Here you can show up elements or affect other code snippets only for post pages.

<b:if cond='data:blog.pageType == "item"'>
[Element or Other Code Snippet]
</b:if>

Static Pages

Here you can show up elements or affect other code snippets only for static pages aka pages in Blogger.

<b:if cond='data:blog.pageType == "static_page"'>
[Element or Other Code Snippet]
</b:if>

Color Indication Information

   - Conditional Statements

These conditional statements will validates your condition for specified page types or URLs. If you have element code or code snippet already in your template, then you need to add these conditional statements as you see in above demonstrations.

   - Operator/Sign

This is sign used in the conditional statement. Here we used equals sign (==) and your widget or any other element will be visible on specified page URL or page type. But if you need not to show your widgets or other elements for those pages, use inequality sign (!=).

If you specify == sign it means the code checks for exact page/URL or page type. For example, data:blog.pageType == "index" means the condition valid only if the page type is Home/Index page which is your homepage.

If you specify != sign it means the code checks for page/URL or page type which are not similar to specified pages. data:blog.pageType != "index" means the condition will be valid only if it's not the Home/Index page.

So if you need to display an element except on Homepage, it will be:

<b:if cond='data:blog.pageType != "index"'>
[Element or Other Code Snippet]
</b:if>

What if you need to display an element except on Post and Static Pages?

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
[Element or Other Code Snippet]
</b:if>
</b:if>

So the element will be displayed only on Homepage and Archive pages.

   - Your Element Code or Other Code Snippet

Specify your element code or other code snippet such as image, text, meta tag, script etc. here. If you already have your element code in your template, just add outer conditional lines as you see in the snippet.

Note: If you specify this on a widget, find your widget code and place opening condition tag, <b:if cond='data:blog.pageType == "[Page Type]"'> just after <b:includable id='main'> and place end tag, </b:if> just before </b:includable> tag.

i.e:

<b:widget id='HTML1' locked='false' title='Clock' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<data:content/>
</b:if>
</b:includable>


   - URL of Page

   - Homepage layout tag of Blog

This tag includes your Homepage URL itself. So either you can use this tag or specify your actual Homepage URL.


Enjoy :-)