Cara Mengubah Tanda Numbered List Menjadi Menarik pada Blog
Halo Aibou (あいぼう). Kali ini Saya akan membagikan tutorial mengubah tanda Numbered List default menjadi lebih menarik.
Untuk langkah-langkanya Anda bisa ikuti cara dibawah ini :
STEP 1 - Memasang CSS di Edit HTML
- Login Akun Blogger Anda.
- Pilih Template > Edit HTML.
- Lalu tambahkan kode dibawah ini sebelum </Style>
- Setelah itu Simpan Tema
/* Number list */
ol{counter-reset:li;list-style:none;font:14px 'Open Sans','lucida sans';padding:0;margin-bottom:1.5em;text-shadow:0 2px 0 rgba(255,255,255,.5)}
.post ol li:hover{background:#fafafa}
.widget .post-body li{margin-bottom:.26em;margin-left: 34px;padding-top:0;padding-bottom:0}
.post ol li{position:relative;display:block;padding:.6em .6em .6em .9em;margin:.5em 0 .5em 2.5em;background:#fff;color:#6d6d6d;text-decoration:none;transition:all .3s ease-out}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.6em;top:51%;margin-top:-1em;background: style="color: white;">#7d5a4d;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold}
.post ol li:hover:after{left:-.6em;border-left-color: style="color: white;">#7d5a4d}
.post ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .4s ease-o
Untuk tulisan putih adalah warna dari kotak pada Numbered List silahkan diganti sesuai dengan keinginan Anda.
STEP 2 - Menampilkan Numbered List di Artikel
- Silahkan pergi ke Menu Postingan.
- Lalu di Halaman kerja. Block artikel.
- Pilih Numbered List di Menu Tab.
- Lalu Cek dengan Pratinjau.
Mungkin itu saja cara singkat membuat Numbered List, Selamat mencoba dan apa bila ada yang ingin di tanyakan, silahkan Comment atau Contact saya di Akun Facebook.





