POSTINGAN blog disarankan memakai List Style (Numbered List) biar lebih user friendly dan gampang dipindai (easy to scan, scannable) juga gampang dibaca (easty to read, readable).
Tentu, diadaptasi dengan naskahnya. Jangan dipaksakan ada List Style bila memang tidak perlu. Contoh List Style yaitu gambar berikut ini. Live demo benerannya ada di, misalnya, posting perihal Kata Baku Andal dan Imbau.
Tingkat keterbacaan posting website memakai list style dapat mencapai 124%. Artinya, sangat lezat dibaca dan gampang di mengerti, menyerupai ditunjukkan hasil studi NN Group dalam "How Users Read on the Web".
Cara Mempercantik Tampilan List Style (Nomor) Posting Blogger
1. Template > Edit HTML
2. Copas arahan CSS berikut ini di atas arahan ]]></b:skin> atau </style>
ol {counter-reset:li;list-style: none;font:15px 'Montserrat', Sans-Serif;
padding:0;margin-bottom:2em;text-shadow: 0 1px 0 rgba(255,255,255,.5);}
ol ol {margin: 0 0 0 2em;}
.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;}
.post ol li:hover{background:#f9f9f9;}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;
left:-2.5em;top:50%;margin-top:-1em;background:#666;color:#FEFEFE;height:2em;width:2em;
line-height:2em;text-align:center;font-weight:bold;}
.post ol li:after{position:absolute; content:'';border: .5em solid transparent;
left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
.post ol li:hover:after{left:-.5em;border-left-color:#777;}
.post ol li span{position:relative;display:block;padding:5px 8px;margin-bottom:10px;background:#fafafa;color:#666;text-decoration:none;transition:all .3s ease-out;}
.post ol li span:hover{background:#f9f9f9;}
3. Save Template!
Catatan: angka warna merah (#666) yaitu warna latar belakang. Kita dapat mengubahnya dengan warna lain. (Lihat: Kode Warna HTML).*
Sumber
0 comments: