Custom List Numbering on Blog Posts By Jirale

Custom List Numbering in Blog Posts - List Number is a feature that we can use to create a list of numbers or text that are used to make a post more structured and neat. This list is usually used by bloggers who share tutorials or give tips. At this time there are many things we can do to beautify the list of numbers provided by Google, here is an example of the list of numbers provided by the blog.

Example of a blog's default numbering list:
This display is an example of list numbering.
This view is an example of a numbering list.
This view is an example of a numbered list.

So, above is an example of what bloggers use, if you are bored or want to use another variation, you can follow the tutorial below. There are 4 variations that you can use to beautify the appearance of your blog. The following are types of custom list numbering on blog posts that you can use.

List Numbering Type 1:

This is an example of this article.
This article contains a tutorial on blogger tips.
I hope you can understand the contents of this tutorial.
keep up the spirit and don't forget to take a break!

To create a list of numbers like the one above, all you have to do is:

Open Blogger >> Theme >> Edit HTML.
Please search for the code ]]></b:skin> to make it easier, please search using CTRL + F.
Please paste the CSS code below right above it.

 ol.style1 {
     counter-reset:numbers;
     list-style:none;
     padding:0;
     }
ol.style1 > li {
     counter-increment:numbers;
     margin-bottom:25px;
     position:relative;
     margin-left:55px;
     }
ol.style1 > li img {
     margin:15px 0;
     width:100%;
     display:block;
     }
ol.style1 > li #box-download img {
     margin:0;}
ol.style1 > li::before {
     content:counter(numbers);
     line-height:23px;
     font-family:'Google Sans';
     font-size:14px;
     font-weight:bold;
     left:-45px;
     width:32px;
     height:32px;
     text-align:center;
     position:absolute;
     color:#222;
     border:3px solid rgba(57, 60, 155, 0.3);
     border-radius:4px;top:-2px;
     }
ol.standard li, ol.style2 li, ol.style0 li, ol.style1 li ul li {
     margin-bottom:15px;
     }
ol.style1 li ul {
     margin-top:15px;
     }
.dark-mode ol.style1 > li::before {
     color:rgb(80, 103, 197);
     border-color:rgba(57, 60, 155, 0.3);
     }

To implement it, please use the code below in HTML mode

<ol class="style1"><li>This is an example of this article.</li><li>This article contains a tutorial on blogger tips.</li><li>I hope you can understand the contents of this tutorial.</li><li>keep up the spirit and don't forget to take a break!</li></ol>

List Numbering Type 2:

This is an example from this article.
This article contains a tutorial on blogger tips.
I hope you can understand the content of this tutorial.

To create a list of numbers like the one above, all you have to do is:

Open Blogger >> Theme >> Edit HTML.
Please search for the code ]]></b:skin> to make it easier, please search using CTRL + F.
Please paste the CSS code below right above it.

 ol.jirale2 {
  max-width: 350px;
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 40px;
}
ol.jirale2 li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
}
ol.jirale2 li::before {
  content: counter(my-awesome-counter);
  color: #fcd000;
  font-size: 1.5rem;
  font-weight: bold;
  position: absolute;
  --size: 32px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  transform: rotate(-10deg);
  background: black;
  border-radius: 50%;
  text-align: center;
  box-shadow: 1px 1px 0 #999;
}

To implement it, please use the code below in HTML mode

<ol class="jirale2"><li>This is an example from this article.</li><li>This article contains a tutorial on blogger tips.</li><li>I hope you can understand the content of this tutorial.</li></ol>

List Numbering Type 3:

This is an example of this article.
This article contains a tutorial on blogger tips.
I hope you can understand the content of this tutorial.
Keep your spirits up and don't forget to take a break!

To create a list of numbers like the one above, all you have to do is:

Open Blogger >> Theme >> Edit HTML.
Please search for the code ]]></b:skin> to make it easier, please search using CTRL + F.
Please paste the CSS code below right above it.

 ol.jirale3 {
  list-style: none;
  counter-reset: my-awesome-counter;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
ol.jirale3 li {
  counter-increment: my-awesome-counter;
  display: flex;
  width: 50%;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
ol.jirale3 li::before {
  content: "0" counter(my-awesome-counter);
  font-weight: bold;
  font-size: 3rem;
  margin-right: 0.5rem;
  font-family: 'Abril Fatface', serif;
  line-height: 1;
}

To implement it, please use the code below in HTML mode

<ol class="jirale3"><li>This is an example of this article.</li><li>This article contains a tutorial on blogger tips.</li><li>I hope you can understand the content of this tutorial.</li><li>Keep your spirits up and don't forget to take a break!</li></ol>

List Numbering Type 4:

This is an example of this article.
This article contains a tutorial on blogger tips.
I hope you can understand the content of this tutorial.

To create a list of numbers like the one above, all you have to do is:

Open Blogger >> Theme >> Edit HTML.
Please search for the code ]]></b:skin> to make it easier, please search using CTRL + F.
Please paste the CSS code below right above it.

ol.jirale {
  clear: both;
  list-style: none;
  padding-left: 2%;
}
ol.jirale li {
  margin: 2em 0;
  padding-top: 1em;
  display: block;
  position: relative;
  counter-increment: inst;
}
ol.jirale li::before {
  content: counter(inst);
  
  background: rgba(255, 150, 0, 0.35);
  color: #fff;
  
  font-size: 1em;
  font-weight: 700;
  font-style: italic;
  text-shadow: 1px 1px rgba(255, 150, 0, 0.5);
  
  border-radius: 0 0.675em 0.675em 0;
  font-size: 1.5em;
  text-align: center;
  
  padding-top: 0;
  padding-left: 2.25%;
  left: -5%;
  top: -0.65em;
  height: 1.35em;
  width: 1.35em;
  position: absolute;
  
  transition: all 0.2s ease-in-out;
  
  z-index: -1;
}
@media (min-width: 33em) {
  ol.jirale li:before {
    border-radius: 50%;
    font-size: 1.5em;
    height: 1.35em;
    margin-left: 2.5%;
    padding-left: 0;
    padding-top: 0;
    top: -0.15em;
    width: 1.35em;
    z-index: -1;
  }
}

To implement it, please use the code below in HTML mode

<ol class="jirale"><li>This is an example of this article.</li><li>This article contains a tutorial on blogger tips.</li><li>I hope you can understand the content of this tutorial.</li></ol>

Conclusion

In today's article, I shared how to Custom List Numbering on Blog Posts – I hope you liked it and please share it with your friends and follow our blog for more content

Go to Link

CONCLUSION

In this article, I shared with you Custom List Numbering on Blog Posts By Jirale. I hope you have liked It. Please do share it with your friends and follow our blog for more.

If you face any problems in Demo, Download or have any questions so feel free to ask me in comments section or join our Telegram Channel to get the lastest posts updates daily.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.