Making this new template, I had to filter out a lot of stuff for various pages. For example, you won't see the TOC on a post page, but you will on the main, archive and search pages. The hanging flowers in the bottom area disappear from the top left on post pages, and show up at the bottom, straightened out.
The simple format of the new Blogger conditional tag is:
<b:if cond='--condition--'> <!-- codes to execute if True --> <else/> <!-- codes to execute if False --> </b:if>
That is pretty much all you need to know to get started. The
cond attribute can hold any condition in the form of a Blogger data variable, operator (optional) and value (optional). I say optional for the last two because most of the data variables have either of two values, True of False. In this case, you can just check their content with a
cond='data:variable' which translates to
if true. The
<b:else/> is optional too, in which case there will be no output in case the condition is false. Don't miss the forward slash, otherwise Blogger will give an error.
Creativity and ingenuity
The first simple trick is conditional CSS. This means that certain parts of your CSS will be executed on certain pages. This let's you style main, archive and post pages separately if you want to. Sound cool? Hehe! There's a catch :P
You'll have give up on your
<b:skin> tags (somewhat) for this. You see, Blogger doesn't like adding conditions to those tags, because the 'Page Elements' layout depends on those to draw the widgets and and their dimensions, with any other nitty gritty that you might have added. So, what do you do? Simple! Add your own pair of
<style> tags! These won't be checked by Blogger in the Page Elements view, and you can style away to your hearts content.
However, be warned, this most probably 'will' warp your 'Page Elements' view pretty weirdly. If you don't use it too much, like me, then go ahead. If you do, try this. Keep the main styles within the
<b:skin> tags, and move over only the conditional styles within
<style> tags. You will still see some styles creep in, but they'll be minimum. You can use your conditional tags the same way you use them in your widgets. Nothing changes! :)
That's that for styles. You can't use conditional tags to hide widgets from certain pages. Apparently there can only be
The next thing is the page content itself. You can literally use the conditional tags anywhere you feel like (except inside sections but outside widgets). You can use it to hide one sidebar, and show a different one. This can be achieved by making two sections, one for each sidebar. Then wrapping each of them with the conditionals, having the required conditions to suit your purpose. It's quite easy when you begin to think of it, and becomes more fun when you start to play with it.
See what it does? It'll print out the first message when the user is on the main page, and second one with a link to the homepage on any other page. The variable
main gets the value of the main page because it is outside the CDATA tags. Anything outside those tags is parsed by the Blogger parser as tags. Anything inside is left as it is. That means, if you try to put the variable line inside a CDATA segment, it'll get the value '<data:blog.homepageURL/>' instead of getting the actual URL. This is why in my custom dates script, the actual date is passed to the function, and not the tag. This can be your best scripting friend if you want to work with separate page types in your scripts. A simple way to allow multiple functions/codes to check which page it is, is by writing out this code right under your
<b:if cond='data:blog.pageType == "item"'> <input type='hidden' value='item' id='pagetype'/> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <input type='hidden' value='archive' id='pagetype'/> <b:else/> <b:if cond='data:blog.pageType == "index"'> <input type='hidden' value='index' id='pagetype'/> <b:else/> <input type='hidden' value='search' id='pagetype'/> </b:if> </b:if> </b:if>
That (if everything is right) should print out 'one' hidden input tag with the value set to the page you're on. Then you can do a
var page = document.getElementById('pageType').value, which will put that value in the variable, and then you can use that variable everywhere and anywhere you want (provided it is global). This trick works superbly, and since the page type is being decided by Blogger tags, there is no way your condition can be broken. This can also be used to hide individual widgetsThey will still load though, hence there will be no reduction in page load time, so you might want to keep that in mind., or other page elements until the
pageType attribute begins to work as documented.
Let 'em flow
So, those are the few methods that I've been able to come up with to increase the mileage you get with the conditional tags. You're limited only by your creativity ofcourse. Give me a buzz in the comments whenever you come up with a cool new way of using them, and I'll gladly link to you! I'd love to see what people can come up with :)
Get 'em creative juices flowing!