Conditional Blogger/BlogSpot Widget/Gadget to appear partially on Home/Inner Pages

#1 ~ Adding the widget and Modifying it from Template XML:

This tweak requires that, you can edit the Template XML and have idea on HTML ids. Although these are not tough (as we are going to explain in this tutorial itself), having some preliminary knowledge will help you tweaking this easily. So lets get started:

• First, let us do this by adding a HTML/JavaScript Gadget. Go to Blogger Dashboard > Layout and add a HTML/JavaScript widget. Add any thing of your choice! For now, to understand the tutorial, add the following piece of code…

  <p style="padding:10px; border: 1px dashed #a5caec; background: #e9f1f8; color: #000;">This will be shown on every Pages</p>

• Now save the widget with some Title, say, “Conditional Widget”.
• Now we need to find the ID of that widget. This can be done easily using Firebug. If you are not familiar with it, then just use the following instruction for simple Firefox interface!

  Just select the widget from the Blog and click on “View Selection Source” [As shown on the image above] > and you will get something like this! The ID of the first div is the id we require [In this case “HTML1”]. [Note that for any HTML/JavaScript Widget the Id will be like HTMLXX where XX can be any number]

• Now, go to Edit HTML mode, from the Blogger Layout and Click on “Expand Widget Template”. Now search for “HTML1” [or what ever you found on the previous step] and you will find something like this:

  <b:widget id='HTML1' locked='false' title='Conditional Widget' type='HTML'>

  <b:includable id='main'>

    <!-- only display title if it's non-empty -->

    <b:if cond='data:title != &quot;&quot;'>

      <h2 class='title'><data:title/></h2>

    </b:if>

    <div class='widget-content'>

      <data:content/>

    </div>

    <b:include name='quickedit'/>

  </b:includable>

  </b:widget>

• Now suppose, you want to show a particular HTML element, say,

  <p style="padding:10px; border: 1px solid #993333; background: #ff9999;">This will be shown only on inner Pages</p>

  to the inner pages.

• For this, you need to first Encode the HTML. Just replace “<” with “&lt;” “>” with “&gt;” and ““” with “&quot;”. You can also use Notepad++ or our Online HTML encoder. The encoded form of the above code will be,

  <p style="padding:10px; border: 1px solid #993333; background: #ff9999;">This will be shown only on inner Pages</p>

• Now just after the <data:content/> add the following lines of codes

  <b:if cond=’data:blog.pageType == &quot;item&quot;’>

  &lt;p style=&quot;padding:10px; border: 1px solid #993333; background: #ff9999;&quot;&gt;This will be shown only on inner Pages&lt;/p&gt;

  </b:if>

• Now check the blog! On any Individual Post pages, it should be like this

Voila! You are now ready to make any conditional widget at your own… To understand the codes read the following section.

#2 ~ Understanding the Widget Code:

While searching of the HTML id, what we have found is the basic Blogger Widget code. Following is a brief discussion on the code:

<b:widget id='HTML1' locked='false' title='Conditional Widget' type='HTML'>

    <b:includable id='main'>

        <!--.....-->

    </b:includable>

</b:widget>

The main widget code which loads the widget from the Blogger database.

<b:if cond='data:title != &quot;&quot;'>

  <h2 class='title'><data:title/></h2>

</b:if>

Includes the Widget Title only if it is present.

<div class='widget-content'>

  <data:content/>

</div>

The main Widget data, stored in the Blogger Database. This is actually the HTML code, which we have inserted from the HTML/JavaScript widget. The <data:content/> is the main content and it is wrapped by a <div> with class=”widget-content”.

Basically we are going to add our custom data, in the form of Encoded HTML before or after the <data:content/> to show it before/after the default code respectively. To make that conditional, we are going to use a <b:if> tag, which is understood by the Blogger XML parser.

#3 ~ Understanding the <b:if> conditional code:

The <b:if> is just like a if condition, which is parsed by the Blogger XML parser. Just read the following points to understand how we have made this widget:

• <data:content/> is the default data present on the widget. Our aim is to add a conditional data, before or after this tag.
• For that, we have added a <b:if cond=’data:blog.pageType == &quot;item&quot;’> tag after the <data:content/> which will be parsed only if the page type is an individual post. To know more more about the page type, have a look at here.
• Inside that b:if tag we have included our HTML in encoded form. This will get parsed by the XML parser and will get converted into proper html only if the condition matches.

#4 ~ Some Tips for better Programming:

1. If you want the main <data:content/> to be displayed conditionally [say only on the index or home pages] then also wrap it inside a b:if in the following manner…

   <b:if cond='data:blog.pageType == &quot;index&quot;'>

       <data:content/>

   </b:if>

2. Place the conditional HTML, before or after the <data:content/> to display that before or after the default widget code respectively.
3. If you want to hide a particular portion from a particular page type, then code it like this…

   <b:if cond='data:blog.pageType != &quot;index&quot;'>

       <!-- 

       HTML code in encoded form here. This will be shown on every page except the index (home page) page. 

       Other page types are item, archive

       -->

   </b:if>

So, that was a complete guide on how to make a Conditional Widget for your Blogger/BlogSpot blog. Use it wisely and make anything you want! Also note that this is not only applicable for HTML/JavaScript widgets, but also applicable for any widget. So, use your creativity to make a dynamic Blogger Blog at you will.

I hope this tutorial was easy enough to understand. If you have liked this, then do share it with your friends. Also do give your feedback and if you face any difficulty, feel free to ask here contact me…