How to make Custom Numbered Listing for Blogger

Hello Guys and welcome to Wolv Themes Our Tutorial today is about How to make Custom Numbered Listing for Blogger.

Benefits :-

  1. New numbered listing look.
  2. Change those old numbers and add new one with nice design.
Let's Start
Demo

How to make Custom Numbered Listing :-

Step 1 :- Go To Blogger's Dashboard.
Step 2 :- Create New Post or Page or edit one.
Step 3 :- Click the pen button and press HTML view.
Step 4 :- Copy and paste the below provided code

Use the CSS (Root) only if you wants this custom numbered listing to be the main


ol {
  counter-reset: numbers;
  list-style: none;
  padding: 0
}

ol>li {
  counter-increment: numbers;
  margin-bottom: 25px;
  position: relative;
  margin-left: 55px
}

ol>li img {
  margin: 15px 0;
  width: 100%;
  display: block
}

ol>li::before {
  content: counter(numbers);
  line-height: 23px;
  font-family: 'var(--fontB)';
  font-size: 14px;
  font-weight: bold;
  left: -45px;
  width: 32px;
  height: 32px;
  text-align: center;
  position: absolute;
  color: #9c27b0;
  border: 5px solid rgb(220 226 224);
  border-radius: 50% 0 50% 50%;
  top: -2px
}

ol li ul li {
  margin-bottom: 15px
}

ol li ul {
  margin-top: 15px
}

.drkM ol>li::before {
  color: rgb(80, 103, 197);
  border-color: rgba(57, 60, 155, 0.3)
}
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::before {
  content: counter(numbers);
  line-height: 23px;
  font-family: 'var(--fontB)';
  font-size: 14px;
  font-weight: bold;
  left: -45px;
  width: 32px;
  height: 32px;
  text-align: center;
  position: absolute;
  color: #9c27b0;
  border: 5px solid rgb(220 226 224);
  border-radius: 50% 0 50% 50%;
  top: -2px
}

ol.style1 li ul li {
  margin-bottom: 15px
}

ol.style1 li ul {
  margin-top: 15px
}

.drkM ol.style1>li::before {
  color: rgb(80, 103, 197);
  border-color: rgba(57, 60, 155, 0.3)
}

How to use the CSS (Custom) in your posts or pages :-

Step 1 :- Go To Blogger's Dashboard.
Step 2 :- Create New Post or Page or edit one.
Step 3 :- Click the pen button and press HTML view.
Step 4 :- Copy and paste the below provided code
<ol class="style1">
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
</ol>
Step 4 :- Click the code button and press Compose view.
Step 5 :- Now Edit it and add your content

Rate this article

Frontend Developer and UX Designer

4 comments

  1. Thanks for the post brother...
    Eagerly waiting for this... Tech Aadi 😊😊😊
    1. Thanks Tech Aadi for you nice comment !
      Hope the article was Helpful
  2. Thanks for sharing this tutorial.
    Love from Nexozed.
    Find out cool Blogging Tips, Tricks, Tutorials here Nexozed
    1. Don't promote here again!