Stay Connected With Us Follow Us Google News!

How To Add Costom Numbering List Style On Blogger Post

If you are looking for how to add a Custom Numbering List Style to the Blogger website then this post is just for you.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Every blogger should strive to make each of their posts distinctive in every way. As a result, we will discuss two unique numbering list styles in this article today (Ordered List Style). A quality article should have numbered lists (ol), which can be made using the "Numbering List" feature.

Costom Numbering List Style On Blogger

The HTML code for a "ordered list" allows for the creation of a numbered list. Because the editor uses this tool to add the HTML for you, you don't need to bother about doing it yourself.

The name "ordered lists in HTML" refers to the way that this tool will automatically number each element of the list taking a "order." Although it is not visible in the HTML code, each element has a number that is created sequentially starting at 1.


  • Give your blog awesome looks.
  • Attract Visitors.
  • Look creative.

Ordered HTML list 

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default

Normal Ordered list Example:-

  1. Normal Ordered
  2. Normal Ordered 

Costom Ordered List Example:-

  1. Costom Ordered Style 1
  2. Costom Ordered Style 1
  1. Costom Ordered Style 2
  2. Costom Ordered Style 2

So without wasting important time let's check How To Add Costom Numbering List Style On Blogger Post.

You can see the demo here:-

How To Add Costom Numbering List Style On Blogger Post

ImportantBefore we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]></b:skin> or /*]]>*/</style> and paste the following CSS Codes just above to it.

CSS For Style 1

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);border-radius:50px;top:-2px}ol.standard li,ol.style0 li,ol.style1 li ul li,ol.style2 li{margin-bottom:15px}ol.style1 li ul{margin-top:15px}.drK ol.style1>li::before{color:#7efff5;border-color:rgba(50,255,126,1)}

CSS For Style 2

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:700;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}.drK ol.style2>li::before{color:#fff200;border-color:rgba(24,220,255,1)}

Don't forget to change .drK with your website theme dark mode class, if your theme did not have a dark mode feature then keep default!

Step 6: Save the html changes by clicking on this icon

Step 7: Then go to the post/page or place which you want to add Custom Numbering List

Step 8: Then if you are doing this in page/post then don't forget to change Compose view to the HTML view

Step 9: Now paste the following HTML code to that place

HTML For Style 1

<ol class="style1">

HTML For Style 2

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

You can change html texts as you want in the code box!

Step 10: Then Save or Publish.
Congratulations! You've successfully added a coustom Numbering List Style on Blogger.


How To Add Costom Numbering List Style On Blogger Posts, then, according to the above guide? We hope you enjoy the aforementioned designs and can quickly and simply add them to your blogger blog. If the issue persists despite taking all the necessary procedures, please contact us by leaving a comment below. Do impart.
I'm grateful. God bless you!

© Copyright:

About the Author

Hi, I’m Narayan Kir Known as Mack the founder of Gamingsalt. I dropped out in 2012 to pursue my passion in blogging, digital marketing and training. I help people like you to learn blogging …

إرسال تعليق

Please don't share any sensitive or personal details here.

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
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.
Site is Blocked
Sorry! This site is not available in your country.