How to Add Custom Numbering List Style on Blogger?

Hello Guys! how are you? I hope you are all good. Welcome Freemium Tech website's today's article. Today we will show you how to Add Custom CSS3 Style Numbered list inside Blogger Post. So, If you are looking for Custom Numbering List Style on Blogger then definitely this post will help you.

Features:-

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:

Normal Ordered
Normal Ordered

Custom Ordered List Example:

Content
Content
Content
Content

Content
Content
Content
Content

So without wasting important time let's check How to Add Custom Numbering List Style on Blogger?

Before Add this let's see a preview

Demo

How to Add Custom Numbering List Style on Blogger?

Important!
Before 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">

<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!

Change the Dark Mode CSS .darkMode as per your template CSS.

Change the color codes marked on CSS as per you needs.

Check out this page for Awesome Color codes.

Step 10: Then Save or Publish.

That's done! You are Successfuly add custom numbering list style.

CONCLUSION

In this article, I shared with you How to Add Custom Numbering List Style on Blogger? I hope you have liked It. Please do share it with your friends and follow our blog for more.

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.