June 8, 2011

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 :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Growing All Around said...

Hello,

Hello,

I'm trying to use a template but i'm having a little bit of trouble with the static page.
I was able to set up a landing page, but I'm unable to set up the condition for the static pages.

Could you please help me?

My web address is http://www.annadusekphotography.blogspot.com/p/about.html

Thank you!

Mayura De Silva said...

Hi Anna,

I just had a quick look at your page :) Do you need to show or hide something on that page?

Cheers...

Rahul said...

how to hide content in item page only

Mayura De Silva said...

Refer to Post/Item Pages and color indication note for Sign.

Cheers...