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 & 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 & 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>
- Terakhir cara penggunaan silahkan salin kode HTML di bawah ini, kemudian ubah
<!-- Type your text here -->
dengan text yang kamu inginkan - Ulangi cara yang sama (tepatnya cara nomor 4) jika kamu ingin menampilkan tag ol tersebut.
<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
<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>
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