-->
MqZ6MWB9MGBcNqBdMGBaNaJ6M8IeyCoFADMlNWZ=
6074645612605633477
Cara Custom List Numbering pada Postingan Blog

Cara Custom List Numbering pada Postingan Blog

Bagaimana Cara Custom List Numbering pada Postingan Blog 2020
Cara Membuat List Numbering pada Postingan Blog

Setiap blogger ingin menjaga postingan unik dalam segala hal harus menjadi tujuan setiap blogger. Jadi, hari ini di artikel ini saya akan membagikan tentang 4 Style List Numbering yang disesuaikan (Gaya Daftar Berurutan). Daftar nomor (ol) adalah bagian penting dari artikel yang bagus dan kita dapat membuat daftar bernomor menggunakan “Daftar Bernomor” alat.

Daftar bernomor dicapai melalui kode HTML dari “ daftar yang dipesan ”. Anda tidak perlu khawatir tentang penambahan HTML, karena editor melakukannya untuk Anda dengan menggunakan alat ini. Jika Anda membuka tab HTML, Anda ’ akan melihat bahwa daftar yang Anda buat tampak seperti ini:

<ol>
<li>The content of the 1st. element</li>
<li>The content of the 2nd. element</li>
<li>The content of the 3rd. element</li>
<li>The content of the 4th. element</li>
<li>The content of the 5th. element</li>
etc…
</ol>

Alat ini akan secara otomatis memberi nomor pada setiap elemen dari daftar yang mengambil “ pesanan ”, maka nama “ daftar yang dipesan dalam HTML ”. Di setiap elemen, nomor dibuat secara berurutan (dari 1 dan seterusnya), meskipun Anda tidak dapat melihatnya di kode HTML.

Cara Custom List Numbering pada Postingan Blogger

  1. Buka Blogger >> Tema >> Edit HTML .
  2. Untuk mempermudah pencarian gunakan CTRL+F
  3. Cari kode ]]></b:skin> dan tempelkan kode tepat di atas kode tersebut.

Custom List Numbering (Style 1)


ol.steps {
  clear: both;
  list-style: none;
  padding-left: 2%;
}
ol.steps li {
  margin: 2em 0;
  padding-top: 1em;
  display: block;
  position: relative;
  counter-increment: inst;
}
ol.steps li::before {
  content: counter(inst);
  
  background: rgba(255, 150, 0, 0.35);
  color: #fff;
  
  font-size: 1em;
  font-weight: 700;
  font-style: italic;
  text-shadow: 1px 1px rgba(255, 150, 0, 0.5);
  
  border-radius: 0 0.675em 0.675em 0;
  font-size: 1.5em;
  text-align: center;
  
  padding-top: 0;
  padding-left: 2.25%;
  left: -5%;
  top: -0.65em;
  height: 1.35em;
  width: 1.35em;
  position: absolute;
  
  transition: all 0.2s ease-in-out;
  
  z-index: -1;
}
@media (min-width: 33em) {
  ol.steps li:before {
    border-radius: 50%;
    font-size: 1.5em;
    height: 1.35em;
    margin-left: 2.5%;
    padding-left: 0;
    padding-top: 0;
    top: -0.15em;
    width: 1.35em;
    z-index: -1;
  }
}
Style 1
  1. Yes! Now we can customized Ordered list style in blogger.
  2. Yes! Now we can customized Ordered list style in blogger.
  3. Yes! Now we can customized Ordered list style in blogger.

Format Penulisan HTML bukan Compose.


<ol class="steps">
<li>Yes! Now we can customized Ordered list style in blogger.</li>
<li>Yes! Now we can customized Ordered list style in blogger.</li>
<li>Yes! Now we can customized Ordered list style in blogger.</li>
</ol>

Custom List Numbering (Style 2)


ol.style1 {
     counter-reset:numbers;
     list-style:none;
     padding:0;
     }
ol.style1 > li {
     counter-increment:numbers;
     margin-bottom:25px;
     position:relative;
     margin-left:55px;
     }
ol.style1 > li img {
     margin:15px 0;
     width:100%;
     display:block;
     }
ol.style1 > li #box-download img {
     margin:0;}
ol.style1 > li::before {
     content:counter(numbers);
     line-height:23px;
     font-family:'Google Sans';
     font-size:14px;
     font-weight:bold;
     left:-45px;
     width:32px;
     height:32px;
     text-align:center;
     position:absolute;
     color:#222;
     border:3px solid rgba(57, 60, 155, 0.3);
     border-radius:4px;top:-2px;
     }
ol.standard li, ol.style2 li, ol.style0 li, ol.style1 li ul li {
     margin-bottom:15px;
     }
ol.style1 li ul {
     margin-top:15px;
     }
.dark-mode ol.style1 > li::before {
     color:rgb(80, 103, 197);
     border-color:rgba(57, 60, 155, 0.3);
     }
Style 2
  1. Lorem ipsum dolor sit amet.
  2. Tempore nostrum laborum sequi obcaecati.
  3. Illo iusto dolores magnam ratione!
  4. Amet odio rerum alias impedit!

Format Penulisan HTML bukan Compose.


<ol class="style1">
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Tempore nostrum laborum sequi obcaecati.</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li>Amet odio rerum alias impedit!</li>
</ol>

Custom List Numbering (Style 3)


ol.steps2 {
  max-width: 350px;
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 40px;
}
ol.steps2 li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
}
ol.steps2 li::before {
  content: counter(my-awesome-counter);
  color: #fcd000;
  font-size: 1.5rem;
  font-weight: bold;
  position: absolute;
  --size: 32px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  transform: rotate(-10deg);
  background: black;
  border-radius: 50%;
  text-align: center;
  box-shadow: 1px 1px 0 #999;
}
Style 3
  1. Details & Summary behave a lot like the accordion design pattern, only just the basics. Could you layer on functionality, like a group of details elements in which only one can be open at once?
  2. Can you progressively enhance Details & Summary to add custom styling and animation?
  3. These elements don't work in Edge. You could have a look at the polyfills out there and perhaps build your own if you'd like to have a go at it.

Format Penulisan HTML bukan Compose.


<ol class="steps2">
  <li>Details &amp; Summary behave a lot like the accordion design pattern, only just the basics. Could you layer on functionality, like a group of details elements in which only one can be open at once?</li>
  <li>Can you progressively enhance Details &amp; Summary to add custom styling and animation?</li>
  <li>These elements don't work in Edge. You could have a look at the polyfills out there and perhaps build your own if you'd like to have a go at it.</li>
</ol>

Custom List Numbering (Style 4)


ol.steps3 {
  list-style: none;
  counter-reset: my-awesome-counter;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
ol.steps3 li {
  counter-increment: my-awesome-counter;
  display: flex;
  width: 50%;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
ol.steps3 li::before {
  content: "0" counter(my-awesome-counter);
  font-weight: bold;
  font-size: 3rem;
  margin-right: 0.5rem;
  font-family: 'Abril Fatface', serif;
  line-height: 1;
}
Style 4
  1. Lorem ipsum dolor sit amet.
  2. Tempore nostrum laborum sequi obcaecati.
  3. Illo iusto dolores magnam ratione!
  4. Amet odio rerum alias impedit!

Format Penulisan HTML bukan Compose.


 <ol class="steps3">
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Tempore nostrum laborum sequi obcaecati.</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li>Amet odio rerum alias impedit!</li>
</ol>

Penutup:

Jadi panduan di atas adalah tentang  “ Bagaimana Cara Custom List Numbering pada Postingan Blog ” Saya berharap, Anda akan menyukai Style-Style di atas yang dapat saya bagikan dan Anda akan dengan mudah menambahkan Style ini ke blog anda. Jika masalah tetap ada setelah mengikuti semua langkah, Silakan tanyakan kepada sata melalui komentar di bawah.
Terima kasih! Semoga Bermanfaat!

2 comments

  1. I'am
    Terima kasih
  2. PayuBaco
    Terima kasih bang izin share.
Tinggalkan komentar sesuai topik artikel. Komentar di luar topik tidak disarankan (terutama disertai link aktif).
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code code

© ‧ Tomy Tech ~ All rights reserved.