How to make Custom Numbered Listing for Blogger
Benefits :-
- New numbered listing look.
- Change those old numbers and add new one with nice design.
Let's Start
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
Eagerly waiting for this... Tech Aadi 😊😊😊
Hope the article was Helpful