How to Add Custom List to Your Blogger Post ?

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

Step:1

সর্বপ্রথমে নিচের CSS Code টি Copy করুন । AndThen আপনার Blog Post এ Past করুন ।

<style>
  .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);
}
</style>

Step:2

এরপর নিচের HTML Code টি Copy করুন এবং আপনার Blog Post এ CSS Code এর নিচে Copy করা HTML Code টি Past করুন ।

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

ব্যাস, আপনার কাজ শেষ ,এখন আপনি আপনার Post টিকে Edit করুন ।

Go to Link