How to add Stylish Numbering List Style in a Blogger Template

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

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 -

Looks creative.
Attract Visitors.
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);
}

Change the Dark Mode CSS .darkMode as per your template CSS.
Change the color codes marked on CSS as per you needs.
Check out this page for Awesome Color codes.
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)
}

Change the Dark Mode CSS .darkMode as per your template CSS.
Change the color codes marked on CSS as per you needs.
Check out this page for Awesome Color codes.
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;
}

Change the Dark Mode CSS .darkMode as per your template CSS.
Change the color codes marked on CSS as per you needs.
Check out this page for Awesome Color codes.
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; }
}

Change the Dark Mode CSS .darkMode as per your template CSS.
Change the color codes marked on CSS as per you needs.
Check out this page for Awesome Color codes.
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; }

Change the Dark Mode CSS .darkMode as per your template CSS.
Change the color codes marked on CSS as per you needs.
Check out this page for Awesome Color codes.
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

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.

Go to Link

LoanGuides

How to add Stylish Numbering List Style in a Blogger Template

Features of Stylish Numbering List -

Adding Custom Numbering List Style on Blogger

STYLE 1

Adding CSS

Code

STYLE 2

Adding CSS

Code

STYLE 3

Adding CSS

Code

Style 4

Code

STYLE 5

Code

Conclusion

FAQ's related to Post

About the Author

Post a Comment

How to add Safelink in Blogger WebSite?

How to Install a Blogger Template?

Blogger Article Writing Tips for Ranking and Research

IMagz v1.25 Premium Blogger Template Free Download

9 ways to make money without AdSense in Blogging

Loan Guides