Custom List Numbering New Styles Blogger

 

Hello friends, in this article fixiw will return to discuss how to modify blogger templates, namely how to make a cool Style List Numbering . How do I install it? Well, here are the steps for how to install, and use the Style List Numbering in blog posts.

How to add a Custom List Numbering on Blogger Posts

Step 1: Please login to blogger.com
Step 2: Then select Theme and Edit HTML .
Step 3: Find the code ]]> </ b: skin> and paste the code right above it.
To make it easier to find the code, use  Ctrl + F

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:'Google Sans';
     font-size:14px;
     font-weight:bold;
     left:-45px;
     width:32px;
     height:32px;
     text-align:center;
     position:absolute;
     color:#222;
     border:3px solid rgba(57, 60, 155, 0.3);
     border-radius:4px;top:-2px;
     }
ol.standard li, ol.style2 li, ol.style0 li, ol.style1 li ul li {
     margin-bottom:15px;
     }
ol.style1 li ul {
     margin-top:15px;
     }
.dark-mode ol.style1 > li::before {
     color:rgb(80, 103, 197);
     border-color:rgba(57, 60, 155, 0.3);
     }

Step 4: then select save Theme .

How to use the Style List Numbering in your blog posts

Step 1: create a post or edit an existing post.
Step 2: Then paste the code below in your post .

<ol class="style1">

  <li>fixiw, Blogger Tricks</li>

  <li>Your Text Here.</li>

  <li>Your Text Here.</li>

  <li>Your Text Here.</li>

  <li>Your Text Here.</li>

</ol>

The final step: click save