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.

Card HTML Structure - How to achieve card based blog design on Blogger - divide each post into separate box

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.

How to change blogger simple template into box card design

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.

How to separate blog posts on blogger into different boxes - card design

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;
}

How to separate blog posts on blogger using CSS

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.

Post last updated:

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

  1. Hey there, just wondering if you can you apply this technique to different pages on blogger? I like my homepage the way it is but I think this card display/ grid style would suit my individual pages better.

    1. Hi Janeese. Yes, you can use conditional tags to only apply this to certain pages.

  2. Becca

    Hi, I was wondering if it’s possible instead a grid style if I can do a list style with the description of the pst next to it?

    Thank you.

    1. Hello, yes you could use a mix of the above and this post to achieve that.

  3. Your blog is a Blogger? If it is I’d like to know how did you make the posts into a “p” instead a “div”

    1. No, this blog isn’t on Blogger. However on Blogger you can write your posts in HTML mode and using paragraph tags.

  4. steel1

    extremely valuable site. helpful posts. thanks for the sharing.

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.