Home
Blogger Tutorials

How to Change Numbering Style in Blogger Posts (Professional Numbered List Design)

Techno Praveen

Welcome back! In this article, you will learn how to change the numbering style inside Blogger posts and transform the default numbering into a modern, professional, and elegant design. This upgrade helps make your articles more visually appealing and improves the overall reading experience on your blog.

How to Change Numbering Style in Blogger Posts (Professional Numbered List Design)
How to Change Numbering Style in Blogger Post | Techno Praveen

How to Change Numbering Style in Blogger Posts

You will find two beautiful and modern numbering styles designed to improve your blog’s layout. Choose the style you prefer, then follow the steps below to add it to your theme.

Steps to Apply the Numbering Style

  1. Go to your Blogger dashboard → Theme → Edit HTML.
  2. Press Ctrl + F and search for the tag: ]]></b:skin>
  3. Copy the numbering-style code you want and paste it directly above that tag.

Style One


.post-body ol li {
  padding: 8px 30px;
  margin-right: 15px;
  margin-bottom: 15px;
  list-style: none;
  box-shadow: 0 1px 3px #ddd;
  font-size: 17px;
  position: relative;
}
.post-body ol li:before {
  content: counter(li);
  counter-increment: ol li;
  background-color: var(--linkC);
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-left: 15px;
  color: #fff;
  border-radius: 3px;
  font-size: 17px;
  position: absolute;
  right: -15px;
}
.post-body ol {
  counter-reset: li;
  padding-right: 0;
}
.post-body ol li:after {
  content: "";
  width: 10px;
  height: 100%;
  background-color: var(--linkC);
  position: absolute;
  top: 0;
  left: 0;
}
.drK .post-body li:after {
  background-color: var(--darkU);
}

Style Two

Note:
Select the correct version depending on your blog language direction — RTL for Arabic blogs, LTR for English blogs.


/* Numbered Listing RTL */
ol {
  counter-reset: numbers;
  list-style: none;
  padding: 0;
}
ol > li {
  counter-increment: numbers;
  margin-bottom: 25px;
  position: relative;
  margin-right: 55px;
}
ol > li img {
  margin: 15px 0;
  width: 100%;
  display: block;
}
ol > li::before {
  content: counter(numbers);
  line-height: 23px;
  font-family: "var(--fontB)";
  font-size: 14px;
  font-weight: bold;
  right: -45px;
  width: 32px;
  height: 32px;
  text-align: center;
  position: absolute;
  color: var(--themeC);
  border: 5px solid rgb(220 226 224);
  border-radius: 50% 0 50% 50%;
  top: -2px;
}
  

/* Numbered Listing LTR */
ol {
  counter-reset: numbers;
  list-style: none;
  padding: 0;
}
ol > li {
  counter-increment: numbers;
  margin-bottom: 25px;
  position: relative;
  margin-left: 55px;
}
ol > li img {
  margin: 15px 0;
  width: 100%;
  display: block;
}
ol > 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: var(--themeC);
  border: 5px solid rgb(220 226 224);
  border-radius: 50% 0 50% 50%;
  top: -2px;
}

Numbering Test Code


<ol>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
</ol>

After following all the steps, your Blogger posts will now have a clean, modern numbering style that enhances readability and gives your articles a more professional appearance.

Done!
This concludes our guide on "How to Change Numbering Style in Blogger Professionally". See you again in a new tutorial—stay safe! 🙂

Post a Comment