Internal linking is one of the most powerful SEO strategies to keep readers on your site longer. However, the default “Link List” gadgets in Blogger or the standard lists in WordPress often look outdated and boring.

A stylish link list not only makes your sidebar look professional but also increases the Click-Through Rate (CTR) of your important pages. In this tutorial, I’ll show you how to use simple HTML and CSS to create a modern, numbered link list that works on any CMS, including Blogger, WordPress, and Wix.

Why You Should Customize Your Link Lists

Before we jump into the code, here is why a custom design matters for your SEO:

• Improved User Experience (UX): Modern designs reduce “visual noise,” making it easier for readers to find what they need.
• Higher Engagement: Stylish buttons or numbered lists draw the eye more effectively than plain blue links.
• Zero Plugin Dependency: Using pure CSS keeps your site fast. Too many plugins can slow down WordPress, hurting your Core Web Vitals.

Video Tutorial

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.

Option 1: The Modern Numbered Link List (Universal Code)

This code works on any platform. It uses a “CSS Counter” to automatically number your links, creating a clean, professional look.

Step 1: The CSS Code

Copy and paste this into your theme’s CSS section (Blogger: Theme > Customize > Advanced > Add CSS | WordPress: Appearance > Customize > Additional CSS).

<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>

Step 2: The HTML Structure

Place this HTML where you want the list to appear (e.g., in a Custom HTML widget or block).

<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.

Features of This Link List

• Fully responsive (mobile-friendly)
• Fast loading (no plugin required)
• Clean and modern UI
• Easy to customize
• Works on Blogger, WordPress, or any website
• SEO-friendly structure

Option 2: Styling the Default Blogger “Link List” Widget

If you prefer using the built-in Blogger “Link List” gadget (found in Layout > Add a Gadget), you can apply this specific CSS to style it automatically without touching the HTML.

#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.

Pro Tips for Better SEO Results

1. Use Descriptive Anchor Text: Instead of “Click Here,” use descriptive titles like “Beginner Guide to WordPress SEO.”
2. Placement Matters: Place your most important links “Above the Fold” (the top part of the sidebar) so users see them immediately.
3. Mobile Optimization: The CSS provided above is responsive. It uses padding and margins that work perfectly on mobile screens.
4. Open in New Tab: For external links, remember to add target=”_blank” to your HTML to keep your blog open in the background.

Frequently Asked Questions (FAQ)

Will this code slow down my website?

No. This is “Vanilla CSS,” which is the fastest way to style a website. It is much lighter than using a WordPress plugin.

Can I change the colors?

Yes! Simply look for the background and background-color hex codes (like #185abc) in the CSS and replace them with your brand colors.

Does this work on mobile?

Absolutely. The list uses a block-level layout that scales automatically to any screen size.

Conclusion

A well-structured sidebar is one of the most underutilized tools in blogging. By implementing this stylish link list, you are actively reducing your bounce rate and helping search engines crawl your important pages more effectively.

Remember, a clean blog is a successful blog. Avoid cluttering your sidebar with too many widgets—stick to 5–7 high-value links to guide your readers exactly where you want them to go.

Need more Blogger tips? Subscribe to our newsletter for weekly CSS snippets and SEO hacks delivered straight to your inbox!