Cara Merubah Tampilan Ordred List Atau Penomoran Di Blog
Cara Merubah Tampilan Ordred List Atau Penomoran Di Blog
Ordered list adalah suatu metode mengurutkan daftar dengan menggunakan angka romawi dan angka abjad pada html., di sini saya akan berbagi style untuk merubah tampilan pada Ordred List sehingga tampilannya menjadi lebih menarik..
bagi kalian yang ingin cepat cara membuat UL Unordered List, OL Ordered List atau select Select Menu dengan cepat dalam bentuk HTML, saya sudah share tolsny, jadi kalian tinggal menuliskan daftar kata yang ingin di masukan...
Bagi kalian yang ingin mencoba tools ini bisa kunjungi artikel berikut ini ... Menu List Converter Text To HTML
Nah sekarang kita lanjut ke tutorial cara merubah tampilan ordred list atau penomoran pada blog
- Login Ke blogger.com
- Lalu Masuk Ke Template, Edit HTML
- Cari Kode </head>, kalo sudah ketemu, masukan CSS dibawah ini tepat di atasnya.
<style type='text/css'>
.post ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#fafafa;color:#666;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.post ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
.post ol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.post ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:15px 'Arial';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style>
- Kalo sudah, tinggal Save Template n Done..
- Tinggal Lihat hasilnya dengan membuat Ordered List di postingan blog kalian..
- Tidak Tau Caranya? Lihat Gambar Dibawh Ini...
- Cukup Sekian Dan Terima Kasih :) :)