50 How to display Blogger posts side by side (create a newspaper style layout!) November 21, 2008 /

In recent weeks, one of the most requested tutorials has been how to display posts side-by-side. An example of how this is used is the classic (and much loved) Hemingway template, in which posts are displayed beside each other:

The Hemingway template does not include a sidebar in the layout. Instead, widgets are contained in the footer section (beneath the posts) which effectively puts most focus on the blog posts and less on the widget contents.

You can download the Hemingway template for Blogger from BlogCrowds in both the black and white variations of design.

Many bloggers prefer a three column template in which two of the columns are dedicated to blog posts (and with only one sidebar). An example of this layout can be seen in the popular Drudge Report blog:

In this tutorial, I'll explain how you can create a three column Blogger template in which two columns are dedicated to posts, while the third may be used as a regular sidebar. On item pages, the post will take up the full width of two columns to ensure there is no unsightly gap between this and the sidebar.


We're going to base this tutorial on the Minima template, though the same principles can be applied to most Blogger templates. Here is an example of what we will achieve:

Overview (Read this first!)

In this tutorial, I'll explain how to transform the default Minima template so that posts appear in (narrower) columns, side-by side on home, archive and search pages, with a sidebar of the same width appearing on the right hand side of the posts.

To transform the basic Minima template into a three column, newspaper style layout is fairly straightforward and includes two basic steps:

1. Increase the width of the overall template to accomodate the extra column
2. Add some conditional CSS to make the posts appear beside each other on non-item pages

However, once we have done these two steps, there will be a few other code and CSS issues which we need to resolve in order that the template will appear as it should. I will take you through all steps nescessary to ensure the layout appears as it should, with explanations and visual examples at each stage.

An issue which you should consider when using this tutorial is that the width of each posts column (on non-item pages) will be decreased to 290px. This means you should ensure images in posts are no wider than 290px (including any padding or borders) otherwise the posts columns will be pushed beneath each other, rather than be displayed side-by-side.

If you usually display large images and wish to do so on item pages, we can add some extra CSS to the template to restrict the width of images on non-item pages, as I will explain later in this tutorial.

Most of the techniques described in this tutorial may also be applied to different templates. If you would like to transform your own (non-Minima) template in this manner, my advice would be to follow each step of this tutorial in a test blog first, then see how this could apply to the different CSS classes and identifiers in your own template. It's much better to have some experience of this technique beforehand than to jump in feet first!

Step 1: Create a test blog

While it is not essential to create a test blog to make changes to your blog layout, I'm sure many of you will find this useful! This way you can make changes without affecting your main blog, and if you happen to make a mistake you can start all over again ;)

I have written a comprehensive tutorial about creating a test blog which you can read here. If you'd like to jump straight in, here are the basic steps covered in the test blog tutorial:

1. Create a new blog (choose the Minima template for the purpose of this tutorial)
2. Fill it with some posts (at least 2, though more would be preferable)
3. Make it private, and prevent your blog being indexed by search engines

If you're looking for a quick and easy way to add "dummy content" to your blog, check out LoremIpsumDolarSitAmet.com which generated paragraphs of dummy text automatically (including my favorite filler text: Jabberwocky!).

Once you have created your test blog, we can begin changing aspects of the layout.

Step 2: Alter the dimensions of the layout

Now I am assuming you are using the Minima template (it doesn't matter which color), and that the sidebar is on the right-hand side of your layout.

At the moment, the layout is too narrow to accomodate a third column. So we need to alter the dimensions of the layout in order to create more space.

Increase the width of the #outer-wrapper

The #outer-wrapper is the container which holds all of the content in this template, including the header, main posts section and sidebar.

At present, your outer-wrapper will be 660px wide. We will increase this to 940px which will allow us to have three columns of 290px, 290px (the posts) and 300px (for the sidebar), plus margins between to allow for eye-pleasing white-space.

To achieve this, find the following section in the b:skin section of your layout:

#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

Change the 660px (highlighted in red) to say 940px instead.

Increase the width of the #main-wrapper

The #main-wrapper is the section which contains your blog posts, blog pager (newer/older posts) and any messages which appear when you perform a search or filter posts by label.

We need to increase this from 410px to 620px, which will allow enough room for posts to display side-by-side in two narrower columns.

To do this, find the following section of code:

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

And replace 410px with 620px instead.

Make the sidebar wider

Personally, I find a three column newspaper style template to be more pleasing when all three columns are approximately the same width. So we will increase the width of the sidebar from 220px to 300px, which will equal the width of the post columns and their white-space.

So find the following section of code:

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

And replace 220px with 300px instead.

Fix the header and footer widths


If you take a look at your template now, you will notice that the header and footer sections are narrower than the overall width of the blog.

This is because the Minima template uses specific widths for the #header-wrapper and #footer sections of the layout.

To widen these two sections (which complements the new wider design) we need to remove the width statements in the b:skin section of the template. This will then allow the header and footer to stretch to the width of the outer-wrapper and appear harmonious to the design.

Firstly, find the following section in your blog template:

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

And remove the line highlighted in red.

Then locate this section of code:

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

And again, delete the line in red.

Now preview your template: you should notice that the header and footer sections now stretch to the overall width of the blog.

The blog description may look a little lop-sided with this new setting, like this:

To align the description centrally beneath the blog title, simply find this section of code:

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }

Then delete the line in red. Since the description uses margins and padding, we can do away with the "max-width" property, which ensures this section is properly aligned to the heading above it.

Ensure the #blog-pager spans the width of the main posts section

When displaying posts side-by-side, it is ideal to have an even number of posts displayed. However, it is not always possible to do so. For example, on archive pages there may be an uneven number of posts for any given time period, or a blog search could produce 3, 5 or another uneven number of results.

For this reason, we must ensure the blog pager (which displays links to the home page, newer and older posts) has a fixed width. Otherwise it may appear at the top right of the posts, which is not harmonious to the design.

To apply a fixed width to the blog-pager, locate the following line of code in your template:

#blog-pager { 

And immediately after it, add the lines in red:

#blog-pager {
  width: 600px;
  clear: both;
  text-align: center;
 }

This will ensure the pager always spans the width of both post columns on non-item pages.

Save your modifications!

At this point, we have made some heavy modifications to the Minima template. So if you have not already done so, save your template now.

Step 3: Ensure the "date-header" appears in the right place!

In the Minima template, the section of code which produces the "date heading" for each post is outside the main "includable" for the blog posts. Since we are making two columns of posts appear on the home page of this template, we need to alter the placement of the date-header code, otherwise the date-headings will appear out of place!

This step is probably the most complicated of the whole tutorial, so take your time and do this carefully :)

For this, we will need to delve into the widget template for the posts section. You need to ensure you have checked the "Expand widget templates" box on the Edit HTML page:

Now search for the following section of code:

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

<b:if cond='data:post.dateHeader'>

<h2 class='date-header'><data:post.dateHeader/></h2>

</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:loop>
<data:adEnd/>

This section brings together all elements of your blog posts to display in your active blog pages. The lines I have highlighted in red generate the date-heading for each post. These are the lines which need to be moved to a different place in the template code.

Highlight these three lines in your template, and key CTRL+X (or CMD+X) to temporarily "cut" them from the template. These will be copied to your clipboard so you can paste them in the new location.

Once you have "cut" these three lines, locate this line of code in your template:

<a expr:name='data:post.id'/>

And paste the three "cut" lines immediately after it.

Now preview your blog to ensure the date-headings are visible above each post. If all looks well, you can proceed to save your template.

Step 4: Add conditional CSS to make posts appear side-by-side on non-item pages

We have modified many aspects of our Minima template in preparation for the new posts column on non-item pages. Now we can add some conditional CSS which will make posts appear side-by-side!

This is actually quite easy! All you need to do is copy the following section of code to your clipboard:

<b:if cond="data:blog.pageType != "item"">
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}
</style>
</b:if>

And paste this immediately after the closing </b:skin> tag in your template code. You can then preview your template, and will be able to see the results right away!

Save your template at this point, and view your demonstration blog in your browser. Have a play around with the pages, viewing archives, performing searches and the like. You will see that on non-item pages, the posts appear in narrow columns side-by-side, whereas on item pages, the post will span the width of both columns!

Taking care of images in your newspaper-style template

Your new post columns are slightly narrower than the width for "large" images which you may upload to your posts. This means that large sized images will be "cut off" when displayed on non-item pages.

There are two ways you can work around this:

1. Only ever post small/medium sized images to your posts
2. Specify the width of post images on non-item pages.

If you choose the second option, you will need to add a little more CSS to the conditional style we added, just after the closing tag, like this:

<b:if cond='data:blog.pageType != "item"'>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}.post-body img {width: 280px;}
</style>
</b:if>

This would reduce the width of large images to only 280px on non-item pages, whereas on individual posts, the images will display at full width.

However, any images which would usually be smaller than 280px in width would be stretched to this width.

You could of course choose for images to be even narrower (eg: 100px or 150px) if you plan on serving smaller sized images as well as large ones. Simply change width: 280px to your chosen specification.

Summary

If you would like to apply this technique to a different template, or would simply prefer a summarized version of this template, here is a quick summary of the steps required to make posts appear side-by-side in a Blogger layout:

1. Prepare your existing template
   
   • Widen the outer-wrapper
   • Widen the main posts column
   • Ensure the header and footer sections are widened accordingly
   • Don't forget to adjust the width of the blog-pager section!
   
   
2. Ensure the date-header code snippet is above the code for the post title, and not seperately coded within the posts loop
3. Add conditional CSS outside the <b:skin> section of your template, which ensures the posts appear side-by-side only on non-item pages. You may need to experiment with different widths and margins to find the ideal dimensions for your own layout.
   
4. Be aware of how images may appear in your new layout and make changes accordingly

I hope this tutorial has explained how to create a newspaper style template in Blogger in which posts appear side-by-side. The methods used here have been tried and tested for modifying the Minima template, though for other Blogger templates you may need to make more adjustments and possibly change background images to accomodate the new dimensions of your three-column layout.

If you have any useful tips to accompany this tutorial, or would simply like to leave a comment, please feel free to leave your message below.