-blogger -blogspot -code -condition -homepage -if statement opinion

How to add a separate homepage to a Blogspot template

In this tutorial, we will be using my Blogspot Boilerplate template as the example. In a nutshell, for those that know what they are doing and don't want to read the whole article:

CHANGE THIS:
<!-- ADD MAIN CONTENT -->
<main class='main-content' id='main-content' role='main'>
  <!-- ADD MAIN CONTENT GADGET SECTION -->
  <b:section class='main-content-gadget-section' id='main-content-gadget-section' name='Main Content Gadget Section'>
    <!-- ADD BLOG/ARTICLE GADGET -->
    <b:widget id='Blog1' locked='true' title='Main Content Gadget' type='Blog' visible='true'/>
  </b:section>
</main>

TO THIS:
<!-- ADD MAIN CONTENT -->
<main class='main-content' id='main-content' role='main'>
  <!-- ADD MAIN CONTENT HOMEPAGE CONDITION -->
  <b:if cond='data:view.isHomepage'>
    <!-- ADD MAIN CONTENT HOMEPAGE GADGET SECTION -->
    <b:section class='main-content-homepage-gadget-section' id='main-content-homepage-gadget-section' name='Main Content Homepage Gadget Section'/>
  </b:if>
  <!-- ADD MAIN CONTENT OTHERPAGE CONDITION -->
  <b:if cond='not data:view.isHomepage or data:view.isLayoutMode'>
    <!-- ADD MAIN CONTENT OTHERPAGE GADGET SECTION -->
    <b:section class='main-content-otherpage-gadget-section' id='main-content-otherpage-gadget-section' name='Main Content Otherpage Gadget Section'>
      <!-- ADD BLOG/ARTICLE GADGET -->
      <b:widget id='Blog1' locked='true' title='Main Content Gadget' type='Blog' visible='true'/>
    </b:section>
  </b:if>
</main>

Explanation

First, this is an empty if statement.
<b:if cond='ADD YOUR CONDITIONS HERE'>
  CONTENT YOU WANT TO BE AFFECTED BY THE CONDITION HERE
</b:if>

Second, what makes this work is by using the "homepage" condition in an if statement; as this tells Blogspot you only want to show this area in the homepage.
data:view.isHomepage

Third, if we want to hide the blog on the homepage, then we have to wrap the blog in a if statement using the condition "not homepage".
not data:view.isHomepage

Fourth, this now works, it separates the blog gadget from the homepage. However, it has one side effect. Everything in a "not homepage" condition doesn't show up in "admin > layout" gadget mode. We simply fix this by adding a "or layout mode" to the if statement.
or data:view.isLayoutMode

Finally, you search link to your blogroll by using the search URL, like so:
YOURDOMAIN/search

Comments