trik membuat auto number dengan css

Trik Membuat Auto Number Dengan CSSAuto number merupakan penomoran otomatis yang berfungsi untuk memberikan

urutan informasi agar pembaca memahami pesan apa yang ingin disampaikanoleh si pembuat website. Biasanya Auto number dibuat dengan bahasapemograman seperti PHP atau pemograman web lainnya. Kali ini saya akanmemberikan trik mudah membuat auto number dengan menggunakan CSS.

11/3/2014 Visit our website: www.dumetschool.com 2

Caranya adalah dengan menggunakan sebuah property counter-increament yang berfungsi menambah urutan angka otomatis mengikuti banyaknya konten. Padalatihan ini saya akan menerapkan fungsi auto number pada elemen figcaption yang digunakan untuk menampilkan informasi setiap gambar pada sebuah konten.

Baiklah untuk lebih memahami, buatlah dokumen HTML dan ketik kode sepertiberikut:


Simpan dengan nama index.html. Pada kode diatas terdapat 2 elemen figure yang berisikan gambar dan caption. Untuk melihat hasil maksimal buatlah 6 elemenfigure. Kemudian buatlah style seperti berikut:


Dalam pembuatan auto number ini ada beberapa style yang perlu diperhatikanyaitu:

1. body: mendefinisikan fungsi reset counter dengan nama count-figure (namacounter)

2. figcaption:after: mendefinisikan fungsi penambahan otomatis yang akanditampilkan pada akhir teks.

• Karya murid: http://karyamurid.com/jangandihapus/figure_counter/

• Download: https://www.dropbox.com/s/c1sqq2zusjqw7uj/figure_counter.zip?dl=1


http://karyamurid.com/jangandihapus/figure_counter/

https://www.dropbox.com/s/c1sqq2zusjqw7uj/figure_counter.zip?dl=1

trik membuat auto number dengan css

Design