How to Add Custom Numbered List Style on Blogger.

Hello! Welcome to Tech Ankur.

If you are searching how to add custom numbered list on blogger website then this post is just for you.

Are you worried about the speed of your website? Don't worry, this will not affect your website speed.

Also don't worry about it, this accordion section also has dark mode css you just want to change the dark mode class which we have given with your theme dark mode class, you can easily do it by following this tutorial exactly. Can be changed from.

Pros

1. Give your blog awesome looks.
2. Attract Visitors.
3. 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:

So without wasting any important time let's see how to add custom numbered list style on blogger

You can see the demo here⤵

View Demo

How to Add Custom Numbering List Style

Important!Before we start adding code to the XML, I would recommend you to backup your current theme. If by chance any problem arises 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)}

Or, 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">
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li></ol>

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.

That's done!

If you encounter any problem, do not hesitate to contact us

Copyright: @Tech Ankur

Source:
www.the-pro-project.blogspot.com

Go to Link