Merubah Style Ordered List

Discussion in 'HTML & Website Design' started by Ngeless, Oct 18, 2016.

  1. Ngeless

    Ngeless Member

    Joined:
    Oct 17, 2016
    Messages:
    28
    Likes Received:
    3
    Trophy Points:
    8
    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.
    Screenshot_2016-10-18-05-40-27.jpg
    Itu saja mungkin yang bisa saya sampaikan.. semoga bisa bermanfaat

    Sumber: http://www.ngeless.com/trick/menyesuaikan-gaya-ordered-list-dengan-element-pseudo-before/
     
    Last edited: Oct 19, 2016
    Yuyutsu and Damar like this.
  2. Garett

    Garett Super Level

    Joined:
    Apr 13, 2015
    Messages:
    1,104
    Likes Received:
    1,049
    Trophy Points:
    163
    Google+:
    Ada layanan bernama codepen.io atau jsfinddle.net yang mungkin bisa anda pakai untuk linking ke live demo. Semoga bermanfaat!
     
  3. Ngeless

    Ngeless Member

    Joined:
    Oct 17, 2016
    Messages:
    28
    Likes Received:
    3
    Trophy Points:
    8
    Oh iya..
    Makasih gan sarannya.
     
  4. Gangangan

    Gangangan Member

    Joined:
    Jul 28, 2015
    Messages:
    20
    Likes Received:
    2
    Trophy Points:
    8
    Wah. Keren gan. Tapi ane lebih suka pakek css.

    body{display:none}
     
  5. Ngeless

    Ngeless Member

    Joined:
    Oct 17, 2016
    Messages:
    28
    Likes Received:
    3
    Trophy Points:
    8
    Wah, mantep gan, pake css body { display: none; } memang senjata terakhir bagi orang2 yg putus asa *head*
     
  6. AgungHN

    AgungHN Member

    Joined:
    Sep 19, 2016
    Messages:
    97
    Likes Received:
    8
    Trophy Points:
    8
    Google+:
    Nah bagus juga nih hasilnya, praktekin deh biar ga bosen sama ol lama.

    Trim's.

    Sent from my X9009 using Bersosial.com mobile app
     
  7. Gangangan

    Gangangan Member

    Joined:
    Jul 28, 2015
    Messages:
    20
    Likes Received:
    2
    Trophy Points:
    8
    Ah. Jadi malu ane, makasih pujianya gan.
     
  8. Promp3

    Promp3 Member

    Joined:
    Oct 16, 2016
    Messages:
    415
    Likes Received:
    15
    Trophy Points:
    18
    Nyimak aja, . Ga ngerti ane hhe
     
  9. KangAndre

    KangAndre Member

    Joined:
    Jan 25, 2014
    Messages:
    10,244
    Likes Received:
    2,714
    Trophy Points:
    413
    wkwkwkwk... benar-benar ngeless :D
     
  10. arek saja

    arek saja Member

    Joined:
    Aug 20, 2016
    Messages:
    48
    Likes Received:
    1
    Trophy Points:
    8
    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 :D
     
  11. Ngeless

    Ngeless Member

    Joined:
    Oct 17, 2016
    Messages:
    28
    Likes Received:
    3
    Trophy Points:
    8
    Coba pake kode css kaya gini.
    Code:
    ol {
        list-style-type: none;
    }
    li {
       background: url(URL_ICON) no-repeat left top;
       padding-left: 32px;
    }
     
  12. arek saja

    arek saja Member

    Joined:
    Aug 20, 2016
    Messages:
    48
    Likes Received:
    1
    Trophy Points:
    8
    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
     
  13. Ngeless

    Ngeless Member

    Joined:
    Oct 17, 2016
    Messages:
    28
    Likes Received:
    3
    Trophy Points:
    8
    Kaya di situs apa contoh'y?
    Apa mungkin navbar yang berbentuk horizontal yah?
     
  14. KangAndre

    KangAndre Member

    Joined:
    Jan 25, 2014
    Messages:
    10,244
    Likes Received:
    2,714
    Trophy Points:
    413
    Itu menggunakan Font Awesome Web Application Icons
     
  15. arek saja

    arek saja Member

    Joined:
    Aug 20, 2016
    Messages:
    48
    Likes Received:
    1
    Trophy Points:
    8
  16. KangAndre

    KangAndre Member

    Joined:
    Jan 25, 2014
    Messages:
    10,244
    Likes Received:
    2,714
    Trophy Points:
    413
    Jawaban @Ngeless sudah benar tinggal upload icon-nya atau pakai Font Awesome Web Application Icons dari bootstrap
     
  17. Ngeless

    Ngeless Member

    Joined:
    Oct 17, 2016
    Messages:
    28
    Likes Received:
    3
    Trophy Points:
    8
  18. arek saja

    arek saja Member

    Joined:
    Aug 20, 2016
    Messages:
    48
    Likes Received:
    1
    Trophy Points:
    8
  19. themebel

    themebel Member

    Joined:
    Jun 6, 2016
    Messages:
    71
    Likes Received:
    6
    Trophy Points:
    8
    bisa diaplikasikan pada menu apa nih gan? sidebar? bingung saya maklum nubie :D
     
Loading...

Share This Page