Hide Certain Posts from Blogger Homepage

It took me forever to come up with this one. But judging from the length of the code I've posted here, you should be able to tell how hard it was to come up with this one. First thing first - I will be seriously pissed if you try to copy this post, I mean it.

Now, back to the actual post. It has been a popular question/request from many bloggers - how to hide some posts from appearing on Blogger homepage? And now, with the help of labelled filters, you can actually do so. In other words, by labelling your posts 'hide', you can actually hide your post from ever seeing the light of your home page. And -- you can still view the post if you click on your archive or that 'Older post' or 'Newer post' link, or by accessing the post page directly via its URL, among other ways.

Note: I've also included my other famous tweak - 'show date for each post' - in this tutorial. It was necessary. For those of you who have inserted the code to show date for each post from my previous tutorials (link here and here) and want to try this week's tutorial, kindly reverse the steps and remove the old tweak before attempting this week's tutorial.

Update: The tweak has been updated. You can now assign more than a label to the post that you wanna hide. As long as it contains the label 'hide', your post will be hidden!

Step 1:

Backup your template before attempting this tutorial. Next, find for your template's HTML.

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.
In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Next, find and delete the following lines:

<!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
          &lt;/div&gt;&lt;/div&gt;
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
          <b:include data='post' name='post'/>
          <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
        </div>

        <!-- Ad -->
        <b:if cond='data:post.includeAd'>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </div>

Step 2:

Copy and paste the following lines in place of the deleted lines in Step 1 - then click on 'Save Template':

<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
 <data:defaultAdStart/>
 <b:loop values='data:posts' var='post'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>var ssyby=&#39;<data:post.dateHeader/>&#39;;</script>
<div class='ssyby-date-outer2'>
<b:if cond='data:post.labels'>
<b:if cond='data:blog.url != &quot;http://yoboy-12.blogspot.com/search/label/hide&quot;'>
  <div class='date-outer'>
   <h2 class='date-header'><span><script type='text/javascript'>document.write(ssyby);</script></span></h2>
   <div class='date-posts'>
    <div class='post-outer'>
     <b:include data='post' name='post'/>
       <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
     <b:if cond='data:post.isFirstPost'>
     <data:defaultAdEnd/>
     <b:else/>
     <data:adEnd/>
     </b:if>
      <div class='inline-ad'>
       <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
   </div>
<b:loop values='data:post.labels' var='label'>
<script type='text/javascript'>
var dhar = &#39;<data:label.name/>&#39;;
if(dhar == "hide" || dhar == "label2"){
document.write(&quot;<div class='hide-climb'/>&quot;);
flag=flag*0;}
</script>
</b:loop>
  </div>
<b:else/>
 <div class='date-outer'>
   <h2 class='date-header'><span><script type='text/javascript'>document.write(ssyby);</script></span></h2>
   <div class='date-posts'>
    <div class='post-outer'>
     <b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
     <b:if cond='data:post.isFirstPost'>
     <data:defaultAdEnd/>
     <b:else/>
     <data:adEnd/>
     </b:if>
      <div class='inline-ad'>
       <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
   </div>
  </div>
</b:if>
<b:else/>
  <div class='date-outer'>
<script type='text/javascript'>var ssyby=&#39;<data:post.dateHeader/>&#39;;</script>
   <h2 class='date-header'><span><script type='text/javascript'>document.write(ssyby);</script></span></h2>
   <div class='date-posts'>
    <div class='post-outer'>
     <b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
     <b:if cond='data:post.isFirstPost'>
     <data:defaultAdEnd/>
     <b:else/>
     <data:adEnd/>
     </b:if>
      <div class='inline-ad'>
       <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
   </div>
  </div>
</b:if>
</div>
<b:else/>
  <div class='date-outer'>
<script type='text/javascript'>var ssyby=&#39;<data:post.dateHeader/>&#39;;</script>
   <h2 class='date-header'><span><script type='text/javascript'>document.write(ssyby);</script></span></h2>
   <div class='date-posts'>
    <div class='post-outer'>
     <b:include data='post' name='post'/>
       <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
     <b:if cond='data:post.isFirstPost'>
     <data:defaultAdEnd/>
     <b:else/>
     <data:adEnd/>
     </b:if>
      <div class='inline-ad'>
       <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
   </div>
  </div>
</b:if>
 </b:loop>
 <data:adEnd/>
</div>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(&#39;.hide-climb&#39;).closest(&#39;.ssyby-date-outer2&#39;).css(&#39;display&#39;, &#39;none&#39;);
</script>

The code in place (starting portion)

The code in place (ending portion)

Step 3:

Go to Dashboard - Settings - Posts and Comments - Show at Most - And set to 50.

Step 4:

You're already done! To hide a post from your main page, just label it 'hide'. And you can add other labels to your post if you want.

You can customize the label from 'hide' to a text of your own by changing line 38 in the code above. Enjoy folks!

Extra #1) Show All Hidden Posts in a Single Label Page

You might want to hide some of the posts from your home page, but show the posts when you click on the 'hide' label page, or whatever label name you choose for this purpose. To enable this, all you have to do is change the URL in line 10 in the code given in Step 2. You need to replace the URL above with the URL of your hiding-label page. You can find out the link to your hiding-label page by clicking on the hiding-label from your label's gadget. For example, if you decide to use the 'hide' label as your hiding-label (boy this sounds confusing, but it is not!), simply click on 'hide' from your 'Label' gadget and you shall get the address of your hiding-label page.

This will be useful if you intend to make use of the label page's URL to categorize your post. Let me just give you an example. At the top of this blog, in my menu, I have a link to my 'Transformers' posts. All the posts that have the 'Transformers' label are grouped there. Each time I use this label, the post will appear in that link, as well as my homepage. If I want these posts to just appear in the link in my tab, and not my homepage, all I have to do is change the label address in line 10 to point to my 'Transformers' label address.

Important Note: You can't use a country specific URL in Line 10. In other words, the URL in Line 10 has to be either 'blogspot.com' or your custom domain URL. For example, if your label's URL is as such:

http://yoboy-12.blogspot.co.uk/search/label/hide

You need to get rid of the country-specific code next to 'blogspot.' and leave the URL in its original .com state, as such:

http://yoboy-12.blogspot.com/search/label/hide

Extra #2) Show All Hidden Posts in Multiple Label Pages

If you assign more than one label to your hidden posts, say 'Hide', 'Transformers' and etc, and you want your posts to be shown in all these label pages, all you need to do is replace Line 10 with the following:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

This will make your posts to be hidden only on your homepage and show them in all other pages.

Extra #3) Margin Fix:

1) If something seems off with the way your posts are arranged in your homepage, fear not. Simply add the CSS code below and things will be fine again.

In default layout: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

In new layout: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.ssyby-date-outer2 .date-outer {
position: relative;
margin-bottom: 65px;
}

.ssyby-date-outer2:last-child {
margin-bottom: -45px !important;
}

Change the value '65px' accordingly.

2) If you notice a weird margin issue in Internet Explorer alone, try the following fix instead.

*+html body .main-inner .column-center-inner {
margin-top: 0px !important;
}

Took me forever to come up with this one. Simply the hardest tweak I've come up with. Hope you guys find it useful. Cheers.