CSS Counter Part II

Hallo teman-teman pada kesempatan kali ini saya akan membahas cara penggunaan CSS Counter Part II. Sebelumnya untuk penjelasan mengenai css counter sudah saya bahas pada materi CSS Counter Part I silahkan teman-teman lihat jika belum tahu. Untuk yang sudah mengetahuinya kita lanjut pada tahap selanjutnya.

Disini saya akan membuat css counter yang berbeda pada materi sebelumnya, kalau yang sebelumnya hanya penomoran standar kalau kali ini penomoran dan juga ada sub-sub nomor didalamnya.

Baca artikel sebelumnya : CSS Counter Part I

Oke agar lebih memahaminya langsung saja tanpa panjangan lebar lagi, pertama-tama seperti biasa siapkan text-editornya dan browsernya lalu ketik script HTML dibawah ini kedalam text-editor yang teman-teman gunakan :

<h1>Tutorial HTML Dan CSS :</h1>
<h2>Tutorial HTML</h2>
<h2>Tutorial CSS</h2>

<h1>Tutorial Framework CSS</h1>
<h2>Bootstrap</h2>
<h2>Foundation</h2>

<h1>Tutorial Framework PHP</h1>
<h2>Codeigniter</h2>
<h2>Laravel</h2>

Jika sudah simpan file htmlnya dan penamaan filenya terserah teman-teman intinya jangan lupa extensionnya harus .html, kemudian langkah selanjutnya teman-teman masukan script CSS dibawah ini dan jangan lupa extensionnya untuk css adalah .css :

body {
    counter-reset: section;
}

h1 {
    counter-reset: subsection;
}

h1::before {
    counter-increment: section;
    content: "Nomor " counter(section) ". ";
}

h2::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}

Jika script HTML dan CSS nya sudah silahkan teman-teman simpan dan jalankan di browser yang teman-teman gunakan. Jika sudah maka hasilnya pada browser akan menjadi seperti pada gambar dibawah ini :

Oke jika hasil yang didapat sudah seperti pada gambar diatas maka teman-teman dinyatakan telah berhasil dalam membuat CSS Counter Part II.

Sekian pembahasan singkat tentang penggunaan CSS Counter Part II ini semoga dapat bermanfaat bagi teman-teman. Dan jangan lupa tunggu part-part selanjutnya.

Terimakasih

Kategori