Custom Style List Numbering Blogger - Merubah Tampilan List Ordered atau Penomoran dengan HTML

Custom List Numbering pada Postingan Blog - List Number adalah sebuah fitur yang bisa kita gunakan untuk membuat list angka atau tulisan yang digunakan untuk membuat sebuah numbering blogger menjadi lebih terstruktur dan rapi.

List ini biasa digunakan oleh seorang blogger yang membagikan tutorial atau memberi tips. Pada saat ini banyak sekali hal yang bisa kita lakukan untuk memperindah list number yang disediakan oleh google, berikut ini contoh custom list number.

Daftar Isi Artikel:

Pengertian Tag OL

Tag <ol> dalam HTML merupakan singkatan dari “ordered list” dan digunakan untuk membuat daftar yang urutan itemnya penting. Tidak seperti tag <ul> (unordered list) digunakan untuk daftar tidak berurutan, yang menyajikan item dalam format poin-poin tanpa urutan bawaan, tag <ol> menghasilkan daftar bernomor secara default.

Tujuan Tag <ol>, Tujuan utama tag <ol> adalah untuk menampilkan daftar item dalam urutan tertentu, yang dapat menjadi penting saat menyampaikan langkah-langkah dalam suatu proses, instruksi, atau pemeringkatan. Setiap item dalam daftar <ol> biasanya dibungkus dalam tag <li> (list item) atau item daftar.

Sintaks Dasar Tag <ol>, Berikut adalah sintaksis dasar tag <ol>, Struktur sederhana ini menghasilkan daftar bernomor di mana setiap item diurutkan secara berurutan:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Pentingnya Daftar Berurut Daftar berurutan sangat penting untuk pengalaman pengguna, terutama saat kejelasan dalam urutan diperlukan. Daftar tersebut membantu pembaca mengikuti urutan tertentu, sehingga memudahkan pemahaman hubungan antar item.

Atribut Tag `<ol>`

Tag <ol> menawarkan beberapa atribut yang meningkatkan fungsionalitas dan tampilannya. Memahami atribut ini memungkinkan Anda untuk menyesuaikan daftar agar lebih sesuai dengan kebutuhan Anda.

Atribut Jenis, Atribut type menentukan jenis penanda yang akan digunakan untuk item daftar. Atribut ini dapat diatur ke “1” (urutan numerik default), “A” (huruf kapital), “a” (huruf kecil), “I” (angka Romawi kapital), atau “i” (angka Romawi huruf kecil). Berikut adalah contoh penggunaan angka Romawi:

<ol type="I">
  <li>First item</li>
  <li>Second item</li>
</ol>

Atribut Awal, Atribut start menentukan nomor awal untuk daftar. Ini berguna saat daftar Anda merupakan bagian dari urutan yang lebih besar. Misalnya:

<ol start="5">
  <li>Item five</li>
  <li>Item six</li>
</ol>

Atribut Terbalik, Atribut terbalik membalik urutan penomoran daftar, mulai dari angka tertinggi hingga 1. Ini sangat berguna untuk hitungan mundur atau saat memprioritaskan item secara terbalik:

<ol reversed>
  <li>Top item</li>
  <li>Second item</li>
</ol>

Contoh List Numbering

Berikut ini contoh list numbering default blog :

Tampilan ini merupakan contoh dari list numbering.
This view is an example of a numbering list.
Diese Ansicht ist ein Beispiel für eine Nummerierungsliste.

Nah diatas merupakan contoh bawaan blogger, jika sobat sudah bosan atau ingin memakai variasi yang lain sobat bisa mengikuti tutorial dibawah ini. Kami menyediakan 5 variasi yang bisa sobat gunakan untuk memperindah tampilan blog sobat.

Custom List Number

Berikut jenis custom list numbering pada postingan blog yang bisa sobat gunakan.

Style Tipe 1

Pada Style 1 ini, kalian harus menambahkan CSS dan kemudian selanjutnya menggunakan kode HTML.

Kode CSS

Masuk dan Login ke dashboard Blogger.
Buka bagian Tema dan klik edit HTML.
Kemudian cari tag </style>.
Salin kode CSS di bawah ini dan letakkan di atas tag </style>.

<style> 
/* Custom List Numbering style1*/
 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: 'Noto Sans',sans-serif;
     font-size: 14px;
     font-weight: 700;
     left: -45px;
     width: 32px;
     height: 32px;
     text-align: center;
     position: absolute;
     color: #eb3b5a;
     border: 5px solid rgba(42,203,186,1.0);
     border-radius: 50px;
     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;
}
 .darkMode ol.style1 > li::before {
     color:rgb(126, 255, 245);
     border-color:rgba(50, 255, 126, 1.0);
}
 </style>

Ubah mode gelap menggunakan CSS .darkMode sesuaikan dengan CSS template kalian.
Ubah kode warna yang ditandai pada CSS sesuai kebutuhan kalian.
Kunjungi Awesome Color untuk menemukan kode warna yang diinginkan.
Jangan lupa, klik Simpan dan selesai.

Kode HTML

Gunakan kode HTML berikut ini pada postingan artikel kalian.

Sekarang ketika Anda akan menulis ✍️ postingan lalu salin dan tempel kode di bawah ini untuk mendapatkan desain daftar penomoran style1.

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

Style Tipe 2

Kode CSS

Sama seperti di atas buka dashboard Blogger.
Buka bagian Tema dan klik edit HTML.
Sekarang cari kode </style> menggunakan tombol + .
Salin kode CSS di bawah ini, dan tempelkan di atas tag </style> tersebut.

<style> 
/* Custom List Numbering style2*/
 ol.style2{
    counter-reset:numbers;
    list-style:none;
    padding:0
}
ol.style2 > li{
    counter-increment:numbers;
    margin-bottom:25px;
    position:relative;
    margin-left:55px
}
ol.style2 > li img{
    margin:15px 0;
    width:100%;
    display:block
}
ol.style2 > li::before{
    content:counter(numbers);
    line-height:23px;
    font-family:'var(--fontB)';
    font-size:14px;
    font-weight:bold;
    left:-45px;
    width:32px;
    height:32px;
    text-align:center;
    position:absolute;
    color: #9c27b0;
    border:5px solid rgb(254 202 87);
    border-radius:50% 0 50% 50%;
    top:-2px
}
ol.style2 li ul li{
    margin-bottom:15px
}
ol.style2 li ul{
    margin-top:15px
}
.darkMode ol.style2 > li::before{
    color:rgb(255, 242, 0);
     border-color:rgba(24, 220, 255, 1.0)
}
 </style>

Ubah CSS Mode Gelap .darkMode sesuai CSS template kalian.
Ubah kode warna yang ditandai pada CSS sesuai kebutuhan kalian.
Kunjungi Awesome Color untuk menemukan kode warna yang diinginkan.
Jangan lupa, klik Simpan dan selesai.

Kode HTML

Gunakan kode HTML berikut ini pada postingan artikel kalian.

Sekarang ketika Anda akan menulis ✍️ postingan lalu salin dan tempel kode di bawah ini untuk mendapatkan desain daftar penomoran style2.

  
<ol class="style2">
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
</ol>

Sekarang setelah mengikuti langkah-langkah di atas saya harap kalian memahami cara menggunakan gaya daftar penomoran khusus. Jika Anda memiliki pertanyaan, silakan hubungi kami.

Sumber : https://www.techaadi.eu.org/2021/12/how-to-add-custom-numbering-list-style.html

Gaya Simpel dan Responsive Lain

Style Tipe 1

This is an example of this article.
This article contains a tutorial on blogger tips.
I hope you can understand the contents of this tutorial.
keep up the spirit and don't forget to take a break!

Untuk membuat list number seperti diatas yang harus sobat lakukan ialah :

Buka Blogger >> Tema >> Edit HTML.
Silahkan cari kode ]]></b:skin> untuk mempermudah silahkan cari dengan cara + .
Silahkan paste kode CSS dibawah ini tepat diatasnya.

 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);
     }

Untuk penerapannya silahkan gunakan kode dibawah ini pada mode HTML

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

Style Tipe 2

questo è un esempio di questo articolo.
Questo articolo contiene un tutorial sui suggerimenti dei blogger.
Spero che tu possa capire il contenuto di questo tutorial.

Untuk membuat list number seperti diatas yang harus sobat lakukan ialah :

Buka Blogger >> Tema >> Edit HTML.
Silahkan cari kode ]]></b:skin> untuk mempermudah silahkan cari dengan cara CTRL + F.
Silahkan paste kode CSS dibawah ini tepat diatasnya.

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

Untuk penerapannya silahkan gunakan kode dibawah ini pada mode HTML

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

Style Tipe 3

Dies ist ein Beispiel für diesen Artikel.
Dieser Artikel enthält ein Tutorial zu Blogger-Tipps.
Ich hoffe, Sie können den Inhalt dieses Tutorials verstehen.
Halten Sie den Geist aufrecht und vergessen Sie nicht, eine Pause einzulegen!

Untuk membuat list number seperti diatas yang harus sobat lakukan ialah :

Buka Blogger >> Tema >> Edit HTML.
Silahkan cari kode ]]></b:skin> untuk mempermudah silahkan cari dengan cara + .
Silahkan paste kode CSS dibawah ini tepat diatasnya.

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

Untuk penerapannya silahkan gunakan kode dibawah ini pada mode HTML.

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

Style Tipe 4

este es un ejemplo de este artículo.
Este artículo contiene un tutorial sobre consejos de blogger.
Espero que pueda comprender el contenido de este tutorial.

Untuk membuat list number seperti diatas yang harus sobat lakukan ialah :

Buka Blogger >> Tema >> Edit HTML.
Silahkan cari kode ]]></b:skin> untuk mempermudah silahkan cari dengan cara + .
Silahkan paste kode CSS dibawah ini tepat diatasnya.

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

Untuk penerapannya silahkan gunakan kode dibawah ini pada mode HTML

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

Sumber : https://www.tomytech.eu.org/2020/12/cara-custom-list-numbering-pada-.html

Style List by ICloudice

Berikut ini contoh custom list numbering blogger by ICloudice.com

Untuk mengubah desain blog menggunakan HTML di Blogger, Anda bisa mengikuti langkah-langkah berikut:

Login ke Blogger
Pilih blog yang akan diperbarui
Klik Tema di menu sebelah kiri
Klik Lainnya di bagian “Tema saya”
Edit HTML
Lakukan perubahan
Klik Simpan

Untuk membuat list number keren seperti diatas yang harus sobat lakukan ialah :

Login ke blogger menggunakan akun google milikmu
Selanjutnya pergi ke menu theme di blogger dan pilih lagi menu edit HTML
Selanjutnya salin seluruh source kode javascript di bawah ini kemudian letakkan di atas kode </head>

<script>/*<![CDATA[*/ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('T C=["\\j\\9\\J\\a\\8","\\l\\c\\8\\g\\9\\8\\U\\a\\8\\t\\8\\e\\9","\\9\\J\\k\\8","\\9\\8\\s\\9\\x\\l\\j\\j","\\9\\8\\s\\9\\M\\b\\e\\9\\8\\e\\9","\\b\\a\\m\\c\\g\\o\\a\\q\\y\\l\\b\\u\\e\\9\\8\\c\\r\\c\\8\\j\\8\\9\\d\\e\\u\\t\\h\\a\\f\\e\\8\\r\\o\\8\\f\\v\\o\\9\\d\\F\\m\\V\\h\\a\\f\\j\\9\\r\\j\\9\\J\\a\\8\\d\\e\\b\\e\\8\\h\\t\\g\\c\\v\\f\\e\\d\\z\\h\\k\\g\\n\\n\\f\\e\\v\\d\\z\\h\\A\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\y\\k\\b\\j\\f\\9\\f\\b\\e\\d\\c\\8\\a\\g\\9\\f\\O\\8\\h\\l\\b\\u\\e\\9\\8\\c\\r\\f\\e\\l\\c\\8\\t\\8\\e\\9\\d\\e\\u\\t\\h\\k\\g\\n\\n\\f\\e\\v\\r\\f\\e\\a\\f\\e\\8\\r\\j\\9\\g\\c\\9\\d\\W\\D\\k\\s\\h\\A\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\d\\e\\b\\9\\G\\d\\a\\g\\j\\9\\r\\l\\o\\f\\a\\n\\H\\y\\k\\g\\n\\n\\f\\e\\v\\r\\w\\b\\9\\9\\b\\t\\d\\F\\D\\k\\s\\h\\A\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\d\\d\\w\\8\\p\\b\\c\\8\\y\\l\\b\\e\\9\\8\\e\\9\\d\\l\\b\\u\\e\\9\\8\\c\\G\\e\\u\\t\\H\\i\\I\\m\\I\\h\\n\\f\\j\\k\\a\\g\\J\\d\\p\\a\\8\\s\\h\\g\\a\\f\\v\\e\\r\\f\\9\\8\\t\\j\\d\\l\\8\\e\\9\\8\\c\\h\\X\\u\\j\\9\\f\\p\\J\\r\\l\\b\\e\\9\\8\\e\\9\\d\\l\\8\\e\\9\\8\\c\\h\\k\\b\\j\\f\\9\\f\\b\\e\\d\\g\\w\\j\\b\\a\\u\\9\\8\\h\\9\\b\\k\\d\\z\\h\\Y\\f\\n\\9\\o\\d\\B\\z\\k\\s\\h\\o\\8\\f\\v\\o\\9\\d\\B\\z\\k\\s\\h\\w\\b\\c\\n\\8\\c\\d\\F\\k\\s\\i\\j\\b\\a\\f\\n\\i\\K\\n\\8\\B\\D\\B\\D\\h\\w\\b\\c\\n\\8\\c\\r\\c\\g\\n\\f\\u\\j\\d\\D\\z\\Z\\h\\l\\b\\a\\b\\c\\d\\l\\u\\c\\c\\8\\e\\9\\M\\b\\a\\b\\c\\h\\p\\b\\e\\9\\d\\j\\t\\g\\a\\a\\i\\I\\10\\f\\c\\g\\i\\q\\g\\e\\j\\I\\P\\i\\j\\g\\e\\j\\r\\j\\8\\c\\f\\p\\h\\9\\c\\g\\e\\j\\f\\9\\f\\b\\e\\d\\w\\g\\l\\Q\\v\\c\\b\\u\\e\\n\\i\\m\\F\\j\\i\\8\\g\\j\\8\\P\\l\\b\\a\\b\\c\\i\\m\\F\\j\\i\\8\\g\\j\\8\\h\\A\\x\\E\\m\\k\\q\\d\\e\\b\\9\\G\\m\\c\\H\\i\\E\\x\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\d\\d\\w\\8\\p\\b\\c\\8\\y\\a\\8\\p\\9\\d\\z\\h\\A\\x\\E\\m\\k\\q\\m\\c\\i\\E\\x\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\d\\d\\w\\8\\p\\b\\c\\8\\y\\c\\f\\v\\o\\9\\d\\z\\h\\A\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\d\\o\\b\\O\\8\\c\\d\\d\\w\\8\\p\\b\\c\\8\\y\\w\\g\\l\\Q\\v\\c\\b\\u\\e\\n\\r\\l\\b\\a\\b\\c\\d\\K\\n\\8\\B\\D\\B\\D\\h\\l\\b\\a\\b\\c\\d\\K\\p\\p\\p\\n\\p\\l\\h\\A\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\d\\d\\g\\p\\9\\8\\c\\y\\l\\b\\e\\9\\8\\e\\9\\d\\I\\I\\h\\k\\b\\j\\f\\9\\f\\b\\e\\d\\g\\w\\j\\b\\a\\u\\9\\8\\h\\9\\b\\k\\d\\l\\g\\a\\l\\G\\B\\z\\k\\s\\i\\11\\i\\R\\k\\s\\H\\h\\w\\b\\9\\9\\b\\t\\d\\R\\k\\s\\h\\w\\b\\c\\n\\8\\c\\r\\f\\e\\a\\f\\e\\8\\r\\j\\9\\g\\c\\9\\d\\F\\k\\s\\i\\j\\b\\a\\f\\n\\i\\K\\n\\8\\B\\D\\B\\D\\h\\A\\x\\E\\m\\k\\q\\d\\e\\b\\9\\G\\m\\c\\H\\i\\E\\x\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\d\\d\\g\\p\\9\\8\\c\\y\\a\\8\\p\\9\\d\\l\\g\\a\\l\\G\\B\\z\\k\\s\\i\\x\\i\\N\\H\\h\\A\\x\\E\\m\\k\\q\\m\\c\\i\\E\\x\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\d\\d\\g\\p\\9\\8\\c\\y\\c\\f\\v\\o\\9\\d\\l\\g\\a\\l\\G\\B\\z\\k\\s\\i\\x\\i\\N\\H\\h\\A\\b\\a\\m\\c\\g\\o\\a\\q\\i\\f\\t\\v\\y\\t\\g\\c\\v\\f\\e\\r\\9\\b\\k\\d\\F\\m\\N\\8\\t\\h\\A","\\g\\k\\k\\8\\e\\n\\M\\o\\f\\a\\n","\\o\\8\\g\\n"];12 L=S[C[1]](C[0]);L[C[2]]=C[3];L[C[4]]=C[5];S[C[7]][C[6]](L)',62,65,'||||||||x65|x74|x6C|x6F|x72|x3A|x6E|x69|x61|x3B|x20|x73|x70|x63|x2E|x64|x68|x66|x53|x2D|x78|x6D|x75|x67|x62|x2F|x7B|x30|x7D|x33|_0x5b12|x35|x2A|x31|x28|x29|x27|x79|x23|rahOlJs|x43|x32|x76|x2C|x6B|x38|document|var|x45|x36|x34|x6A|x77|x25|x46|x2B|const'.split('|'),0,{}))/*]]>*/</script>

Info: Jika sudah, klik simpan template, dan kamu sudah berhasil memasang tag ol custom di blogger dengan tampilan UI

Terakhir cara penggunaan silahkan salin kode HTML di bawah ini, kemudian ubah  dengan text yang kamu inginkan

<ol class='rahlS'>
<li><!-- Type your text here --></li>
<li><!-- Type your text here --></li>
<li><!-- Type your text here --></li>
<li><!-- Type your text here --></li>
<li><!-- Type your text here --></li>
</ol>

Ulangi cara yang sama (tepatnya cara nomor 4) jika kamu ingin menampilkan tag ol tersebut.

Kode pembuat urutan daftar tersebut di gunakan saat kamu ingin menulis ataupun mempublish artikel di blogger, dan harus digunakan dalam mode HTML bukan mode Compose.

Mudah bukan untuk membuat list numbering pada postingan blog agar menjadi lebih keren, silahkan ikuti dengan seksama setiap langkah yang sudah saya bagikan. Jika dirasa ada yang perlu ditanyakan silahkan bertanya di kolom komentar. Jangan lupa untuk share jika dirasa tutorial ini bermanfaat, terima kasih dan sampai jumpa ditutorial selanjutnya.

Sumber: https://www.icloudice.com/2023/04/membuat-daftar-tag-ol-di-blogger.html

Download

Posting Komentar

Cara Berkomentar bagi yang tidak memiliki blog:
1. Klik select profile --> pilih "Name/URL".
2. Isi nama Anda dan isi dengan alamat facebook Anda.
3. Klik "Lanjutkan".
4. Ketik komentar Anda.
5. Klik "Publish".
6. Centang "CAPTCHA" yang menyatakan bahwa Anda bukan robot.
7. Klik "Publish".

Blog Tutorial

Custom Style List Numbering Blogger - Merubah Tampilan List Ordered atau Penomoran dengan HTML

Pengertian Tag OL

Atribut Tag `<ol>`

Contoh List Numbering

Style Tipe 1

Kode CSS

Kode HTML

Style Tipe 2

Kode CSS

Kode HTML

Gaya Simpel dan Responsive Lain

Style Tipe 1

Style Tipe 2

Style Tipe 3

Style Tipe 4

Style List by ICloudice

Posting Komentar

Download Font Arab Standar Al-Quran dan Font Kitab dengan Bahasa Melayu

Download Font Aksara Jawa Hanacaraka Tanpa Instal Languages

Cara Setting Page Layout Buku Saku (A6) Ms. Word Serta Membuat Cover dengan Photoshop

Download Rumus Fungsi Terbilang Rupiah di Excel Indonesia

Instal Sony Vegas Pro 13 + Crack (Full Version)

elzeno.id

Custom Style List Numbering Blogger - Merubah Tampilan List Ordered atau Penomoran dengan HTML

Pengertian Tag OL

Atribut Tag <ol>

Contoh List Numbering

Style Tipe 1

Kode CSS

Kode HTML

Style Tipe 2

Kode CSS

Kode HTML

Gaya Simpel dan Responsive Lain

Style Tipe 1

Style Tipe 2

Style Tipe 3

Style Tipe 4

Style List by ICloudice

Posting Komentar

Atribut Tag `<ol>`