Klik To Zoom

Pertama saya akan jelaskan untuk membuatnya di Sidebar jika ingin merubah semua tampilan List di Sidebar dengan Nomor Urut Otomatis.
Mari kita mulai bekerja :

• Masuk Ke Blogger - Pilih Template dan Edit HTML

• Cari Code Sepeti Berikut ini :

.Sidebar

•  Atau jika sobat menggunakan template Custom cari Code CSS yang digunakan untuk Sidebar terkadang Seperti .sidebar-wrapper .
• setelah itu Terdapat .sidebar h2 { bla...bla }. kode sidebar H2 itu untuk judul sidebar dan ganti Kode dibawahnya seperti .sidebar ul {  } sampai CSS .sidebar yang berkahiran kurung kurawa {}.
• ganti dengan Kode dibawah ini :

 .sidebar ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; }

.sidebar ul li {
border-bottom: 1px dashed #dddddd;
}

sidebar ul li:hover {
border-bottom: 1px dashed #696969;
}

.sidebar ul li a {
text-decoration:none; color:#5A5F63;
}


.sidebar ul li a:hover {
text-decoration:none;
}

Nomor di atas masih asli karya dari MBT. jika ingin membuat nya berbentuk Circle (bulat). Letakan code ini border-radius:15px; diatas kode  box-shadow: 1px 2px 9px #666666;
Simpan dan lihat hasilnya..

Klik To Zoom

Dan Sekarang untuk membuat Tampilan Nomornya seperti Editan yang telah saya lakukan..
Prosesnya sama seperti diatas.. Tinggal diganti code yang diatas dengan yang dibawah ini

.sidebar ul {
padding-left: 0px;
counter-reset: popcount;
}
.sidebar ul li:before {
list-style-type: none;
margin-right: 13px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 10px;
background: #935039;
color: #fff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #935039;
box-shadow: 1px 2px 3px #18877C;
border-radius:11px;
}
.sidebar ul li {
border-bottom: 1px dashed #dddddd;
}
.sidebar ul li:hover {
border-bottom: 1px dashed #696969;
}
.sidebar ul li a {
text-decoration:none; color:#000;
}
.sidebar ul li a:hover {
text-decoration:none;
}

Simpan dan Check Hasilnya,, bila mengalami masalah dalam bentuk warna dan tampilan, saya siap untuk memberi saran kepada anda anda sekalian..
Thanks Before wash be read my post.. bye