CSS Counter Part II

Hallo teman-teman di kesempatan kali ini saya akan membahas cara pemakaian CSS Counter Part II. Sebelumnya bagi penjelasan mengenai css counter telah saya bahas di bahan CSS Counter Part I silahkan teman-teman lihat sekiranya belum tahu. Bagi yang telah mengetahuinya kita lanjut di tahap berikutnya.

Disini saya akan merancang css counter yang berbeda di bahan sebelumnya, kalau yang sebelumnya hanya penomoran standar kalau kali ini penomoran dan pun ada sub-sub nomor didalamnya.

Baca artikel sebelumnya : CSS Counter Part I

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

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

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

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

Sekiranya telah simpan file htmlnya dan penamaan filenya terserah teman-teman intinya jangan lupa extensionnya mesti .html, kemudian langkah berikutnya teman-teman masukan script CSS dibawah ini dan jangan lupa extensionnya bagi css yakni .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)  ;
}

Sekiranya script HTML dan CSS nya telah silahkan teman-teman simpan dan jalankan di browser yang teman-teman gunakan. Sekiranya telah karenanya hasilnya di browser akan menjadi seperti di gambar dibawah ini :

Oke sekiranya hasil yang didapat telah seperti di gambar diatas karenanya teman-teman dinyatakan telah berhasil pada merancang CSS Counter Part II.

Demikianlah pembahasan singkat mengenai pemakaian CSS Counter Part II ini semoga dapat bermanfaat untuk teman-teman. Dan jangan lupa tunggu part-part berikutnya.

Terimakasih

Sumber https://kursuswebsite.org