Search code examples
htmlcssbloggerblogspot

How to remove sidebar on pages other than blog posts in Blogger?


I am creating a Blogger theme from scratch and stuck in this situation where I need to remove sidebar from all other pages except the blog posts (a.k.a. "item"). I've seen all question regarding this but they are advising to do it with css. I'm just wondering, is there any way of NOT loading the sidebar on the client side, rather than loading and then making it invisible.

Concept that I've been trying to use is this,

<html>
<head></head>
<body>
    <header></header>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      &lt;main class=&#39;container item-wrapper&#39;&gt;
        &lt;div class=&#39;row&#39;&gt;
          &lt;section class=&#39;content-wrapper col col s9 m9 l9&#39;&gt;
    <b:else/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      &lt;main class=&#39;container&#39;&gt;
        &lt;div class=&#39;row&#39;&gt;
          &lt;section class=&#39;content-wrapper col col s12 m12 l12&#39;&gt;
    </b:if>
    </b:if>

          &lt;/section&gt;

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <section class='content-wrapper col col s3 m3 l3'>
          </section>
    </b:if>
        &lt;/div&gt;
     &lt;/main&gt;

    <footer></footer>
</body>
</html>

The problem is, this if-else block doesn't seem to work and I don't know why I'm getting two different <main> blocks on inspecting in browser.

Secondly, if I try to use CSS/Javascript, I will have to change the content-wrapper size from s9 to s12. But doing that would be a last option.


Solution

  • Try this

    <html>
    <head></head>
    <body>
        <header></header>
    
        <main expr:class='data:blog.pageType == &quot;item&quot; ? &quot;container item-wrapper&quot; : &quot;container&quot;'>
          <div class='row'>
            <section expr:class='data:blog.pageType == &quot;item&quot; ? &quot;content-wrapper col col s9 m9 l9&quot; : &quot;content-wrapper col col s12 m12 l12&quot;'></section>
    
            <b:if cond='data:blog.pageType == &quot;item&quot;'>
              <section class='content-wrapper col col s3 m3 l3'></section>
            </b:if>
          </div>
        </main>
    
        <footer></footer>
    </body>
    </html>