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 Daftar satu Daftar dua Daftar tiga Daftar empat 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/ Last edited: Oct 19, 2016 Ngeless, Oct 18, 2016 #1 Yuyutsu and Damar like this. Garett Super Level Joined: Apr 13, 2015 Messages: 1,104 Likes Received: 1,049 Trophy Points: 163 Google+: Author Ada layanan bernama codepen.io atau jsfinddle.net yang mungkin bisa anda pakai untuk linking ke live demo. Semoga bermanfaat! Garett, Oct 18, 2016 #2 Ngeless Member Joined: Oct 17, 2016 Messages: 28 Likes Received: 3 Trophy Points: 8 Oh iya.. Makasih gan sarannya. Ngeless, Oct 18, 2016 #3 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} Gangangan, Oct 18, 2016 #4 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 Ngeless, Oct 18, 2016 #5 AgungHN Member Joined: Sep 19, 2016 Messages: 97 Likes Received: 8 Trophy Points: 8 Google+: Author Nah bagus juga nih hasilnya, praktekin deh biar ga bosen sama ol lama. Trim's. Sent from my X9009 using Bersosial.com mobile app AgungHN, Oct 18, 2016 #6 Gangangan Member Joined: Jul 28, 2015 Messages: 20 Likes Received: 2 Trophy Points: 8 Ah. Jadi malu ane, makasih pujianya gan. Gangangan, Oct 18, 2016 #7 Promp3 Member Joined: Oct 16, 2016 Messages: 415 Likes Received: 15 Trophy Points: 18 Nyimak aja, . Ga ngerti ane hhe Promp3, Oct 18, 2016 #8 KangAndre Member Joined: Jan 25, 2014 Messages: 10,244 Likes Received: 2,714 Trophy Points: 413 wkwkwkwk... benar-benar ngeless KangAndre, Oct 18, 2016 #9 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 arek saja, Oct 19, 2016 #10 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; } Ngeless, Oct 19, 2016 #11 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 arek saja, Oct 19, 2016 #12 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? Ngeless, Oct 19, 2016 #13 KangAndre Member Joined: Jan 25, 2014 Messages: 10,244 Likes Received: 2,714 Trophy Points: 413 Itu menggunakan Font Awesome Web Application Icons KangAndre, Oct 19, 2016 #14 arek saja Member Joined: Aug 20, 2016 Messages: 48 Likes Received: 1 Trophy Points: 8 http://demos.templateexpress.com/bota/ kayak itu conthnya gan, yg di menu atas itu, ada twitter, fb, g+ gt arek saja, Oct 19, 2016 #15 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 KangAndre, Oct 19, 2016 #16 Ngeless Member Joined: Oct 17, 2016 Messages: 28 Likes Received: 3 Trophy Points: 8 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 Ngeless, Oct 19, 2016 #17 arek saja Member Joined: Aug 20, 2016 Messages: 48 Likes Received: 1 Trophy Points: 8 Iya gan, makasih ya gan ngeless & gan andre mamtap arek saja, Oct 20, 2016 #18 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 themebel, Oct 20, 2016 #19 (You must log in or sign up to reply here.) Show Ignored Content Loading... Similar Threads - Merubah Style Ordered Merubah Gambar Slider Dengan Mudah mugianto, Mar 31, 2016, in forum: HTML & Website Design Replies: 6 Views: 1,913 Kuncen Dec 21, 2016 [Ask] Bagaimana Cara Merubah Kode Ini kedalam Html Muh.Yusuf, Sep 21, 2014, in forum: HTML & Website Design Replies: 5 Views: 1,191 lembing Jun 1, 2016 (Ask) Merubah Blogspot ke Domain TLD Sendiri (Berbayar ataupun Gratis) Adam Aiyasi, Aug 10, 2014, in forum: HTML & Website Design Replies: 19 Views: 3,465 Muhammad Herdiansyah Dec 25, 2015 CSS - Merubah Warna(Color-Background) Selection Fahmi, Jul 1, 2013, in forum: HTML & Website Design Replies: 9 Views: 4,302 robywakas Jan 10, 2014 Modifikasi Contact Form Dengan Style UI Virlyz82, Jun 9, 2014, in forum: HTML & Website Design Replies: 7 Views: 2,110 Dede P Nov 12, 2014 Share This Page Tweet Log in with Facebook Log in with Twitter Your name or email address: Do you already have an account? No, create an account now. Yes, my password is: Forgot your password? Stay logged in
Ada layanan bernama codepen.io atau jsfinddle.net yang mungkin bisa anda pakai untuk linking ke live demo. Semoga bermanfaat!
Nah bagus juga nih hasilnya, praktekin deh biar ga bosen sama ol lama. Trim's. Sent from my X9009 using Bersosial.com mobile app
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
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