How to Change the Numbering Format in Blogger 2022

How to Change the Numbering Format in Blogger 2022

Go to download


Peace, mercy and blessings of God be upon you. How are you, my dears? We hope that you are fine, today we present to you a new topic in the Blogger Tools section .

Definition Numbering Format

This addition is a CSS code that arranges and numbered lines automatically in an attractive and beautiful way.

Steps to change the Format of the Numbering

  1. Log in to your blogger account .
  2. Go to Appearance, then >> Edit HTML .
  3. Ctrl We use the v + button C to copy and also to paste we use the Ctrl + V
  4. In order to remove the search box, click in the middle of the code editor and use the Ctrl + F
  5. Search for the tag 
  6. Put the following code right above it:

Search for the tag ]]></b:skin> Put these codes above it

/*-------- ---------*/
.post-body ol li{padding:8px 30px;margin-right:15px;margin-bottom:15px;list-style:none;-webkit-box-shadow:0 1px 3px #ddd;box-shadow:0 1px 3px #ddd;font-size:17px;position:relative}
.post-body ol li:before{content:counter(li);counter-increment:ol li;background-color:#d24949;width:30px;height:30px;text-align:center;line-height:30px;margin-left:15px;color:#FFF;border-radius:3px;font-size:17px;position:absolute;right:-15px}
.post-body ol{counter-reset:li;padding-right:0}
.post-body ol li:hover:after,.post-body ol li:hover:before{background-color:#9e44c9}
.post-body ol li:after{content:'';width:10px;height:100%;background-color:#d24949;position:absolute;top:0;left:0}
.post-body ol li a{text-decoration:none}
.post-body ul{list-style-type:disc;padding-right:40px}
.post-body li{color:#222222;padding-right:10px}
.post-body ul li a{text-decoration:none}

If you want to use the Numbering, you just have to do the following:


  • Blogger >> Posts >> New Post.
  • Type the paragraphs you want to number, then follow the following pictures:

image quote pre code