<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
Use the expansion triangle at the left side of the template editor to expand this section of the code. After you do, it will look like:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
5 Add conditional formatting
You need to put conditional formatting code around the code for the gadget - makings sure that it doesn't go around the code for anything else! (which is why you noted what comes afterwards in step 4)And to avoid leaving blank space where the gadget would have gone, you need to update a "hide" instruction to apply it to the gadget-id you noted in step 3.
The code to use is this - except put the gadget-id instead of the XXX.
<b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'>
THE red CODE FOR YOUR GADGET GOES IN HERE
<b:else/>
<style type='text/css'>
#XXXX {display:none;}/*remove blank space that the gadget leaves*/
</style>
</b:if>
The example above looks like this, when the code has been added:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>
<b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'> <!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#Text1 {display:none;}/*remove blank space that the gadget leaves*/
</style>
</b:if>
</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
6 Check that it's worked
Preview your blog before you save the changes: check that the the widget is visible.Save the template changes, and look at your blog. Check that
- The widget is on the first page
- The widget is not seen when you look at an older page (eg one from your archive)
- The other elements of your blog (other widgets, blog post titles, dates and contents) are all as you expect them - on the first screen, and on other screens too.
If anything is wrong with how your blog is working, go back to the template editor (Layout > Edit HTML), and upload from the copy of your template that you made at the beginning of step 1. This will let you blog work properly, while you figure out what went wrong.
How to display a gadget only on a specific post or page
Follow exactly the same approach as above.
But instead of
<b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'>
Make the conditional statement based on something else.
This can be a different condition, or a specific page URL. For example to display a gadget only on a specific page, use this code, and put the address of the page instead of POST-URL:
<b:if cond='data:blog.canonicalUrl == "POST-URL"'>>
Note: for the address of the page, if your blog does not have a custom domain, then be careful to use the "blogspot.com" version of the address, not one with a country-level name (eg the blogspot.in or blogspot.co.uk version)
To display a gadget on every page except a specifc one, replace the double equals signs (==) with the HTML code for not, which is an exclamation mark followed by an equal sign (!=). For example:
<b:if cond='data:blog.canonicalUrl != data:blog.homepageUrl'>
Blogger have now provided an expanded list of conditional statements - you can find information about it: