How to Add Custom List to Your Blogger Post ?

1. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia recusandae, saepe repudiandae ab neque error quod itaque placeat et, veritatis sed, delectus reiciendis praesentium eum soluta magnam vel repellendus dignissimos quidem.
2. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci voluptatibus libero nisi obcaecati atque necessitatibus? Commodi harum pariatur consequatur facilis?
   
   Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident, aliquam!
3. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci minima dolor, reiciendis, sed necessitatibus dicta labore esse sint tempore odit eum dolore facere, id quas doloribus.
4. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor itaque tempore natus, magni sapiente nesciunt rerum facilis optio quaerat eligendi.
5. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda magni tempora provident ullam veniam, in rem inventore itaque ex doloremque cum voluptatibus aliquid quam iusto enim maxime dicta consequatur!

Step:1

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

<style>
  .list-container ol {
  max-width: 600px;
  font-family: "Roboto", sans-serif;
  margin: 32px auto;
  line-height: 1.8;
  list-style: none;
  counter-reset: list-counter;
}

.list-container img {
  width: 100%;
  border-radius: 8px;
  margin: 20px 0;
}

.list-container li {
  margin: 20px 32px;
  position: relative;
}

.list-container li::before {
  content: counter(list-counter);
  counter-increment: list-counter;
  position: absolute;
  top: 0;
  left: -50px;
  border: 2px solid #e72c2c;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  background: #fff;
  transition: all 200ms ease;
}

.list-container li:hover::before {
  background: #e72c2c;
  color: #fff;
}

.list-container li::after {
  content: "";
  position: absolute;
  left: -34px;
  top: 42px;
  height: calc(100% - 30px);
  width: 1px;
  background: #000;
}

.list-container li:last-child::after {
  height: calc(100% - 50px);
}
</style>

Step:2

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

<div class="list-container">
      <ol>
        <li>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia
          recusandae, saepe repudiandae ab neque error quod itaque placeat et,
          veritatis sed, delectus reiciendis praesentium eum soluta magnam vel
          repellendus dignissimos quidem.
        </li>
        <li>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci
          voluptatibus libero nisi obcaecati atque necessitatibus? Commodi harum
          pariatur consequatur facilis?
          <img
            src="https://images.pexels.com/photos/3601425/pexels-photo-3601425.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
            alt=""
          />
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident,
          aliquam!
        </li>
        <li>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci
          minima dolor, reiciendis, sed necessitatibus dicta labore esse sint
          tempore odit eum dolore facere, id quas doloribus.
        </li>
        <li>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor itaque
          tempore natus, magni sapiente nesciunt rerum facilis optio quaerat
          eligendi.
        </li>
        <li>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda
          magni tempora provident ullam veniam, in rem inventore itaque ex
          doloremque cum voluptatibus aliquid quam iusto enim maxime dicta
          consequatur!
        </li>
      </ol>
    </div>

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

Go to Link