Hello friends, the topic we are going to look at today is what we will see through this post about creating a custom number list on the Blogger website.
Advantages of custom number list
Why do we need to add a custom number list to our posts and thus what is the use for us. No matter how much useful information we put into those posts they will not read our posts that much time. This is how we add a custom number list to your useful post, friends who are a little curiousity by the users who read it.
How to add custom number list in blogger
- First step sign in your blog account
- next step click the new post option
- Click the pencil icon below the Blogger Post title, select the HTML option from the Compose View option, copy the code below and paste it into your post. Then publish your post
<ol class="style1">
<li>Test </li>
<li>Test</li>
<li>Test</li>
<style>
/* Custom List Numbering*/
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: 'Noto Sans',sans-serif;
font-size: 14px;
font-weight: 700;
left: -45px;
width: 32px;
height: 32px;
text-align: center;
position: absolute;
color: #9c27b0;
border: 5px solid rgba(116,103,251,.17);
border-radius: 50px;
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);
}
</style>Conclusion
I hope you understand how to create custom number list in your blogger through this post. If you have any doubts after reading this post please let us know your top comments in the comment box
Rate Article:
