Layout Examples Of How Blogs List Their Posts


There are thousands of blogs on the internet that use their own custom design. Some good, some bad. Loads of them list their blog posts in so many ways. I have compiled a showcase of layout examples, how some big blogs list their blog posts and how that fits in with their design.

If you want to contribute yourself to this list, and have found another awesome example of how to list blog posts that you have found, then please feel free to drop in a comment and share it with us and the rest of the WebdesignDev readers. Anyway enjoy the showcase!

Smashing Magazine

Smashing magazine lay their posts out semi-full on the homepage, but on the category pages, they have a small avatar, title, small description and then the read more button and how many comments the post currently has.

Smashing Magazine Blog Layout Examples

* * * * *

Hong Kiat

Hong Kiat has his posts in a 2 column layout with a small avatar, title and description.

Hong Kiat Blog Layout Examples

* * * * *


Noupe has recently had a redesign, but they now display their posts with a very large blue title, the category its posted in, how many comments, and an image of the post. They display the post date with the design.

Noupe Blog Layout Examples

* * * * *

PSD Tuts

The tuts network of sites display their posts with a big post image, big title and a paragraph description.

PSD Tuts Blog Layout Examples

* * * * *

Fuel Your Creativity

The fuel brand of sites display posts in a column with an avatar and title. You have to click to read on.

Fuel Your Creativity Blog Layout Example

* * * * *

Woork Up

Woork (formally woork on blogger) displays their blog posts in a 3 column layout. They show the comments each post has, a title, the date, the category, and then below a big image.

Woork Up Blog Layout Example

* * * * *

CSS Tricks

CSS Tricks list their posts in a neat and tidy fashion. This fits very well with their site design.

CSS Tricks Blog Layout Example

* * * * *

Web Designer Wall

Nick La incorporated blog post listings into the design. As you can see the date each post was published on webdesignerwall is displayed floating over on the left with the background.

Web Designer Wall Blog Layout Example

* * * * *

Design Bombs

The design bombs website showcase display an image of each site, along with the name and amount of comments. If you also hover your mouse over the image, it fades in with a 5 star rating.

Design Bombs Blog Layout Example

* * * * *

This blog uses awesome fonts and colours to put together their blog layout. Blog Layout Example

* * * * *


UxBooth have a unique way of listing their blog posts. A nice big image on the right, and the title and information on the left. They use a selection of fonts and colours to make this look amazing!

UxBooth Blog Layout Example

* * * * *


SimpleBits list their posts in a nice, easy and simple way to fit in with their site design.

SimpleBits Blog Layout Example

* * * * *

Bartel Me Design

Bartel Me list their posts in the archive by title and date. Simple but effective with their design.

Bartel Me Design Blog Layout Example

Recommended for you:

6 thoughts on “Layout Examples Of How Blogs List Their Posts”

  1. Hmmm…that`s an interesting post. I think “smashing magazine” and “” are the best looking layouts. On the opposite corner is

Leave a Reply

Your email address will not be published. Required fields are marked *