Cara Mengubah Tanda Numbered List Menjadi Menarik pada Blog

Amir   7/24/2017   Widget   8 Disqus  

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

1. Login Akun Blogger Anda. 
2. Pilih Template > Edit HTML. 
3. Lalu tambahkan kode dibawah ini sebelum </Style>
4. Setelah itu Simpan Tema

CSS
/* 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

1. Silahkan pergi ke Menu Postingan.
2. Lalu di Halaman kerja. Block artikel.
3. Pilih Numbered List di Menu Tab.
4. 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.