Merubah Style Ordered List

Ingin membuat Thread pertama nih.. mudah-mudahan bisa bermanfaat. Cara Merubah Style Ordered List.

Tutorial ini akan memanfaatkan sedikit trik css yaitu dengan Pseudo Element ::before.

Dalam keadaan default sebuah list ordered akan menampilkan sebagai berikut

1. Daftar satu
2. Daftar dua
3. Daftar tiga
4. Daftar empat
5. Daftar lima

Yang akan kita kerjakan adalah merubah style pada angka yang berurutan, entah itu background, border, atau yang lainnya.

1. Menambahkan Class atau Id. Pertama ada baiknya kita menambahkan atribut class atau id agar dapat menyesuaikan daftar mana yang ingin kita ubah style-nya.

Pada contoh dibawah saya menggunakan class="nice-ol"

HTML:

<ol class="nice-ol">
    <li>Daftar satu</li>
    <li>Daftar dua</li>
    <li>Daftar tiga</li>
    <li>Daftar empat</li>
    <li>Daftar lima</li>
</ol>

Setelah itu kita mulai sedikit menambahkan kode css untuk mengatur style angka pada daftar diatas.

Code:

.nice-ol {
    position: relative;
    padding-left: 32px;
    list-style-type: none;
}
.nice-ol li {
    counter-increment: step-counter;
    margin-bottom: 8px;
}
.nice-ol li:last-child {
    margin-bottom: 0;
}
.nice-ol li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    padding: 3px 8px;
    font-size: 0.8em;
    color: white;
    font-weight: bold;
    background-color: #ff4500;
    border-radius: 3px;
}

Nah sekarang angka ordered list akan berubah menjadi lebih menarik.

Itu saja mungkin yang bisa saya sampaikan.. semoga bisa bermanfaat

Sumber: http://www.ngeless.com/trick/menyesuaikan-gaya-ordered-list-dengan-element-pseudo-before/

 

Ada layanan bernama codepen.io atau jsfinddle.net yang mungkin bisa anda pakai untuk linking ke live demo. Semoga bermanfaat!

 

Oh iya..
Makasih gan sarannya.

 

Wah. Keren gan. Tapi ane lebih suka pakek css.

body{display:none}

 

Wah, mantep gan, pake css body { display: none; } memang senjata terakhir bagi orang2 yg putus asa

 

Nah bagus juga nih hasilnya, praktekin deh biar ga bosen sama ol lama.

Trim's.

Sent from my X9009 using Bersosial.com mobile app

 

Ah. Jadi malu ane, makasih pujianya gan.

 

Nyimak aja, . Ga ngerti ane hhe

 

wkwkwkwk... benar-benar ngeless

 

Kalo li style nya diganti symbol atau icon gt gmn ya? Kayak di theme2 yg icon tlp, icon email, icon address gt... Saya taunya tinggal pake theme nya

 

Coba pake kode css kaya gini.

Code:

ol {
    list-style-type: none;
}
li {
   background: url(URL_ICON) no-repeat left top;
   padding-left: 32px;
}

 

Bukan gan, bukan gt, beda lg, kayak yg di theme2 bisnis gt lho, tp yg footer atau header biasanya ada icon email, tlp, dll gt

 

Kaya di situs apa contoh'y?
Apa mungkin navbar yang berbentuk horizontal yah?

 

Itu menggunakan Font Awesome Web Application Icons

 

http://demos.templateexpress.com/bota/ kayak itu conthnya gan, yg di menu atas itu, ada twitter, fb, g+ gt

 

Jawaban @Ngeless sudah benar tinggal upload icon-nya atau pakai Font Awesome Web Application Icons dari bootstrap

 

Kalo yang di maksud adalah Awasome Icon, Bootstrap Icon, atau Google Icon.

Agan bisa baca ini: Icons Tutorial

Untuk melihat daftar nama class-nya agan bisa lihat disini

http://www.w3schools.com/icons/icons_reference.asp

 

Iya gan, makasih ya gan ngeless & gan andre mamtap

 

bisa diaplikasikan pada menu apa nih gan? sidebar? bingung saya maklum nubie