<ol><li>The content of the 1st. element</li><li>The content of the 2nd. element</li><li>The content of the 3rd. element</li><li>The content of the 4th. element</li> etc... </ol>
Numaralı liste oluşturmak okuyucularımıza bilgi vermek için oldukça önemlidir.Daha çiğ olan blogları pişirmek için oldukça kullanışlıdır.Eğer makale falan paylaşacaksanız bazı kısımları numaralandırmak için numaralı liste kullanabilirsiniz.
Numaralı liste'yi özelleştirmek için aşağıdaki adımları takip edin:
Adım 1:Blogger hesabınıza giriş yapınız ve sırasıyla Şablon>Özelleştir>Gelişmiş>CSS ekle'tıklayın.
Adım 2:Açılan beyaz pencereye alttaki kodlardan beğendiğinizi ekleyebilirsiniz.
Not:Bazı bloglar CSS eklemeye izin vermez bunun için Şablon HTML'ye gidin ve CTRL+F kombinasyonu yardımıyla ]]></b:skin> bu kodu bulun ve hemen üstüne alttaki beğendiniz kodlardan birini yapıştırın.
Adım 3:Kodu CSS alanına yapıştırdıktan sonra sağ üst tarafta bulunan 'Blog'a uygula' butonunu tıklayın.
Stil*1:
.post ol{counter-reset: li;list-style: none;*list-style: decimal;font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */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; /* 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;}
Stil*2
.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 */}
Stil*3
.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*/