Hello Friends, Welcome to AS Theme World. Today in this article we are going to learn "How to Add Custom List in Blogger Website".

Custom List Widget Demo

Steps to Add Event Calendar

This is divided into two steps, the first step is adding the CSS code to blog template and the second step is adding the HTML codes in post/page where you want to add Custom List.

Step 1. Adding CSS Codes

First of all search for the code ]]></b:skin> and add the following CSS code above it.

.custom-ol {
    padding: 24px 32px;
    box-shadow: 0 4px 16px -3px rgba(0, 0, 0, 0.25);
    max-width: 500px;
    margin: 24px auto;
    border-radius: 10px;
    font-family: "Roboto", sans-serif;
    color: #073b4c;
}

.custom-ol h2 {
    font-size: 28px;
}

.custom-ol ol {
    margin: 0;
    padding: 0;
    margin-top: 32px;
    list-style: none;
    counter-reset: web-design;
}

.custom-ol ol li {
    margin: 28px 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    transition: all 400ms;
}

.custom-ol ol li:hover {
    background: #ffd166;
}

.custom-ol ol li::before {
    content: counter(web-design);
    counter-increment: web-design;
    margin-right: 24px;
    font-size: 32px;
    font-weight: bold;
    background: #0071a7;
    padding: 8px 16px;
    border-radius: 0 8px 0 8px;
    color: #eee;
    transition: all 400ms;
}

.custom-ol ol li:hover::before {
    background: #073b4c;
    transform: scale(1.2) rotate(-5deg);
}

You May Like These :

Step 2. Adding HTML Codes

Now copy following HTML codes and paste to post/page where you want to add Custom List.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="custom-ol">
        <h2>Steps To Design A Website</h2>

        <ol>
            <li>The Planning Phase</li>
            <li>Create The Wireframe</li>
            <li>Design It</li>
            <li>Write The Code</li>
            <li>Publish The Website Online</li>
        </ol>
    </div>
    
</body>
</html>

Download Codes

Download all the source codes files by clicking on Download Button given above.

Now, your Custom List is completely created and working properly. I hope you like this article and you get what you want. Share this article with your friends and on your social profiles. If you face any problem in any section that put your questions and problems in comment box provided below.

Important Note: All rights reserved to respected copyright owner. If your copyrighted material has been indexed by our website and you want this material to be removed then contact us immediately. We will remove it within 24 hours.

MORE INFORMATION

How to Add Custom List in Blogger Website

Steps to Add Event Calendar

Step 1. Adding CSS Codes

You May Like These :

Step 2. Adding HTML Codes