Home
blogger
how to

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

3 comments

  1. Thanks for the post brother...
    Eagerly waiting for this... Tech Aadi 😊😊😊
    • Thanks Tech Aadi for you nice comment !
      Hope the article was Helpful