Card based blog design – how to divide each post into a separate box on Blogger

Card-based layouts are becoming increasingly popular across the web, with many popular sites like Pinterest, Dribble and Google+ adapting the style. They are usually presented in a grid or list, showing a summary of information that is easy to scan. This makes them perfect for displaying blog posts. This post will explain the basic method of creating a card-based design and show you how to divide your blog posts on Blogger into separate “boxes”.

The Card Based Blog Layout

This is a simple design to achieve once you know the structure of your blog post area. Instead of adding the CSS to the blog post container, which is the div wrapping around all posts, we’re going to add to the post container directly. This is the div that is wrapping around each individual blog post.

how to divide each post into a separate box on Blogger using CSS

For this tutorial I’m going to start with the Simple Template on Blogger, since it’s been requested. You can use this method to apply the card design to any layout on any platform by figuring out what selector (the class or ID used in the HTML) to use and applying the CSS.

First we’ll want to change the body background colour, I’m using grey. We’ll also want to remove the background from the main content area or blog post area so the posts look separated.

If we use the browser’s developer tools, we can check the HTML to see how the Blogger template has been coded. We could also do this by checking the template code in Template > Edit HTML > Jump to widget > Blog1 and searching for the post divs.

Within the blog widget, we can see that each post is wrapped with a div that has a class date-outer. This is what we’ll need to use to divide up the posts. You’ll need to check your template to figure out what the post container is.

Since it’s a class, we use a period character (.class) in the CSS. If it was an ID we’d use a hash character (#id). We’ll open and close our curly brackets, then add our styling in between.

.date-outer { 
/* Styling Goes Here */
}

First we’re going to add a background colour, this should be a contrasting colour to your body background. In my case I’m using the hex value for white.

Then we’ll add padding (shown in green in the image below) to add some space between the background and text. Finally we’ll add a margin to the bottom (shown in orange in the image below) to separate each “box” we’ve created.

.date-outer { 
background: #ffffff;
padding: 20px;
margin-bottom: 20px;
}

You’ll want to add this to your CSS area. On Blogger, this would be before ]]></b:skin> in your template (Template > Edit HTML). If you’re having trouble with this, check out this post on finding and adding styling to your CSS on Blogger.

You can also apply this method to widgets in the sidebar using .sidebar .widget as your selector or anywhere else throughout your blog design.