Listverse like Number Listing design for Blogger and Websites

Listverse, one of the most interesting site with collection of top 10 list on different topic. If you are also a regular reader of Listverse like me then you may know about it's list numbering design, it is what led me to create this tutorial.
If you want Listverse like template for your blog then check this post, we recently published the template details http://stramaxon.blogspot.com/2012/07/listverse-template-blogger-seo-friendly.html

For a direct demonstration of what you will be learning to create in this tutorial can be seen on the listverse.com itself. Below is the demo by me on a blogger blog.

Demo

The first time i saw it, i felt that it was made with HTML tables but then i inspected it and found that it was with simple HTML div elements and CSS was used to give it a grid view.

You can implement this into any website if you can edit it in HTML. Follow the steps below to scornfully add it into your blog post or website.

The HTML we need

The trick is simple, first we will use the HTML which is very important and then simply we will apply the CSS onto it but we will talk more about CSS in next section, see the structure of this HTML to know more about it. (Copy this HTML)

<div class="itemheading"><span class="itemnumber">10</span>
<div class="itemtitle">This is an Item</div>
<div class="itemmore">Description</div>
<div class="cl"></div>
</div>

Now before we implement the codes, read what each HTML line means

Line 1 : The first div element is parent of all div elements in it. As for the span element , it's what displays as the number on the list and you can edit it to your needs, for example change the 10 to 9,8 etc. or even letters.
Line 2 : This div element is for the title of the list item, you can change the text in it
Line 3 : This is for the description of the list item. It's optional you can also keep it's value empty.
Line 4 : Just clear:both for clean look

Guidelines to add into Blogger Post

To add this HTML into your Blogger post, then read the steps below

First open the post in Post Editor
Now switch to HTML mode, you can switch to HTML mode by clicking the button next to 'Compose' in the post editor which says HTML. When you are in the HTML view of your Post Editor , now place your cursor at where you want the numbering to be and then copy-paste the HTML shown above .

That's it, now you can continue writing your post. But there are some things you must remember

Never style the text into the HTML with the customization option in Blogger Post Editor
Delete any BR tag into the numbering HTML or it will look cluttered (The br issue is already solved with the CSS, but you may make it a habbit)
Put text out of the closing div tag in the HTML
For every numbering item you have to put this HTML separately.

If you keep these things in mind, you will successfully finish the first step of adding this list design.

CSS styling

The HTML bone structure is ready but we still have to make it look like the numbering items on Listverse, to do that, a few lines of CSS is needed. Below is the CSS needed to design the numbering items like Listverse.

/* LISTVERSE ITEM LIST DESIGN CSS BY DEEPAK KAMAT */
/* Chunk Font */
@font-face {
  font-family: 'ChunkFiveRegular';
  font-style: normal;
  font-weight: 700;
  src: url(http://s0.wp.com/wp-content/themes/vip/listverse2/extras/Chunkfive-webfont.woff) format('woff');
}
.itemheading {
border-top: 1px solid #C5DDD8;
margin-bottom: 20px;
margin-top: 31px;
}
.itemheading .itemnumber {
border-right: 1px solid #C5DDD8;
border-top: 1px solid #C5DDD8;
color: #2C2C2A;
float: left;
font-family: 'ChunkFiveRegular',Arial,serif;
font-size: 37px;
font-weight: bold;
line-height: 37px;
margin-right: 10px;
margin-top: 3px;
min-width: 45px;
overflow: hidden;
padding: 17px 10px 10px 0px;
text-align: center;
}
.itemheading .itemtitle, p .exclusions {
border-top: 1px solid #C5DDD8;
color: #2C2C2A;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 24px;
line-height: 24px;
margin-top: 3px;
padding: 17px 12px 0 31px;
}
.itemheading .itemmore {
font-size: 16px;
line-height: 16px;
color: #6D6D6A;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
.itemheading br {display:none;}
.cl {
clear: both;
height: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
}

Yaa, this is the few lines of CSS which you need. Learn, how to implement it into your blogger blog.

Adding CSS in Blogger

On Blogger platform, adding the CSS is very simple. Just follow the steps below to quickly add the CSS into your blogger template. (Click here for tutorial)

Go to Blogger Dashboard
Now select the Template tab
Click on the Customize button in the Template tab
You will be taken to the Template Designer, select the Advanced tab
From the Advance menu you will see Add CSS
Click on the Add CSS and paste the CSS in the custom CSS box and hit Apply.

That's it ! You are done with adding the numbering list design on your blog. Thanks to listverse.con for being an inspiration for this design.

Your suggestions

Thanks for reading this. If you have any suggestion or just want to say thanks to us then drop your comments below. Your comments are very important for us to improve our post and tutorials. Check more blogger tutorials on our blog.

Buy the ListVerse like Blogger Template for Blogger

We have published the details of the template here to buy it [Click here]. You can see it in action at this link. We will soon write about the template on our blog but if you want to buy it now, see below

The Template is premium and you have buy it. The template is only for $30. For information contact us on
depy45631@gmail.com