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! Welcome to Tecky AaryaN.

You are looking for How to Add Custom Numbering List Style on Blogger then this post is just for 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:

You can see the demo here⤵
Demo

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)}

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.

To appreciate our works, consider keeping the credits in codes. We don't allow to rewrite this post in any manner. Don't copy this post, codes or any part from this article without Permission, it is strictly prohibited. If you do so, Legal Actions will be taken.

Copyright

TeckyAaryaN

Go to Link