Buy Plus UI v2.6! Demo Buy Now!

How to Add Custom Numbering List Style on Blogger

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

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.

How to Add Custom Numbering List Style on Blogger

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.

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.

Getting Info...

About the Author

Hello Friends. Welcome to my website. I hope you all are doing good. If you like our work. Please revisit again. And do like and follow our blogs.

Buy me a Coffee

2 comments

  1. 😊 great 😘
    1. Thank you 😊
Please do not spam in the comment section or your comment will not be approved.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.