htmlxmlblogger

Widgets don't show in my custom blogger template

I'm creating my own blogger template. I don't have any experience. And since blogger doesn't provide any docs, I started to copy from other professional theme. I copied this section and saved it. But nothing is showing. This is the section code:

<b:section class='main-logo' id='main-logo' maxwidgets='1' name='Header Logo' showaddelement='yes'>
  <b:widget id='Image1' locked='false' title='' type='Image' version='2' visible='true'>
    <b:widget-settings>
      <b:widget-setting name='displayUrl'>https://i.ibb.co/kDvnmB5/image.png</b:widget-setting>
      <b:widget-setting name='displayHeight'>145</b:widget-setting>
      <b:widget-setting name='sectionWidth'>1076</b:widget-setting>
      <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
      <b:widget-setting name='displayWidth'>734</b:widget-setting>
      <b:widget-setting name='link'/>
      <b:widget-setting name='caption'/>
    </b:widget-settings>
    <b:includable id='main'>
      <h4>From #Main</h4>
    </b:includable>
    <b:includable id='content'>
      <h4>From #Content</h4>
      <div class='widget-content'>
        <b:tag cond='data:link'  expr:href='data:link' name='a'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'>
            <b:attr cond='data:sourceSet' expr:value='data:sourceSet' name='srcset'/>
          </img>
        </b:tag>
        <br/>
        <b:if cond='data:caption'>
          <span class='caption'><data:caption/></span>
        </b:if>
      </div>
    </b:includable>
  </b:widget>
</b:section>

To experiment, I added those 2 h4 tags. But Only output from that section I see is:

<div class='main-logo no-items section' id='main-logo' name='Header Logo'></div>

Let me know if you have any suggestion.

Solution

  • The problem wasn't in the code. It was in blogger layout. I debugged over 4 hours and found that blogger doesn't show widget when the amount of <b:section> is 1. Blogger requires more than 1 <b:section/> to display any widget. So, I solved the problem by adding a dummy section [<b:section id='randomID90'/>] in the template and everything works fine! Thanks to @Suramuthu R for giving me the right idea.