How to add Stylish Numbering List Style in a Blogger Template

Adding a Stylish Numbered List increases yaar attention towards step or information websites in Blogger.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Hello Blogger's how are you all. I hope you are good and doing great. So today's article is all about How to Add Stylish Numbering List Style on Blogger templates like Median UI, Fletro Pro, IMagz, JetTheme, Plus UI etc..

How to add Stylish Numbered List in Blogger Template
How to add Stylish Numbered List in Blogger Template

Have you seen someone using it from the above Thumbnail and thought 🤔💭 of adding it on your template. Then you have come to right place.

We will give you a simple 😎 tutorial for it. So please stay with us read the full blog without skipping any parts.

Features of Stylish Numbering List -

  1. Looks creative.
  2. Attract Visitors.
  3. Give your blog amazing looks.

So why so wait let's start the tutorial.

But before following below steps kindly do backup your theme for any kind of error and easy restoration.

Adding Custom Numbering List Style on Blogger

Below are two types of styles kindly follow full tutorial to use it appropriately.

STYLE 1

In Style 1 there you have to add CSS and then when writing post using HTML codes.

Adding CSS

    Step 1: First of all Login to your Blogger Dashboard.

    Step 2: On Blogger Dashboard, click Theme.

    Step 3: Click the arrow down icon next to 'customize' button.

    Step 4: Click Edit HTML, you will be redirected to editing page.

    Step 5: Now search the code and paste the following CSS Codes just above to it.

     
    /* Custom List Numbering style1*/
     ol.style1 {
         counter-reset:numbers;
         list-style:none;
         padding:0;
    }
     ol.style1 > li {
         counter-inccment: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);
    }
     
    1. Change the Dark Mode CSS .darkMode as per your template CSS.
    2. Change the color codes marked on CSS as per you needs.
    3. Check out this page for Awesome Color codes.
    4. Now click on save theme.

    HTML code for using it in posts:

    Code

    Now when you will write ✍️ the post then copy and paste the below code for getting designed numbering list style1.
    <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>

    STYLE 2

    Adding CSS

      Step 1: Just like above Login to your Blogger Dashboard.

      Step 2: On Blogger Dashboard, click Theme.

      Step 3: Click the arrow down icon next to 'customize' button.

      Step 4: Click Edit HTML, you will be redirected to editing page.

      Step 5: Now search the code and paste the following CSS Codes just above to it.

     
    /* 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)
    }
     
    1. Change the Dark Mode CSS .darkMode as per your template CSS.
    2. Change the color codes marked on CSS as per you needs.
    3. Check out this page for Awesome Color codes.
    4. Now click on save theme.
    HTML code for using it in posts:

    Code

    Now again when you will write ✍️ the post then copy and paste the below code for getting designed numbering list style1.
    <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>

STYLE 3

Adding CSS

    Step 1: First of all Login to your Blogger Dashboard.

    Step 2: On Blogger Dashboard, click Theme.

    Step 3: Click the arrow down icon next to 'customize' button.

    Step 4: Click Edit HTML, you will be redirected to editing page.

    Step 5: Now search the code and paste the following CSS Codes just above to it.

         
    /*General Styling*/
    .style3 ol{
    max-width:500px;/*cmove if full width*/
    text-align:justify;
    }
    
    .style3 ol {
    position: relative;
    padding-left: 60px;
    margin-bottom: 20px;
    list-style: none !important;
    }
     
    .style3 ol li {
    position: relative;
    margin-top: 0em;
    margin-bottom: 20px;
    }
    
    /*number styling - note that you will need to physically add in a span class*/
    
    
    /*line styling*/
    .style3 ol li:before {
    content: "";
    background: #8dbeb2;
    position: absolute;
    width: 2px;
    top: 1px;
    bottom: -21px;
    left: -24px;
    }
    
    /*dot styling*/
    .style3 ol li:after {
    content: "";
    background: #8dbeb2;
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    top: 1px;
    left: -31px;
    }
    
    /*cmoves line from last number*/
    .style3 ol li:last-child:before {
    content: "";
    background: #ffffff;
    }
    
      
    1. Change the Dark Mode CSS .darkMode as per your template CSS.
    2. Change the color codes marked on CSS as per you needs.
    3. Check out this page for Awesome Color codes.
    4. Now click on save theme.
    HTML code for using it in posts:

    Code

    Now again when you will write ✍️ the post then copy and paste the below code for getting designed numbering list style1.
    <ol class="style3">
    <li> Content </li>
    <li> Content </li>
    <li> Content </li>
    <li> Content </li>
    <li> Content </li>
    <li> Content </li>
    <li> Content </li>
    </ol>

    Style 4

    ol { padding-left: 50px; }
    li { 
      color: #4F4F4F; 
      padding-left: 16px;
      margin-top: 24px;
      position: relative;
      font-size: 16px;
      line-height: 20px;
      
      &:before {
        content: '';
        display: block;
        height: 42px;
        width: 42px;
        border-radius: 50%;
        border: 2px solid #ddd;
        position: absolute; // yeah, you have to manually position it based on the text size, line height, etc. (in the parent li style). it's not the smarest solution 
        top: -12px;
        left: -46px;
      }
    }

    strong { color: #292929; }

    ol.style4 { 
      li:nth-child(odd):before { border-color: #0BAD02; }
      li:nth-child(even):before { border-color: #2378D5; }
    }
    1. Change the Dark Mode CSS .darkMode as per your template CSS.
    2. Change the color codes marked on CSS as per you needs.
    3. Check out this page for Awesome Color codes.
    4. Now click on save theme.


    HTML code for using it in posts:

    Code

    Now again when you will write ✍️ the post then copy and paste the below code for getting designed numbering list style1.
    <ol class="style4">
    
    <li> Content </li>
    
    <li> Content </li>
    
    <li> Content </li>
    
    <li> Content </li>
    
    <li> Content </li>
    
    <li> Content </li>
    
    <li> Content </li>
    
    </ol>

    STYLE 5

           
    .style5 {
      margin-left:auto;
      justify-content:center;
      list-style: none;
      counter-reset: cardCount;
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      --cardsGap: 1rem;
      gap: var(--cardsGap);
      padding-bottom: var(--cardsGap);
    }
    .style5 li {
      counter-increment: cardCount;
      display: flex;
      justify-content:center;
      --labelOffset: 1rem;
      --arrowClipSize: 1.5rem;
      margin-top: var(--labelOffset);
    }
    .style5 li::before {
      content: counter(cardCount, decimal-leading-zero);
      background: white;
      color: var(--cardColor);
      font-size: 2em;
      font-weight: 700;
      transform: translateY(calc(-1 * var(--labelOffset)));
      margin-right: calc(-1 * var(--labelOffset));
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0.5em;
      border:4px solid var(--cardColor) 
    }
    .style5 li .content {
      grid-area:text;
      background-color: var(--cardColor);
      --inlinePadding: 0.25em;
      --boxPadding: 0.25em;
      display: grid;
      padding: var(--boxPadding) calc(var(--inlinePadding) + var(--arrowClipSize))
        var(--boxPadding) calc(var(--inlinePadding) + var(--labelOffset)); 
      gap: 0.25em 0.25em;
      clip-path: polygon(
        0 0,
        calc(100% - var(--arrowClipSize)) 0,
        100% 50%,
        calc(100% - var(--arrowClipSize)) 100%,
        calc(100% - var(--arrowClipSize)) calc(100% + var(--cardsGap)),
        0 calc(100% + var(--cardsGap))
      );
      position: relative;
    }
    .style5 li .content::before {
      content: "";
      position: absolute;
      width: var(--labelOffset);
      height: var(--labelOffset);
      background: var(--cardColor);
      left: 0;
      bottom: 0;
      clip-path: polygon(0 0, 100% 0, 0 100%);
      filter: brightness(0.75);
    }
    .style5 li .content::after {
      content: "";
      position: relative;
      height: var(--cardsGap);
      width: var(--cardsGap);  
      left: 0;
      top: 100%;
    }
    .style *{
       margin:0px;
      padding:0px; }
    .conetnt  *{
       margin:0px;
      padding:0px; }
      
    
          

    1. Change the Dark Mode CSS .darkMode as per your template CSS.
    2. Change the color codes marked on CSS as per you needs.
    3. Check out this page for Awesome Color codes.
    4. Now click on save theme.
    HTML code for using it in posts:

    Code

    Now again when you will write ✍️ the post then copy and paste the below code for getting designed numbering list style5.
    <ol class="style5">
    <li class="--cardColor:red;">< div class='content'> Content </div></li>
    <li class="--cardColor:green;">< div class='content'> Content </div></li>
    <li class="--cardColor:blue;">< div class='content'> Content </div></li>
    <li class="--cardColor:gold;">< div class='content'> Content </div></li>
    </ol>

    Conclusion

    I hope this helps you to easily add a Stylish Numbered List on your website and make it look more attractive.

    Stay Tuned, I will upload more styles soon 🔥.

    Thanks

    © Crangsten 

    FAQ's related to Post


What are Numbered Lists?

Events happening in order or in sequence can be recorded to provide step by step information.

How do we create Numbered List in HTML?

To add numbered list in your Code add the below code 👇 >ol< >li<Number 1>/li< >li<Number 2>/li< </ol<

How much are these Stylish Numbered List helpful?

These Stylish Designs will help users to view your website in different light and will really attract users attention even for a little bit.

About the Author

Hello

1 comment

  1. Its not work bro
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.