How to Add Custom Material Design Box In Your Blog

Hello friends, how are you, I think you will be fine. In today's post, I will tell you everything, in which way you can add custom numeric list style to any template in your blogger website.

Table of Contents

Have you seen someone using this and wondering how to use it in your template? So today you have come to the right place. Today I will tell you its tutorial in a different way, stay with us and read the blog thoroughly, without skipping or skipping anything.

Benefits of Number the Style

1. It looks very nice to see.
2. Impresses our user, so that our visitor likes.
3. Makes our blog posts more engaging.

So what are you waiting for, let's start today's post.

But before doing all this process, you have to take a backup of your theme, because if any kind of error occurs, you can easily restore it.

Adding Custom Numeric Styles to Blogger's Website

I have told you about the following two types of numeric style, and the approm-ksimteli way to use it.

Number 1 Style

Here you have to add Css in Style 1 and do this when you are using Html codes.

1. First of all you have to login to your blogger dashboard.
2. Now you will see the option of theme section in the bottom side, you have to click on it and click on edit HTML.
3. Now you have to search 🍳 for the ]]></b:skin> tag in it.
4. I have given you the CSS code below, you have to copy it and paste it just above the ]]></b:skin> tag.

      /* Custom List Numbering TS1*/
ol.TS1 {
    counter-reset:numbers;
    list-style:none;
    padding:0;
}
ol.TS1 > li {
    counter-increment:numbers;
    margin-bottom:25px;
    position:relative;
    margin-left:55px;
}
ol.TS1 > li img {
    margin:15px 0;
    width:100%;
    display:block;
}
ol.TS1 > li #box-download img {
    margin:0;
}
ol.TS1 > 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: #fdcb6e;
    border: 5px solid rgb(134, 117, 230, 0.767);
    border-radius: 50px;
    top: -2px;
}
ol.standard li, ol.TS2 li, ol.TS0 li, ol.TS1 li ul li {
    margin-bottom:15px;
}
ol.TS1 li ul {
    margin-top:15px;
}
.darkMode ol.TS1 > li::before {
    color:rgba(255, 90, 219, 0.616);
    border-color:rgb(50, 224, 255);
}
  

1. You have to change the dark mode CSS, .darkMode according to your template.
2. The color modes that I have marked, CSS according to your own.
3. You can visit this page for Osm Color codes.

Now you will see the option of save theme on the top side, click on it and save it.

HTML Code to Use this Style

CODE FOR HTML FORMAT

Now whenever you write a post✍️, then you have to copy the code given below, and then add it to the HTML format post. Then when you publish it, you get a different type of design list in numeric style1.

      <ol class="TS1">
<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 ON THEME

1. As you have opened blogger's dashboard in Style 1, you have to open it in the same way.
2. Now you have to come to the theme section, after that you have to click on Edit HTML.
3. Now you have to search 🍳 ]]></b:skin> Have to do this tag code.
4. Now you have to copy the CSS code given below and ]]></b:skin> Paste it on top of the tag.

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

1. First of all you have dark mode css, .darkMode has to be changed according to your template css.
2. You have to change the CSS color code of the color code that I have marked according to your own.
3. You can visit this page for Osm Color codes.
Now you have to click on save theme

HTML CODE FOR USING IN POST FORMAT

Now when you have to write the post again ✍️, you have to use the HTML code given below again, for numeric stylish of Style2.

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

Now you have followed all the above steps on how to add custom numbering list style, if you have any query then definitely contact us.
  

CONCLUSION OF OUR TALK

So today we have talked about how to add custom numbering list style in blogger's templates. So friends, I think today's article will be somewhat helpful for you. So do write to our post and comment what lesson you have got from our post.

© Tech Shreyansh

Go to Link