Cara Mengganti Tag OL Angka ke Romawi di Template Blogger
Kali ini saya akan menjelaskan tutorial bagaimana cara mengganti (mengubah) tag Ordered List (ol) dari angka biasa menjadi angka romawi di Template Blogger.
Jika bingung, tampilannya seperti ini:
Pada dasarnya, ketika kita membuat daftar (list), - dimana tag atribut yang digunakan adalah <li> dan </li> pada HTML akan menampilkan titik-titik hitam atau angka berurutan ke bawah.
Pastinya, diperlukan atribut tambahan seperti tag Ordered List (ol) untuk membungkus tag <li> tersebut. Contohnya:
Contoh penggunaan List <li> yang dibungkus oleh Ordered List <ol> menurut koding di atas:
Yang ditampilkan adalah urutan nomor berurutan ke bawah, kan? Kalau pun bukan, pasti titik-titik hitam (Bullets).
Selanjutnya, yang menjadi pertanyaan utama kita kali ini adalah bagaimana caranya mengubah titik hitam atau angka berurutan tersebut menjadi angka romawi? Huruf abjad besar menurun, atau nomor berbahasa Arab? Jawabannya, gampang sekali...
Dibutukan pemahaman dasar HTML dan CSS untuk mencoba/menerapkan tutorial kali ini. Jadi, hati-hati ya :)
Blogger > Tema > Edit HTML
Simpan kode di bawah ini, di atas kode </style> atau ]]></b:skin>
Terakhir silakan perubahan tersebut dengan mengetuk Save Template.
Kalau kode .post-body ol pada list-style sudah terisi dengan teks inherit, initial atau lainnya (memang bawaan tema dari desainer aslinya), cukup ganti teks tersebut dengan teks upper-roman.
Kalau ingin disesuaikan dengan huruf abjad berukuran besar, bisa menggunakan kode CSS di bawah ini:
Jika ingin menampilkan angka berbahasa Arab, ya cukup diganti saja teks upper-alpha dengan teks arabic-indic.
Jika ingin mencoba tutorial ini, pastikan kode .post-body ol hanya satu buah di dalam Template Blogger. Artinya, jangan Double.
Itulah cara mengganti (mengubah) tag Ordered List (ol) dari angka biasa menjadi angka romawi di Blogger Templates.*
Jika bingung, tampilannya seperti ini:
 |
| Romawi |
Pada dasarnya, ketika kita membuat daftar (list), - dimana tag atribut yang digunakan adalah <li> dan </li> pada HTML akan menampilkan titik-titik hitam atau angka berurutan ke bawah.
Pastinya, diperlukan atribut tambahan seperti tag Ordered List (ol) untuk membungkus tag <li> tersebut. Contohnya:
<ol>
<li> Teks di Sini </li>
<li> Teks di Sini </li>
<li> Teks di Sini </li>
<li> Teks di Sini </li>
<li> Teks di Sini </li>
</ol>Contoh penggunaan List <li> yang dibungkus oleh Ordered List <ol> menurut koding di atas:
- Teks di Sini
- Teks di Sini
- Teks di Sini
- Teks di Sini
- Teks di Sini
Yang ditampilkan adalah urutan nomor berurutan ke bawah, kan? Kalau pun bukan, pasti titik-titik hitam (Bullets).
Selanjutnya, yang menjadi pertanyaan utama kita kali ini adalah bagaimana caranya mengubah titik hitam atau angka berurutan tersebut menjadi angka romawi? Huruf abjad besar menurun, atau nomor berbahasa Arab? Jawabannya, gampang sekali...
Cara Mengganti Tag OL Angka ke Romawi di Template Blogger
Dibutukan pemahaman dasar HTML dan CSS untuk mencoba/menerapkan tutorial kali ini. Jadi, hati-hati ya :)
Blogger > Tema > Edit HTML
Simpan kode di bawah ini, di atas kode </style> atau ]]></b:skin>
.post-body ol{
list-style: upper-roman
}Terakhir silakan perubahan tersebut dengan mengetuk Save Template.
Kalau kode .post-body ol pada list-style sudah terisi dengan teks inherit, initial atau lainnya (memang bawaan tema dari desainer aslinya), cukup ganti teks tersebut dengan teks upper-roman.
CSS Abjad dan Angka Arab
Kalau ingin disesuaikan dengan huruf abjad berukuran besar, bisa menggunakan kode CSS di bawah ini:
.post-body ol{
list-style: upper-alpha
} |
| upper-alpha |
Jika ingin menampilkan angka berbahasa Arab, ya cukup diganti saja teks upper-alpha dengan teks arabic-indic.
.post-body ol{
list-style: arabic-indic
} |
| arabic-indic |
Jika ingin mencoba tutorial ini, pastikan kode .post-body ol hanya satu buah di dalam Template Blogger. Artinya, jangan Double.
Itulah cara mengganti (mengubah) tag Ordered List (ol) dari angka biasa menjadi angka romawi di Blogger Templates.*
Thnks sgt bermanfaat
ReplyDelete