How to Add a Stylish Link List in Blogger, Wordpress & others

In this article, I will show you how you can add a stylish link list in Blogger, Wordpress, or any other CMS platform using HTML & CSS codes.

Here, You can use the default Link List widget in the Blogger website and add the CSS Code to style it or you can directly use the below Code to style your Link List.

Code 01:

<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 Affiliate Marketing</a></li>
  <li><a href="#">What Is Marketing Automation?</a></li>
  <li><a href="#">Search Engine Marketing</a></li>
  <li><a href="#">SEO Glossary</a></li>
  <li><a href="#">What Is Bounce Rate? How to reduce it?</a></li>
  <li><a href="#">How to find the perfect keyword?</a></li>
</ul>

You can use this code in any CMS platform like Blogger, Wordpress, Wix, etc. You can add as many link list items as you want, just duplicate the list element as shown in the above video.

CSS Code to Style Default Blogger Link List widget

Here is the CSS code to change the styling of the Default Blogger Link list widget.

#LinkList1 li {
    background: #e1e9ff6b;
    color: #ff9c9c;
    margin-bottom: 4px;
    padding: 10px 20px;
    border-left: 2px solid #185abc;
}

#LinkList1 ul {
    margin-left: -20px;
}

#LinkList2 li {
    background: #e1e9ff6b;
    color: #ff9c9c;
    margin-bottom: 4px;
    padding: 10px 20px;
    border-left: 2px solid #185abc;
}

#LinkList2 ul {
    margin-left: -20px;
}

You can use this in the CSS section of your Theme code. Or you can use the Style tag to use anywhere in the HTML document.