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:
- 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.
- Once you have created a static page, make a backup of your current template before proceeding.
- 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.
- Click the “Expand Widget Templates” checkbox to ensure all the code is displayed.
- 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.
- 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.
- 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.
<b:if cond='data:post.dateHeader != "June 23, 2006"'>
If the date doesn’t match, then we display the post on the page:
<data:post.dateHeader/>
</p>
<b:include data='post' name='post'/>
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.
Related Posts
Create Static Pages in Blogger – Part 2
How to Hide the Posted By Line in Blogger
Remove Navigation Links For Static Pages in Blogger
[...] Hiding Static Pages from Homepage in Blogger [...]
I have multiple static pages with the same date, but with the code as I have entered it, it only hides one of the static posts and displays the others. Do I need to change the code in another way?
Thanks!
I updated the code to move the date check. The problem is that posts after the first one for a specific date don’t have a date header, only a time stamp. I modified the code to first check to make sure the post has a date stamp, before performing the date value check.
Paul,
Terrific! That worked great. Thanks for your help and I really appreciate all the work you have put into this. It has been tremendously helpful and very informative.
Man, I super appreciate the work you’ve done sharing your solutions. I just did the way to hide it from the archive, and that worked perfectly, but I can’t get this to go. Maybe I’m not so good at this:
I’ve pasted the code in, and instead of hiding the posts matching the “Phantom Date”, it’s hiding any post made on the same day, after the first made on that day. (ie only the first post of the day will show up).
I did notice, and it’s really bugging me, that the quotes around “June 23…” in the code have been replaced by " but for the life of me couldn’t get regular quotes to stick. Maybe that’s my problem?
Did you remember to change the date in the code to match your “Phantom date”?
The quotes in the code will automatically be converted to " by Blogger. This will have no effect on the code. I included the actual quote character above (“) since it is easier to read than including ".
Being the sort of lazy person that uses code generous people post to their blog, and (though very rarely) posts comments complaining they can’t get it to work, I was using the same date as you.
However, my date FORMAT was including the day as well (ie Sumday, Avril 2020), changing that and it all works.
I can’t thank you enough for providing this information AND volunteering to help out. A huge help for the less gifted.
No problem. The date format has gotten me frustrated when trying to get something to work in the past.
Paul,
Thanks again for your help, I was wondering if I could trouble you one last time. Is there a certain place in the code to look to ensure that the comments box will appear in the static pages? Viewers are able to leave comments on my main page under the posts, but on each static page there is no link to comment only the “Post Comments (ATOM)” link. I am wondering if I altered the code somehow when following the instructions you posted for creating static pages version 1 and 2.
Thanks!
Jared
Depending on which static page tutorial you followed, you may have disabled the comments for your static page. In version 1 I mention disabling comments when creating the static page. In version 2, you can keep the comments enabled.
At the bottom of the post editor, click the “Post Options” link. Under “Reader Comments”, ensure the “Allow” option is selected for you static pages.
Thanks Paul, Unfortunately I have the Allow Comments option chosen for all three static pages. At the bottom of the pages there is the normal “Posted By” and “time”, but no link to leave comments, which is why I thought it may be something in the code where it loops through the date and time stamps. It’s odd indeed.
If you would like me to take a look, just send me your template.
Hi Paul,
Thank you for posting the codes! I tried this on my test blog, and it does hide the static page, but unfortunately, it also hides other posts that have a different, more current date. I posted it as was shown above, and the backdated post for the static page is dated August 14, 2007, and the “newer” post is dated September September 14, 2009. I thought it might be the fact that they both have a date of 14 that was causing the problem, but when I changed the newer one to September 13, 2009, it still had this same problem. What do you think could be causing this problem? Thank you so much!
Can you send me your template and I’ll have a look?
Hi Paul,
I finally got it to work-I realized I just placed the code with the wrong tag (there were two of them in my layout). Thanks again for sharing this with us!!
Alannah
Hi Paul,
Is there any way to tweak this code for those of us with customized templates that use timestamp code instead of dateHeader? I’m missing lines 2,3,4 (since I have no date headers) and 14, 15, 16 (not sure why) of the snippet we’re supposed to look for in our templates.
You can still use the dateHeader tag in your code, even though you don’t display the date. The dateHeader is always available, but some templates may not use it to display the date.
Worked like a gem! Thanks so much!
Actually, there is one hiccup – adding the new code has resulted in date headers being applied to my non-hidden posts. Any easy fix for this?
Can you clarify “non-hidden posts”?
Non-hidden posts = The posts on my blog I don’t want to make hidden static pages; regular blog posts. I went into my blog post menu and unchecked the date header option in an attempt to get rid of it, but this ended up hiding every single post on the blog.
Did you want to remove the date header from all your posts? You can try editing the HTML for your posts and remove the tag from your template. Be sure to backup your template first.
I couldn’t find any date header tags except for this code, but changed the dates to white so they won’t show up instead.
In the meantime, however, I’ve discovered I have the same problem as Roj above – only the first post of the day shows up, nothing afterwards. I’ve doublechecked my code for the same date error, i.e. putting the wrong date or the wrong format, but it’s all correct. Any advice?
Clarification: the posts made on my phantom date have disappeared like promised; the problem I’m having is the additional disappearance of all posts after the first post on a non-phantom date.
Any suggestions for solving this problem? I don’t have much expertise in HTML, so I’m at a loss. :/ I would really like to post multiple times in a day – and have all the posts show up.
thanks a lot for sharing it with us… you are gem of a person..i am impressed and have subscribed to your site
that’s the first one of your hacks i can’t get working
i tried several times, but strangely enough the main change was, that the displayed date on my blog seems to loose it’s style information (switched to default).
several other phenomenons occurred, which i can’t report *dizzy*
When you copy the code, ensure you use the same style (h2 or p) and CSS class that was in your original code. The styling of my code may not match yours.
i just detected my initial code is a little different from yours:
http://pastebin.com/f524700f5
is there a solution for me, anyhow?
I made the change on the link. Make sure you backup your template before copying any new changes to your template.