How to add Stylish Ordered List In Blogger website.

What is ordered list

An ordered list is a way of organizing items where the sequence matters. Each item is typically numbered or lettered, indicating a specific order. In HTML, for example, an ordered list is created using the <ol> tag, and each item within it is defined with the <li> tag. This type of list is useful for presenting steps in a process, rankings, or any information that requires a specific arrangement.

You can see the demo here⤵

View Demo

Easy Steps To Add a Ordered List In Blogger website

1. First of all Login to your Blogger Dashboard.
2. On Blogger Dashboard, click Theme.
3. Click the arrow down icon next to 'customize' button.
4. Now search the code ]]></b:skin>or<style> and paste the following CSS Codes just above to it.

   /* Ordered list by- ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ */
   .ol_list{counter-reset:num;line-height:1.6;list-style:none;margin:0;padding:0;} .ol_list>li{position:relative;counter-increment:num;padding-inline-start:45px;} .ol_list>li:not(:last-child){padding-bottom:15px;} .ol_list>li::before{content:counter(num) '.';display:flex;align-items:center;justify-content:center;position:absolute;top:0;width:30px;height:30px;border:1px solid var(--linkB);border-radius:50%;color:var(--linkB);font:small 'Fira Sans', sans-serif;transition:background .1s ease,color .1s ease;} .ol_list>li::before{left:0;} .ol_list>li::before{right:0;} .ol_list>li:hover::before{background-color:var(--linkB);color:#fffdfc;} .ol_list>li::after{content:'';position:absolute;top:calc(30px + 8px);bottom:8px;border-inline-start:1px solid var(--linkB);} .ol_list >::after{left:calc(30px / 2);} .ol_list>li::after{right:calc(30px / 2);} .ol_list>img{margin-top:1.2em;}
   /* Unordered list style*/  .ul_list {list-style: none!important;list-style-type: none!important;padding: 0;} .ul_list>li {margin-bottom: 3px;position: relative;margin-left: 35px} .ul_list>li::before {content: ''; background-image: url("data:image/svg+xml,%3Csvg viewBox%3D'0 0 24 24' xmlns%3D'http://www.w3.org/2000/svg' fill%3D'none' stroke%3D'%230066ff' stroke-width%3D'2' stroke-linecap%3D'round' stroke-linejoin%3D'round' class%3D'feather feather-check-circle'%3E%3Cpath d%3D'M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points%3D'22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat;height: 18px;width: 18px;left: -30px;text-align: center;position: absolute;top: 3px}

5. Save the CSS changes by clicking on this icon
6. Then go to the post/page or place which you want to add Custom Numbering List
7. Now paste the following HTML code to that place

   Ordered HTML

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

   Unordered HTML

   <ol class="ul_list">
   <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!

8. Then Save or Publish.

That's done!

Conclusion

This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box.

Copyright ©

ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ