Cara Mengganti Numbered List Pada Blog Menjadi Lebih Menarik

Setelah sebelumnya saya sudah memberikan tips cara mengganti bullet list pada blog, kali ini saya akan kembali memberikan tips cara mengganti numbered list pada blog agar lebih menarik. Caranya juga tidak terlalu sulit, karena tinggal menyalin kode yang saya berikan lalu letakkan pada template blog kalian.

Disini saya akan memberikan beberapa kode dengan style yang berbeda-beda, silahkan kalian pilih sesuai dengan selera masing-masing.

Cara Mengganti Numbered List Pada Blog

Langsung saja kalian ikuti langkah-langkah berikut ini :

1. Buka akun blog kalian pilih pengaturan TEMA/TEMPLATE
2. Kemudian pilih EDIT HTML
3. Cari kode ]]></b:skin>
4. Kemudian COPY kode di bawah ini dan letakkan tepat di atas kode ]]></b:skin>

KODE STYLE 1

[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:-lem;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;}]

KODE STYLE 2

[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;}
]

KODE STYLE 3

[.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 13px 'trebuchet MS', 'lucida sans'; /* ukuran nomor */
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
*padding: .4em;
margin: .5em 0;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:hover:before{
transform: rotate(360deg);
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
color: #fff; /* warna teks nomor */
background: #FA8022; /* warna background nomor */
border: .2em solid #fff; /* warna garis */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}]

KODE STYLE 4

[.post ol{counter-reset:li;list-style: none;*list-style: decimal;margin-left:0;padding-left:0}.post ol li{
position:relative;margin:0 0 20px 15px !important;padding:4px 5px 4px 10px !important;list-style:none;*list-style: decimal;border-bottom:1px solid #e2e3e2; /* bottom border of each element */background:#f2f2f2; /* background color of each element */text-indent:14px;}.post ol li:before{
content:counter(li);counter-increment:li;position:absolute;top:-6px;left:-10px;font-family:'Oswald', serif;font-size:14px; /* ukuran nomor */width:20px;margin:0 0 10px 0;padding:4px !important;color:#A5A5A5; /* warna nomor */text-align:left;background:#e2e2e2; /* warna background nomor */text-indent:6px;text-shadow: 1px 3px 2px #fff;}.post ol li:after{content:"";position:absolute;top:-5px;left:17px;width: 0px;height: 0px;border-style: solid;border-width: 5px 0 0 5px;border-color: transparent transparent transparent #aeaeae; /* color of the triangle behind */}]

KODE STYLE 5

[.post ol{counter-reset: li;list-style: none;*list-style: decimal;padding: 0;margin-bottom: 4em;font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */text-shadow: 0 1px 0 rgba(255,255,255,.5);}.post ol li{position: relative;display: block;padding: .4em .4em .4em .8em;*padding: .4em;margin: .5em 0 .5em 4.5em;text-decoration: none;}.post ol li:before{content: counter(li);counter-increment: li;position: absolute;
left: -30px;top: 50%;margin-top: -1em;background: #bada55; /* background color of the numbers */height: 2em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;}.post ol li:after{position: absolute;content: '';left: -5px;margin-top: -.7em;
top: 50%;width: 0;
height: 0;
border-top: 8px solid transparent;border-bottom: 8px solid transparent;
border-left:8px solid #bada55; /* background color of the right arrow*/}]

Jika sudah di letakkan kode pada template kalian, jangan lupa klik SIMPAN TEMA/SAVE TEMPLATE

Itulah tips dari saya mengenai cara mengganti numbered list pada blog menjadi lebih menarik. Silahkan kalian coba pada blog masing-masing. Jika ada pertanyaan silahkan komentar pada artikel ini atau bisa via halaman kontak.