How to Add a Stylish List to WordPress and Blogger

In this article, I will show you how you can add a Stylish List list in Blogger and WordPress. I will provide you with an HTML and CSS code through which you can easily create a stylish list on your website.

Read More: How to Add Question & Answer on the MCQ Website Without any Plugin

Stylish List Demo

• What is an Expired Domain
• Benefits of using an expired domain
• How many ways can you use an expired Domain
• Where to buy expired domain
• GeneratePress Free Theme Home Page
• GeneratePress Free Theme Customization

How to Add a Stylish List to WordPress Without Any Plugin

Open any of your posts to which you want to add this stylish list and add a custom HTML option by clicking the plus icon where you want to add a list. Now copy the code given below press it on your website and edit the lists to create your list.

<style>
.LinkList1 {
  counter-reset: item;
  list-style-type: none;
  padding-left: 10px;
}

.LinkList1 li {
  position: relative;
  background: #e1e9ff6b;
  color: #ff9c9c;
  margin-bottom: 4px;
  padding: 10px 20px;
}

.LinkList1 li::before {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  left: -20px;
  top: 10px;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  background-color: #185abc;
  color: white;
}
</style>

<ul class="LinkList1">
  <li><a href="#">What is an Expired Domain</a></li>
  <li><a href="#">Benefits of using an expired domain</a></li>
  <li><a href="#">How many ways can you use an expired Domain</a></li>
  <li><a href="#">Where to buy expired domain</a></li>
  <li><a href="https://chat4now.com/generatepress-free-theme-home-page-design-using-generateblocks/">GeneratePress Free Theme Home Page</a></li>
  <li><a href="https://chat4now.com/generatepress-free-theme-customization/">GeneratePress Free Theme Customization</a></li>
</ul>

How to Add a Stylish List to Blogger

Login to your blogger dashboard and open any post that you want to add to this stylish list. Go inside the post and put our code in the HTML view by clicking. Now copy the code given below press it on your website and edit the lists to create your list.

<style>
.LinkList1 {
  counter-reset: item;
  list-style-type: none;
  padding-left: 10px;
}

.LinkList1 li {
  position: relative;
  background: #e1e9ff6b;
  color: #ff9c9c;
  margin-bottom: 4px;
  padding: 10px 20px;
}

.LinkList1 li::before {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  left: -20px;
  top: 10px;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  background-color: #185abc;
  color: white;
}
</style>

<ul class="LinkList1">
  <li><a href="#">What is an Expired Domain</a></li>
  <li><a href="#">Benefits of using an expired domain</a></li>
  <li><a href="#">How many ways can you use an expired Domain</a></li>
  <li><a href="#">Where to buy expired domain</a></li>
  <li><a href="https://chat4now.com/generatepress-free-theme-home-page-design-using-generateblocks/">GeneratePress Free Theme Home Page</a></li>
  <li><a href="https://chat4now.com/generatepress-free-theme-customization/">GeneratePress Free Theme Customization</a></li>
</ul>

I hope you liked this article How to Add a Stylish List to WordPress and Blogger? if you have any questions in your mind, please write in the comment box and share this post with your friends on social media platforms Facebook and Twitter.