Learn to customize your own blog with confidence
Code it Pretty is an archive of tutorials from 2012-2015. Tutorial details may be outdated. More Info
Can you believe this year is almost over? I can barely get my head around it.
This little note is my last post of 2013. From now until 2014, I'm taking some time to study, create, and write before I get back into a regular posting schedule.
Don't worry, I'll still be around to support my tutorials and answer questions in the comments! And, if you start to miss me, you can find me goofing off on Twitter, Google+, and Pinterest.
I wish you all the very happiest of holidays. See ya in 2014!
Blogger has a little-known power feature for template designers: conditional tags. With conditional tags, you can show or hide gadgets on specific pages of your blog — an option you can use in lots of creative ways.
Today I'm going to show you how to use conditional tags to show or hide sidebar gadgets on any page of your blog.
Conditional tags work with all of the standard Blogger templates except Dynamic Views, which doesn't accept customization. Some third-party templates may not accept conditional tags (but most do!).
The technique in this tutorial works on all gadget types except the "Google+ Badge" gadget and the old "Followers" (Google Friend Connect) gadget. You can hide those two gadgets using the instructions in this post's Appendix.
This tutorial is for beginners, but it's easiest if you have a little bit of experience with editing your Blogger template.
If you'd like to brush up on Blogger template basics first, check out How to Use the New Blogger Template Editor.
All set? Let's get started!
Before you begin, back up your template (instructions here). Do not skip the backup.
Open your template by clicking the "Edit HTML" button beneath your "Live on Blog" screenshot.
Now, use the "Jump to Widget" dropdown button to jump down to your gadget. In this example image, I'm choosing the widget with the ID "Image1".
If you're not sure what your gadget's ID is, there's a quick way to find it.
While logged into Blogger, go to the main page of your blog and hover your cursor over the wrench icon at the bottom of your widget. When you do that, you'll see a URL appear at the bottom of your browser window in Firefox, Chrome, or Internet Explorer (Safari users will need to turn on the status bar under View > Show Status Bar).
Look for "Widget ID" in the URL.
The text between the equals sign in "WidgetID=" and the ampersand (&) is the widget's ID. Select that ID from the "Jump to Widget" menu to go straight to that widget's section in your blog's HTML.
Now that you've found your widget, it's time to expand its code so you can insert the conditional tag.
Click the black arrows at the left of the widget's code to expand the code. Most widgets have at least one bit of code to unfold, some have 2 or 3. You can stop unfolding when you get to the closing </b:widget> tag of your widget and see that there are no more fold arrows above it.
Now that your code is unfolded, let me show you where to add the conditional tags.
No matter what conditional tag you choose, it goes in the same part of your gadget's code, so I'm going to show you placement first.
The opening conditional tag goes immediately below this line:
<b:includable id='main'>The closing conditional tag, </b:if>, goes immediately above this line:
</b:includable>Both lines are highlighted in this image:
Now that you know where to put your conditional, it's time to choose your tag!
If you want to restrict a gadget to your homepage only, use this conditional.
Insert the following line below <b:includable id='main'>:
<b:if cond='data:blog.url == data:blog.homepageUrl'>Then, close the conditional by inserting this line above </b:includable>:
</b:if>Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.
The "Index" pages of your blog are the pages readers see when they click the "Older Posts" and "Newer Posts" links at the bottom of the page.
Insert the following line below <b:includable id='main'>:
<b:if cond='data:blog.pageType == "index"'>Then, close the conditional by inserting this line above </b:includable>:
</b:if>Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.
This will show the gadget only when your reader is on an individual post page (aka the permalink page). The gadget will be hidden from the home page, index pages, and static pages.
Insert the following line below <b:includable id='main'>:
<b:if cond='data:blog.pageType == "item"'>Then, close the conditional by inserting this line above </b:includable>:
</b:if>Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.
Static pages are the pages you make in the "Pages" section of Blogger — by default they show up in your top navigation, unless you've specified otherwise.
Insert the following line below <b:includable id='main'>:
<b:if cond='data:blog.pageType == "static_page"'>Then, close the conditional by inserting this line above </b:includable>:
</b:if>Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.
This one's a bit of an oddball, but it could be handy! You can use a conditional to make a sidebar gadget appear one one specific page of your blog only, and nowhere else.
Note: I only recommend this conditional for blogs with custom domains. Blogs with .blogspot.com domains may have issues with this conditional on localized versions of the domain.
Insert the following line below <b:includable id='main'>:
<b:if cond='data:blog.url == "PAGE URL HERE"'>Replace "Page URL here" with the address of the page that should show the gadget. So for example, if I only wanted to show the gadget on my resources page, I'd write it like this:
<b:if cond='data:blog.url == "www.codeitpretty.com/p/resources.html"'>Then, close the conditional by inserting this line below above </b:includable>:
</b:if>Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.
So, what if you want to set the opposite version of a conditional? Say, for example, you want a gadget to show up everywhere except the home page?
In that case, you'd replace the == in the conditional with != like this:
<b:if cond='data:blog.url != data:blog.homepageUrl'>In this conditional, != stands for "is not", so you can think of the conditional as saying "if the URL is not the homepage URL, show the gadget".
