Mempercantik Tampilan Numbered List Posting Blog

Cara Memperindah Tampilan Numbered List Posting Blog


Mempercantik Tampilan Numbered List Posting Blog
DALAM posting blog kadang kita membuat numbered list, yaitu daftar kalimat/kata yang diberi nomor.

Contohnya seperti gambar ilustrasi di posting ini.

Kita sudah lama mengenal istilah "Bulleted & Numbering" ini di MS Word. Di blog juga ada. Istilahnya sama: Bulleted List

alias daftar yang dikasih nomor.

Menampilkan Numbered Lists seperti ini sangat dianjurkan agar tulisan kita di blog lebih "ramah pengguna" (user friendly).

Cara Mempercantik Tampilan Numbered List Posting Blog
Cara membuatnya sangat mudah:

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode ]]</b:skin> atau </style>

ol {counter-reset:li;list-style: none;font:15px &#39;Montserrat&#39;, 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:#48d;color:#FEFEFE;height:2em;width:2em;
line-height:2em;text-align:center;font-weight:bold;}
.post ol li:after{position:absolute; content:&#39;&#39;;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:#e74c3c;}
.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!

KODE LAIN/WARNA LAIN:

Mempercantik Tampilan Numbered List Posting Blog

Jika ingin seperti gambar di atas ini, maka kodenya:

ol {counter-reset:li;list-style: none;font:15px 'Roboto Condensed', 'Oswald';
padding:0;margin-bottom:4em;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:#F5F5F5;color:#666;text-decoration:none;
transition:all .3s ease-out;}
.post ol li:hover{background:#EEEEEE;}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;
left:-2.5em;top:50%;margin-top:-1em;background:#FA8072;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:#FA8072;}
.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;}

Demikian Mempercantik Tampilan Numbered List Posting Blog.