Cara Merubah Tampilan Ordred List Atau Penomoran Di Blog

Cara Merubah Tampilan Ordred List Atau Penomoran Di Blog

Ordered list yaitu suatu metode mengurutkan daftar dengan memakai angka romawi dan angka karakter pada html., di sini aku akan menyebarkan style untuk merubah tampilan pada Ordred List sehingga tampilannya menjadi lebih menarik..

bagi kalian yang ingin cepat cara menciptakan UL Unordered List, OL Ordered List atau select Select Menu dengan cepat dalam bentuk HTML, aku sudah share tolsny, jadi kalian tinggal menuliskan daftar kata yang ingin di masukan...

Bagi kalian yang ingin mencoba tools ini dapat kunjungi artikel berikut ini ... Menu List Converter Text To HTML

Nah kini 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 sempurna 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 alhasil dengan menciptakan Ordered List di postingan blog kalian..

• Tidak Tau Caranya? Lihat Gambar Dibawh Ini...

• Cukup Sekian Dan Terima Kasih :) :)

Semoga artikel wacana Cara Merubah Penomoran atau Ordred List Pada Blog Ini bermanfaat ya :)