07 November 2015

Hide Blogger HTML/JavaScript Gadget

There is this nice HTML/JavaScript add-on in Blogger, where everyone could include his own HTML, CSS or JS code.  Adding the Gadget without title doesn't show it on the Blogger page.  This is very OK, but what if those HTML/JavaScript-Gadgets grow in numbers and I would like to name them appropriate, i.e. add a title?  Unfortunately they appear on the main page in their positions as empty boxes with given title.

To get rid of those empty boxes we have to go to the Template HTML code and remove the title showing code there (marked blue below).  Just push on the drop down menu next to Save Template and search for your HTML-Gadget(s).  Then delete those rows.

<b:widget id='HTML1' locked='true' title='my desired title' 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:includable>
</b:widget>

The div tag for widget content is still needed in order for Blogger to include the entered HTML/JavaScript code on the page.

I positioned my HTML-Gadgets far down the page, in the footer.  Thus the remaining empty boxes without title are not visible anymore but named in my template overview.