Hiding Static Pages from Main Page in Blogger

Since I wrote the post titled Create Static Pages in Blogger – Part 2 I have been asked on numerous occasions about hiding the static page from the homepage or main page. For blogs without many posts, the static pages may appear on the homepage when someone visits the blog.

It isn’t hard to hide static pages on your blog’s homepage, but it does take a bit of coding, much like it was to create the static page. In this post, I’ll explain what you need to change to prevent the static pages from appearing on the homepage of your Blogger blog.

Hiding the Static Pages

As you may know, static pages are regular post pages, but the code within the template causes them to look different when displayed. Since they are regular posts, they could show up on your blog’s homepage.

To prevent them from appearing, you can use the following steps:

1. First, if you haven’t already done so, create a static page by following the steps outlined in Create Static Pages in Blogger – Part 2.
2. Once you have created a static page, make a backup of your current template before proceeding.
3. Next, open your template in the HTML editor within Blogger. We will be editing the HTML, so we will need to work in that editor.
4. Click the “Expand Widget Templates” checkbox to ensure all the code is displayed.
5. Using your web browser’s “Find” feature, search for the following:
   <b:loop values='data:posts' var='post'>

   This is where Blogger will loop through the posts that will be displayed on each page. For individual post pages, only one post will be shown, while a homepage will have many.

6. Now comes the tricky part, replace the following lines of code:
   <b:loop values='data:posts' var='post'>
     <b:if cond='data:post.dateHeader'>
       <p class='date-header'><data:post.dateHeader/></p>
     </b:if>
     <b:include data='post' name='post'/>
     <b:if cond='data:blog.pageType == "item"'>
       <b:include data='post' name='comments'/>
     </b:if>
     <b:if cond='data:post.includeAd'>
       <data:adEnd/>
       <data:adCode/>
       <data:adStart/>
     </b:if>
     <b:if cond='data:post.trackLatency'>
       <data:post.latencyJs/>
     </b:if>
   </b:loop>

   with these lines of code:

   <b:loop values='data:posts' var='post'>
     <b:if cond='data:blog.url == data:blog.homepageUrl'>
       <b:if cond='data:post.dateHeader != "June 23, 2006"'>
         <b:if cond='data:post.dateHeader'>
           <p class='date-header'><data:post.dateHeader/></p>
         </b:if>
         <b:include data='post' name='post'/>
       </b:if>
     <b:else/>
       <b:if cond='data:post.dateHeader != "June 23, 2006"'>
         <b:if cond='data:post.dateHeader'>
           <p class='date-header'>
             <data:post.dateHeader/>
           </p>
         </b:if>
       </b:if>
       <b:include data='post' name='post'/>
       <b:if cond='data:post.dateHeader != "June 23, 2006"'>
         <b:include data='post' name='comments'/>
       </b:if>
     </b:if>
     <b:if cond='data:post.includeAd'>
       <data:adEnd/>
       <data:adCode/>
       <data:adStart/>
     </b:if>
     <b:if cond='data:post.trackLatency'>
       <data:post.latencyJs/>
     </b:if>
   </b:loop>

   Note:

   Remember to replace the date and format shown above with your own or this code won’t work properly.

7. Click the “Save Template” button at the bottom to update your template. If there are no errors, view your homepage to ensure your static pages are hidden.

How the Code Works

For those interested, here is what the actual code is doing:

Blogger begins to loop through the posts using this line:

Next, we check to see if current page (data:blog.url) is the homepage (data:blog.homepageUrl) with this line:

If it is, we then check the post date to see if it doesn’t match our static page date. Also, if you created more than one static page, we must include a date check, since other pages after the first page for a date don’t have a date header associated with them.

If the date doesn’t match, then we display the post on the page:

If it is a static page, then we don’t display it at all. The remainder of the code displays the post or static page for all other pages on the blog.

That is all that is needed to hide static pages from the homepage in a Blogger blog.