Amazing List Style with Counter Pure CSS

By default lists have no style but you can customize them according to your requirements. In this article we will see how we can customize ordered list style with counter. So we will do it in blogger you can also use this code in wordpress site it will also works there.

So you can see the demo of this list styles in the thumbnail of this article it look very beautiful you can change the colors according to you requirements.

So bow lets add this in blogger website it's so simple you can easily do that so lets do it together. At first i was thinking to implement this style in my blogger blogger but it was creating some issues so that's why i haven't used it.

Steps to follow:

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. Now Search for </head>

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

5. Just before the ending header tag you have to paste the code which is provided below you can copy it by clicking on it.

<style>
ol {
  counter-reset: li;
  list-style: none;
  *list-style: decimal;
  font: 15px "trebuchet MS", "lucida sans";
  padding: 0;
  margin-bottom: 4em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  margin-left: -5px;
  margin-top: 0px;
  margin-bottom: 0px;
}

ol {
  margin: 0 0 0 2em;
}

/* -------------------------------------- */

ol li {
  position: relative;
  display: block;
  padding: 0.4em 0.4em 0.4em 2em;
  *padding: 0.4em;
  margin: 0.5em 0;
  background: #ddd;
  color: #444;
  text-decoration: none;
  -moz-border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  border-radius: 0.3em;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

ol ali:hover {
  background: #eee;
}

ol li:hover:before {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

ol li:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: -1.3em;
  top: 50%;
  margin-top: -1.3em;
  background: #fdd761;
  height: 2em;
  width: 2em;
  line-height: 2em;
  border: 0.3em solid #fff;
  text-align: center;
  font-weight: bold;
  -moz-border-radius: 2em;
  -webkit-border-radius: 2em;
  border-radius: 2em;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

/* -------------------------------------- */

</style>

6. Save Theme/Template

That's it you have just done that you don't need to add any class or any id to add in that lists. Whenever you create a list in your blogger blog your list will be transformed to this style you can go and check that simple create a new post and create table in it then publish your post and view it.