Baca Juga
Cara Memperindah 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).
1. Template > Edit HTML
2. Copas kode berikut ini di atas kode ]]</b:skin> atau </style>
3. Save template!
Jika ingin seperti gambar di atas ini, maka kodenya:
Demikian Mempercantik Tampilan Numbered List Posting Blog.
Sumber
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 '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:#48d;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:#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;}
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:'';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:
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;}
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.
Sumber
