How to Add Custom Numbering List Style on Blogger

Hello Blogger's how are you. I hope you are good and doing great. So toady article is all about How to Add Custom Numbering List Style on Median Ui or Imagz or Fletro template.

Have you seen someone using it and thought 🤔💭 of adding it on your template. Then you have come to right place.

We will give you awesome 😎 tutorial for it. So please stay with us read the full blog without skipping any parts.

Demo

Benefits of Custom Numbering List Style

1. Look creative.
2. Attract Visitors.
3. Give your blog awesome looks.

So why so wait let's start the tutorial.

But before following below steps kindly do backup your theme for any kind of error and easy restoration.

Adding Custom Numbering List Style on Blogger

Below are two types of styles kindly follow full tutorial to use it appropriately.

STYLE 1

In Style 1 there you have to add CSS and then when using HTML codes.

Adding CSS

1. Login to your Blogger dashboard.
2. Go to Theme section and click on edit HTML.
3. Now search 🔎 for this </style> tag.
4. Copy the below CSS code and paste it just above the </style> tag.

<style> 
/* Custom List Numbering style1*/
 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: 'Noto Sans',sans-serif;
     font-size: 14px;
     font-weight: 700;
     left: -45px;
     width: 32px;
     height: 32px;
     text-align: center;
     position: absolute;
     color: #eb3b5a;
     border: 5px solid rgba(42,203,186,1.0);
     border-radius: 50px;
     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;
}
 .darkMode ol.style1 > li::before {
     color:rgb(126, 255, 245);
     border-color:rgba(50, 255, 126, 1.0);
}
 </style>

1. Change the Dark Mode CSS .darkMode as per your template CSS.
2. Change the color codes marked on CSS as per you needs.
3. Check out this page for Awesome Color codes.

Now click on save theme.

HTML code for using it

Code

Now when you will write ✍️ the post then copy and paste the below code for getting designed numbering list style1.

<ol class="style1">
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
</ol>

STYLE 2

Adding CSS

1. Just like above open Blogger dashboard.
2. Go to Theme section and click on edit HTML.
3. Now search 🔎 for this </style> code.
4. Copy the below CSS and paste it just above the </style> tag.

<style> 
/* Custom List Numbering style2*/
 ol.style2{
    counter-reset:numbers;
    list-style:none;
    padding:0
}
ol.style2 > li{
    counter-increment:numbers;
    margin-bottom:25px;
    position:relative;
    margin-left:55px
}
ol.style2 > li img{
    margin:15px 0;
    width:100%;
    display:block
}
ol.style2 > li::before{
    content:counter(numbers);
    line-height:23px;
    font-family:'var(--fontB)';
    font-size:14px;
    font-weight:bold;
    left:-45px;
    width:32px;
    height:32px;
    text-align:center;
    position:absolute;
    color: #9c27b0;
    border:5px solid rgb(254 202 87);
    border-radius:50% 0 50% 50%;
    top:-2px
}
ol.style2 li ul li{
    margin-bottom:15px
}
ol.style2 li ul{
    margin-top:15px
}
.darkMode ol.style2 > li::before{
    color:rgb(255, 242, 0);
     border-color:rgba(24, 220, 255, 1.0)
}
 </style>

1. Change the Dark Mode CSS .darkMode as per your template CSS.
2. Change the color codes marked on CSS as per you needs.
3. Check out this page for Awesome Color codes.

Now click on save theme.

HTML code for using it

Code

Now again when you will write ✍️ some post you can use below html codes for style2 custom numbering list.

<ol class="style2">
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
</ol>

Now after following the above steps I hope you did understand how to use the custom numbering list style. If you have any query please contact us.

Conclusion

Today we have discussed about How to Add Custom Numbering List Style on Median Ui, Fletro and Imagz. So I hope you find this article helpful. Please do like our post. And comment your valuable thinking about this article.

Go to Link