How to Add Custom Numbering List Style on Blogger?

Step:1

1. সর্বপ্রথমে নিচের CSS Code টি Copy করে নিন । AndThan Edit HTML এ গিয়ে </style> এর উপর অথবা /*]]>*/</style> এর নিচে,নিচের Copy করা CSS Code টি Past করুন ।

<style> 
/* Custom List Numbering style1*/
 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: #eb3b5a;
     border: 5px solid rgba(42,203,186,1.0);
     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;
}
 .darkMode ol.style1 > li::before {
     color:rgb(126, 255, 245);
     border-color:rgba(50, 255, 126, 1.0);
}
 </style>

Style:1

ব্যাস,আপনার কাজ শেষ । যখন আপনি Blogger এ Post লিখবেন তখন ডিজাইন করা নম্বর তালিকা পেতে নিচের HTML Code টি Copy করে Post এর মধ্যে Past করুন ।

<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:2

1. সর্বপ্রথমে নিচের CSS Code টি Copy করে নিন । AndThan Edit HTML এ গিয়ে </style> এর উপর অথবা /*]]>*/</style> এর নিচে,নিচের Copy করা CSS Code টি Past করুন ।

<style> 
/* Custom List Numbering style2*/
 ol.style2{
    counter-reset:numbers;
    list-style:none;
    padding:0
}
ol.style2 > li{
    counter-increment:numbers;
    margin-bottom:25px;
    position:relative;
    margin-left:55px
}
ol.style2 > li img{
    margin:15px 0;
    width:100%;
    display:block
}
ol.style2 > 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(254 202 87);
    border-radius:50% 0 50% 50%;
    top:-2px
}
ol.style2 li ul li{
    margin-bottom:15px
}
ol.style2 li ul{
    margin-top:15px
}
.darkMode ol.style2 > li::before{
    color:rgb(255, 242, 0);
     border-color:rgba(24, 220, 255, 1.0)
}
 </style>

Style:2

ব্যাস,আপনার কাজ শেষ । যখন আপনি Blogger এ Post লিখবেন তখন ডিজাইন করা নম্বর তালিকা পেতে নিচের HTML Code টি Copy করে Post এর মধ্যে Past করুন ।

<ol class="style2">
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
</ol>

যখন আপনার একটা Box এ লেখা হয়ে যাবে এবং দ্বিতীয় Box এ লিখতে চান । এক্ষেত্রে আপনি </div> Close করুন । আপনি যদি নাম্বারের Colour এবং Border Colour Change করতে চান । এক্ষেত্রে আপনাকে CSS Code Edit করতে হবে । color: #9c27b0; - Number Colour border:5px solid rgb(254 202 87); - Border Colour

Check out this Page for Awesome Colour Codes

Go to Link