Selasa, 13 Juni 2017

Tips Mengubah Tampilan Numbered List

Tips Mengubah Tampilan Numbered List - Halo Good People, kali ini saya akan berbagi tips bagaimana cara mengubah tampilan numbured list jadi keren.

Tips Mengubah Tampilan Numbered List

Numbered List merupakan pengurutan daftar nmor atau angka. Namun Numbered List pada bawaan blogger itu kalau menurut saya itu sangat sederhana dan mungkin simple ya.

Tapi jangan khawatir, disini saya akan berbagi Tips Mengubah Tampilan Numbered List agar tampilan menjadi keren serasa blogger proffesional gitu.

Cara Mengubah Tampilan Numbered List:
1. Login ke Blogger Tercinta
2. Pilih Template > Edit HTML
3. Copy Paste kode dibawah ini tepat diatas kode </head>

<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>