Cara Custom List Number di Blogger ala Sudar Blogger

Blogger
Cara Custom List Number di Blogger ala Sudar Blogger - Hallo sahabat Jendral Kancil, Pada Artikel yang anda baca kali ini dengan judul Cara Custom List Number di Blogger ala Sudar Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Custom List Number di Blogger ala Sudar Blogger
link : Cara Custom List Number di Blogger ala Sudar Blogger

Baca juga


Cara Custom List Number di Blogger ala Sudar Blogger

Cara Custom List Number di Blogger ala Sudar Blogger

Assalamualaikum lama juga tidak post artikel mengenai tutorial Blogger. Nah sekarang ini saya akan share Custom Number di Blogger, mungkin kalian bosen dengan list Number di Blogger kaya gitu aja pasti bosan ya.

Perlu kalian tau kalau sekarang Number List diblogger ini dapat kalian Custom menjadi lebih bagus lagi. Dengan Number List ini ternyata akan membuat tampilan artikel kamu lebih bagus dan tentu beda dengan yang lain.

Nah kita langsung aja ya Guys ke tutorial nya daripada basa - basi, jangan lupa simak artikel ini sampai akhir agar bisa di terapkan pada blog kalian.


Cara Custom List Number di Blogger ala Sudar Blogger

Agar untuk menerapkan hal yang harus dilakukan adalah dengan masuk dulu ke akun Blogger kamu atau akun Gmail kamu, sekarang ikuti aja tutorial dibawah ini :


  1. Silahkan login ke akun Blogger.com sobat.
  2. Pada menu dashboard, pilih Template ￫ Edit HTML
  3. Salin kode CSS berikut ini dan letakkan diatas kode ]]></b:skin> template.
    /* Custom List Style Numbers */
    .Blog article.post ol.style1 {
         counter-reset:numbers;
         list-style:none;
         padding:0;
         }
    .Blog article.post ol.style1 > li {
         counter-increment:numbers;
         margin-bottom:25px;
         position:relative;
         margin-left:55px;
         }
    .Blog article.post ol.style1 > li img {
         margin:15px 0;
         width:100%;
         display:block;
         }
    .Blog article.post ol.style1 > li #box-download img {
         margin:0;}
    .Blog article.post 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;
         }
    .Blog article.post ol.standard li, .Blog article.post ol.style2 li, .Blog article.post ol.style0 li, .Blog article.post ol.style1 li ul li {
         margin-bottom:15px;
         }
    .Blog article.post ol.style1 li ul {
         margin-top:15px;
         }
    .dark-mode .Blog article.post ol.style1 > li::before {
         color:rgb(80, 103, 197);
         border-color:rgba(57, 60, 155, 0.3);
         }

    Keterangan:
    Semakin besar nilai border-radius maka border nomor akan menjadi lingkaran.

  4. Ubah desainnya sesuai keterangan jika ingin berbeda dengan style diatas.
  5. Jikalau sudah, lanjutkan klik tombol Simpan untuk menerapkan perubahan.


Pada langkah ini, kalian belum selesai sepenuhnya membuat style "List Numbers" seperti yang admin gunakan. Jika ingin menerapkannya di postingan, sobat bisa ikuti tutorial dibawah ini.

Sekarang anda sudah selesai menambahkan CSS pada template, untuk memanggil kode tersebut menggunakan kode HTML di bawah ini.

Kode Pemanggil

Sisipkan kode HTML berikut ini pada artikel atau postingan sobat. Salin dan letakkan kodenya di tab mode penulisan HTML bukan Compose.

<ol class="style1">
<li>..........</li>
<li>.........</li>
</ol>

Keterangan:
Kode yang ditandai adalah class pemanggil dari kode CSS style "List Number".

Demo List Numbers
  1. Ini adalah contoh style list number
  2. Ini adalah contog dari style list number

Ada beberapa style Number List yang bisa kamu pakai dengan mengubah CSS nya

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>


Nah itulah Cara Custom List Number di Blogger, semoga bermanfaat untuk kalian semua. 



Demikianlah Artikel Cara Custom List Number di Blogger ala Sudar Blogger

Sekianlah artikel Cara Custom List Number di Blogger ala Sudar Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Custom List Number di Blogger ala Sudar Blogger dengan alamat link https://jekancil.blogspot.com/2020/12/cara-custom-list-number-di-blogger-ala.html