Beranda
Blogger
Tips & Tricks

How to Add Custom List in Blogger Website

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

Preview of Custom List

Document

Steps To Design A Website

  1. The Planning Phase
  2. Create The Wireframe
  3. Design It
  4. Write The Code
  5. Publish The Website Online

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>

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.

Posting Komentar