CSS3 Custom Numbered Lists untuk Blog

Sudah hampir dua minggu lamanya saya tidak update postingan blog ini. Hal ini disebabkan karena saya sedang disibukan oleh Ujian Praktek di Sekolah. Karena Ujian Praktek sudah selesai, akhirnya saya dapat kembali memberi sentuhan pada blog ini.

Kali ini saya akan membagikan script CSS3 yang dapat mengubah tampilan numbered lists pada Blog. Biasanya numbered lists ini digunakan untuk memberikan petunjuk. Seperti langkah-langkah memasak, tutorial, dan lain sebagainya.

Sebelumnya Anda harus tahu terlebih dahulu, jika Anda ingin membuat daftar bernomor atau Numbered Lists, Anda harus menggunakan tool berikut ini pada post editor :

CSS3 Custom Numbered List untuk Blog

Tampilan numbered lists default pada blogger adalah seperti berikut :

  1. Si Wahyu biasa dipanggil Pentus semasa kecil.
  2. Wahyu bukan seorang blogger profesional.
  3. Saat ini masih belum bisa melupakan seseorang.
  4. Kalau beli makanan nggak pernah yang pedas.
  5. Memiliki 1 buah bekas luka kecil di kepalanya (pitak).

Nah jika Anda tidak suka dengan tampilan seperti itu, mungkin Anda dapat menggantinya dengan salah satu gaya atau style di bawah ini dan letakkan kodenya di atas kode ]]></b:skin> atau </style>
 

Style 1

Demo Tampilan

  1. Si Wahyu biasa dipanggil Pentus semasa kecil.
  2. Wahyu bukan seorang blogger profesional.
  3. Saat ini masih belum bisa melupakan seseorang.
  4. Kalau beli makanan nggak pernah yang pedas.
  5. Memiliki 1 buah bekas luka kecil di kepalanya (pitak).
.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 14px 'Roboto', 'lucida sans'; /* font size of each element */
padding: 0;
margin-bottom: 4em;
}
.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; /* text color of numbers */
background: #FA8022; /* background color of numbers */
border: .2em solid #fff; /* border color */
-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;
}

Style 2

Demo Tampilan

  1. Si Wahyu biasa dipanggil Pentus semasa kecil.
  2. Wahyu bukan seorang blogger profesional.
  3. Saat ini masih belum bisa melupakan seseorang.
  4. Kalau beli makanan nggak pernah yang pedas.
  5. Memiliki 1 buah bekas luka kecil di kepalanya (pitak).
.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; /* size of the numbers */
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#A5A5A5; /* color of the numbers */
text-align:left;
background:#e2e2e2; /* background color of the numbers */
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 */
}

Style 3

Demo Tampilan

  1. Si Wahyu biasa dipanggil Pentus semasa kecil.
  2. Wahyu bukan seorang blogger profesional.
  3. Saat ini masih belum bisa melupakan seseorang.
  4. Kalau beli makanan nggak pernah yang pedas.
  5. Memiliki 1 buah bekas luka kecil di kepalanya (pitak).
.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; /* size of the numbers */
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#A5A5A5; /* color of the numbers */
text-align:left;
background:#e2e2e2; /* background color of the numbers */
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 */
}

Style 4

Demo Tampilan

  1. Si Wahyu biasa dipanggil Pentus semasa kecil.
  2. Wahyu bukan seorang blogger profesional.
  3. Saat ini masih belum bisa melupakan seseorang.
  4. Kalau beli makanan nggak pernah yang pedas.
  5. Memiliki 1 buah bekas luka kecil di kepalanya (pitak).
.post ol {
counter-reset: li;
list-style: none;
font-size: 14px;
font-family: 'Roboto', 'lucida sans';
padding: 0;
margin-bottom: 4em;
}
.post ol li {
position: relative;
display: block;
padding: 0 0 0 0.4em;
margin: .5em 0 .5em 2.5em;
background: transparent;
color: #404040;
text-decoration: none;
transition: all .3s ease-out;
}
.post ol li:hover {
color: #404040;
}
.post ol li:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #f4f4f4;
color: #404040;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
border: 1px solid #464a54;
font-family: 'Roboto';
transition: all .3s ease-out;
}
.post ol li:hover:before {
background: #f4f4f4;
color: #404040;
border: 1px solid #fc4f3f;
}
.post ol li:after {
position: absolute;
content: '';
border: .5em solid transparent;
left: -.4em;
top: 52%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.post ol li:hover:after {
left: -.4em;
border-left-color: #fc4f3f;
}
.post ol li span {
position: relative;
display: block;
padding: 4px 8px;
margin-bottom: 10px;
background: transparent;
color: #404040;
text-decoration: none;
transition: all .3s ease-out;
}
.post ol li span:hover {
color: #404040;
}

Numbered lists tersebut dapat bekerja di semua browser termasuk IE8. Sekian, Semoga bermanfaat.

Leave a Reply