Listverse similar Number Listing blueprint for Blogger as well as Websites

Listverse, 1 of the most interesting site alongside collection of run past times 10 listing on unlike topic. If you lot are equally good a regular reader of Listverse similar me in addition to thus you lot may know close it’s listing numbering design, it is what led me to practice this tutorial.
If you lot desire Listverse similar template for your weblog in addition to thus banking concern agree this post, nosotros latterly published the template details   

For a straight demonstration of what you lot volition move learning to practice inwards this tutorial tin plough over the sack move seen on the itself. Below is the demo past times me on a blogger blog.


The start fourth dimension i saw it, i felt that it was made alongside HTML tables but in addition to thus i inspected it in addition to constitute that it was alongside unproblematic HTML div elements in addition to CSS was used to plough over it a grid view.

You tin plough over the sack implement this into whatsoever website if you lot tin plough over the sack edit it inwards HTML. Follow the steps below to scornfully add together it into your weblog post or website.  

The HTML nosotros need

The fox is simple, start nosotros volition purpose the HTML which is real of import in addition to and thus only nosotros volition apply the CSS onto it but nosotros volition utter to a greater extent than close CSS inwards side past times side section, encounter the construction of this HTML to know to a greater extent than close 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 earlier nosotros implement the codes, read what each HTML business means
  • Line 1 : The start div chemical ingredient is nurture of all div elements inwards it. As for the bridge chemical ingredient , it’s what displays equally the issue on the listing in addition to you lot tin plough over the sack edit it to your needs, for event alter the 10 to 9,8 etc. or fifty-fifty letters.
  • Line ii : This div chemical ingredient is for the championship of the listing item, you lot tin plough over the sack alter the text inwards it 
  • Line three : This is for the description of the listing item. It’s optional you lot tin plough over the sack equally good hold it’s value empty.
  • Line iv : Just clear:both for construct clean look

Guidelines to add together into Blogger Post

To add together this HTML into your Blogger post, in addition to thus read the steps below

  1. First opened upwards the post inwards Post Editor
  2. Now switch to HTML mode, you lot tin plough over the sack switch to HTML fashion past times clicking the push side past times side to ‘Compose’ inwards the post editor which says HTML. When you lot are inwards the HTML sentiment of your Post Editor , immediately house your cursor at where you lot desire the numbering to move in addition to and thus copy-paste the HTML shown inwards a higher house . 

That’s it, immediately you lot tin plough over the sack proceed writing your post. But in that place are about things you lot must remember

  • Never trend the text into the HTML alongside the customization selection inwards Blogger Post Editor
  • Delete whatsoever BR tag into the numbering HTML or it volition await cluttered (The br upshot is already solved alongside the CSS, but you lot may acquire far a habbit) 
  • Put text out of the closing div tag inwards the HTML
  • For every numbering item you lot get got to pose this HTML separately.  

If you lot hold these things inwards mind, you lot will successfully complete the start pace of adding this listing design.

CSS styling

The HTML os construction is develop but nosotros even thus get got to acquire far await similar the numbering items on Listverse, to practice that, a few lines of CSS is needed. Below is the CSS needed to blueprint the numbering items similar Listverse.

/* LISTVERSE ITEM LIST DESIGN CSS BY DEEPAK KAMAT */ /* Chunk Font */ @font-face {   font-family: 'ChunkFiveRegular';   font-style: normal;   font-weight: 700;   src: url( format('woff'); } .itemheading { border-top: 1px corporation #C5DDD8; margin-bottom: 20px; margin-top: 31px; } .itemheading .itemnumber { border-right: 1px corporation #C5DDD8; border-top: 1px corporation #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 corporation #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 lot need. Learn, how to implement it into your blogger blog.

Adding CSS inwards Blogger

On Blogger platform, adding the CSS is real simple. Just follow the steps below to chop-chop add together the CSS into your blogger template. (Click hither for tutorial)
  1. Go to Blogger Dashboard 
  2. Now select the Template tab
  3. Click on the Customize push inwards the Template tab
  4. You volition move taken to the Template Designer, select the Advanced tab
  5. From the Advance carte du jour you lot volition encounter Add CSS 
  6. Click on the Add CSS in addition to glue the CSS inwards the custom CSS box in addition to striking Apply.

That’s it ! You are done alongside adding the numbering listing blueprint on your blog. Thanks to listverse.con for existence an inspiration for this design.

Your suggestions 

Thanks for reading this. If you lot get got whatsoever proposition or precisely desire to tell thank you lot to us in addition to thus driblet your comments below. Your comments are real of import for us to amend our post in addition to tutorials. Check to a greater extent than blogger tutorials on our blog.

Buy the ListVerse similar Blogger Template for Blogger

We get got published the details of the template hither to purchase it [Click here]. You tin plough over the sack encounter it inwards activity at this link. We volition shortly write close the template on our weblog but if you lot desire to purchase it now, encounter below

The Template is premium in addition to you lot get got purchase it. The template is alone for $30. For data contact us on
[email protected]