How To Filter Posts past times Label on the Home Page (Create a Side-Blog)

Some of my favorite (non-Blogger) blogs display a “sideblog” inward their layout inward which to display tidings snippets as well as links to interesting sites. These sideblog entries (often called “asides” or “link blogs”) are much shorter than a regular weblog post, as well as do non look inward the regular posts section.

While it would travel uncomplicated to do a sideblog using a links listing widget, Twitter, or past times adding a Del.icio.us RSS feed to the sidebar, such methods would non allow readers to exit comments on our blogs most these entries. To allow commentary for sideblog entries, they require to travel regular weblog posts inward a category whose posts are filtered from the front end page.

In this post, I’ll explicate how yous tin filter posts of a item label from existence displayed on your blog’s homepage as well as so exercise this label’s feed to display your sideblog.

Step 1: Back-up your template!

Before making whatever changes to your Blogger template, it is ever expert do to brand a back-up of your existing template. It is specially of import for this Blogger hack: nosotros volition travel filtering which posts display on the homepage, as well as whatever errors could termination inward no posts existence displayed at all!

To dorsum upwards your Blogger template, larn to Layout>Edit HTML inward your Blogger dashboard, as well as click the “Download total template” link close the summit of the page.

You volition as well as so travel prompted to salve your template equally a file to your estimator difficult drive which yous could exercise to restore your template (if yous brand a mistake) or revert dorsum if yous alter your heed most using this hack.

Step 2: Editing the posts loop

First, larn to Layout>Edit HTML inward your Blogger dashboard, as well as ensure yous cause got checked the “Expand widget templates” box.

The code which nosotros require to edit is located inside the “Blog Posts” widget.

Finding the right department of your template to edit tin travel a niggling tricky, equally at that spot are several elements which at start glance look to utilize similar code. Here is the department which nosotros require to edit:

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

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

    <data:adStart/>
    <b:loop values='data:posts' var='post'>

      <b:if cond='data:post.dateHeader'>
        <h4 class='date-header'><data:post.dateHeader/></h4>
      </b:if>
      <b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
<b:include data='post' name='comment-form'/>
 <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + "_backlinks-container"'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>

In your ain template, this code may non incorporate the <data:adStart/> as well as <data:adEnd/> tags, though this should non deport upon the overall functionality of this customization.

If yous combat to locate this department of code, exercise your browser’s search role to locate the next phrase: hfeed which should travel introduce no affair which template yous are using.

When yous cause got located this department of code (or similar), supercede it with the next instead:

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

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

    <data:adStart/>
  <b:loop values='data:posts' var='post'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.isLast == "true"'>
        <b:if cond='data:label.name != "Sideblog"'>
      <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>
      </b:if>
      </b:loop>
    </b:if>
</b:if>
  </b:loop>
    <data:adEnd/>
  </div>

Be certain to highlight all of the code as well as supercede with the department higher upwards inward its’ entirety! Otherwise, when yous endeavor to preview or salve this code, yous volition have errors proverb that tags are non unopen properly.

In the code above, yous volition uncovering I cause got highlighted “Sideblog” inward bold red. This is the refer of the label which nosotros volition travel filtering from the display of posts on the domicile page. You tin alter this to whatever label refer yous prefer. This is instance sensitive, so travel certain to exercise the same instance inward the code equally the label yous volition exercise to tag your posts (ie: “Sideblog” is non the same equally “sideblog”).

Once yous cause got edited this department of code, endeavor to preview your template. If whatever of your recent posts cause got already been tagged with the “Sideblog” label, yous volition instantly uncovering they are missing from the output of posts.

Provided at that spot are no errors visible when yous preview your template, yous tin instantly salve your edited template.

Step 3: Adding a feed widget to display your sideblog

Now nosotros cause got filtered “Sideblog” posts from the listing of recent posts on the domicile page, nosotros require to add together a widget to display sideblog posts inward the sidebar.

To hit this, nosotros volition exercise the sideblog label feed.

All Blogger blogs which exercise labels create a feed of posts from each label. The URL for label feeds appears similar this:

http://yourblog.blogspot.com/feeds/posts/default/-/LabelName

Where “LabelName” is the refer of the item label yous wishing to use.

This URL construction too industrial plant for custom domains. Simply supercede “yourblog.blogspot.com” with the chief URL for your blog.

In this example, nosotros volition exercise “Sideblog” for the refer of the label inward the feed, which would hold back similar this:

http://yourblog.blogspot.com/feeds/posts/default/-/Sideblog

Using Feedburner to display sideblog posts

The simplest agency to display your sideblog is to terminate your label feed through Feedburner, as well as exercise the BuzzBoost widget code inside an HTML/JavaScript widget.

To do this, larn to Feedburner.com as well as add together the URL of your label feed. Then larn to Publicize>BuzzBoost inward the dashboard for this novel feed.

The code required to display your sideblog posts equally HTML volition travel generated for yous automatically which yous tin glue inward an HTML/JavaScript widget inward the Page Elements department of your blog. Alternatively, yous could add together this equally a widget automatically using the widget installer option.

Using a regular Feed widget to display your sideblog

If yous prefer non to exercise Feedburner, it is possible to display your sideblog using a regular feed widget. However, this volition require to a greater extent than editing of your blog’s HTML code (as Feed widgets volition alone display the ship service titles past times default).

Here is how to exercise a Feed widget to display ship service summaries for a sideblog inward Blogger:

  1. Go to Layout>edit HTML inward your weblog dashboard. Do non banking concern check the “Expand widget templates” box.
  2. Find the next occupation of code (or similar) inward your template:

    <b:section class=’sidebar’ id=’sidebar’>

    Depending on your template, the code may non look using the exact same phrases. If yous are at all confused, search for a familiar widget championship instead. 

  3. Immediately afterward this occupation of code, glue the next inward it’s entirety:

    <b:widget id='Feed99' locked='false' title='' type='Feed'>
    <b:includable id=’main’>
    <h2><data:title/></h2>
    <div class=’widget-content’>
    <b:loop values=’data:feedData.items’ var=’i’>
    <h3><span class=’item-title’>
    <a expr:href=’data:i.alternate.href’>
    <data:i.title/>
    </a>
    </span></h3>
    <div><data:i.summary/></div>
    <b:if cond=’data:showItemDate’>
    <b:if cond=’data:i.str_published != &quot;&quot;’>
    <span class=’item-date’>
    <p><data:i.str_published/></p>
    </span>
    </b:if>
    </b:if>
    <b:if cond=’data:showItemAuthor’>
    <b:if cond=’data:i.author != &quot;&quot;’>
    <span class=’item-author’>
    <p><data:i.author/></p>
    </span>
    </b:if>
    </b:if>
    </b:loop>
    <b:include name=’quickedit’/>
    </div>
    </b:includable>
    </b:widget>

  4. Now preview your template. If yous cause got followed the steps correctly, yous volition have no errors when yous preview your template as well as should continue to save. If yous do have errors, click the “Clear edits” clit as well as start again, existence careful to glue the code afterward the <b:section> line.
  5. Once yous cause got saved, larn to Layout>Page Elements inward your Blogger dashboard. Click on the edit link for the novel feed widget yous cause got added.
  6. In the “Feed URL” section, add together the URL for your “Sideblog” label feed (see instructions higher upwards to locate this URL). In the preview, yous volition encounter each item championship look inward a bulleted list. This is fine as well as perfectly normal. Save the feed widget here.
  7. Now when yous cause got a hold back at your blog, yous volition encounter your “Sideblog” feed displays ship service titles as well as a curt summary of each sideblog entry inward the sidebar.

Once yous cause got added your widget as well as configured the feed URL, yous should travel able to motion the place of your sideblog through the “Page Elements” department of your dashboard.

Here is an illustration of how your novel sideblog could appear:

Using your novel sideblog

In club to exercise your newly added sideblog effectively, at that spot are a twain of things which yous ought to travel aware of. I’ll explicate all of these “caveats” to ensure yous tin brand exercise your sideblog to the total potential.

Sideblog entries should alone travel labeled with the “Sideblog” label!

When writing a sideblog post, travel certain yous alone add together the “Sideblog” label (or the refer yous chose when adding this role to your template). This label volition travel instance sensitive, so “sideblog” as well as “Sideblog” volition look equally 2 dissimilar labels.

If yous do add together to a greater extent than than ane label to your sideblog posts, these posts volition too look inward the chief posts column, with your regular weblog posts.

Sideblog images should travel sized to check their container

This ane may travel a niggling to a greater extent than tricky.

You tin exercise images inward your sideblog posts. However, yous should ensure they are no wider than your sidebar (or the widget surface area they are contained in).

For example, if your ikon is 400px wide, existence displayed inward a sideblog whose width is alone 200px, yous volition uncovering ane of 2 things:

  • The right-hand border volition travel truncated (in Firefox as well as other browsers)
  • The sidebar is pushed beneath the posts column (in IE)

Wherever possible, ensure yous exercise the “small” size choice for your ikon when uploading. Try too to ensure your ikon is centered higher upwards the text, equally left or right aligned images may campaign layout problems, specially when displayed inward the sidebar/other narrow widget area.

Images detract from the length of the summary

When yous display an ikon inward your sideblog posts, the HTML code for the ikon is counted towards the text count of the summary, therefore shortening the amount of text which volition travel displayed. If yous prefer to display to a greater extent than text, travel certain to identify images at the bottom of your posts so these volition alone travel displayed on item pages (not inward your sidebar).

Using this filtering role for other template features

In this tutorial, I cause got explained ane possible exercise for the filtering of posts past times label: how to do a sideblog.

Those of yous who actively blueprint or prepare Blogger templates may already encounter the possibilities of using this role for possibilities like:

  • A “Featured posts” section
  • A journal agency layout, where recent posts are organized past times category on the domicile page
  • Only ane category of ship service to travel displayed on the domicile page (the residual organized past times label as well as accessible through sidebar links).

From my ain experiences, I assure yous that all of these uses are possible inward Blogger templates (though their respective tutorials would each travel equally long equally this one!). So if yous are confident inward customizing your Blogger template code, I urge yous to experiment with this tutorial to do a layout agency appropriate for your needs 🙂

I promise yous cause got enjoyed reading most filtering posts past times label inward this tutorial, as well as instantly cause got the cognition required to add together asides inward your ain Blogger template. Please allow me know your thoughts as well as opinions past times leaving a comment below.