Layout Examples Of How Blogs List Their Posts

By Web Design | 5 comments | Web Development | Tags: Blog Archive Design Inspiration, Blog Layout Inspiration, Blog Post Archive Design, Custom Designed Blog Layouts, How To List Blog Posts, Layout Examples Of How Blogs List Their Posts, Listing Blog Posts, Showcase Of Blog Layouts

Tweet

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 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.

* * * * *

Hong Kiat

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

* * * * *

Noupe

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.

* * * * *

PSD Tuts

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

* * * * *

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.

* * * * *

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.

* * * * *

CSS Tricks

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

* * * * *

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.

* * * * *

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.

* * * * *

Snook.ca

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

* * * * *

UxBooth

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!

* * * * *

SimpleBits

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

* * * * *

Bartel Me Design

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