Blog yazılarınızda karmaşık süreçleri veya talimatları adım adım anlatmak mı istiyorsunuz? Okuyucularınızın her adımı kolayca takip edebilmesi için görsel olarak çekici ve düzenli listeler kullanmak harika bir yöntemdir.
Bu yazıda, blog yazılarınıza profesyonel görünümlü ve kullanıcı dostu sıralı listeler eklemek için basit bir CSS kodunu nasıl kullanacağınızı göstereceğim.
CSS Kodunu Kopyalayın
Aşağıdaki CSS kod bloğunu kopyalayın:
:root{
--bodyCa: #767676 ;
--linkC: #d86454 ;
--fontBa: 'Merriweather', serif ;
--stepC: #222222;
--stepHover: #ffffff;
--tDuration: 0.3s;
}
.post-body ol{
counter-reset: num;
line-height: 1.6;
padding: 0;
list-style: none;
}
.post-body ol li {
position: relative;
counter-increment: num;
padding-inline-start: 45px;
padding-bottom: 25px;
}
.post-body ol li:last-child {
padding-bottom: 0;
}
.post-body ol li::before {
content: counter(num) '.';
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
width: 30px;
height: 30px;
border: 1px solid var(--bodyCa);
border-radius: 50%;
color: currentColor;
font: small var(--fontBa);
transition: background var(--tDuration), color var(--tDuration);
left: 0;
}
.post-body ol li:hover::before {
background-color: var(--linkC);
color: var(--stepHover);
}
.post-body ol li::after {
content: '';
position: absolute;
top: calc(30px + 2px);
bottom: 5px;
border-left: 1px solid var(--bodyCa);
left: 15px;
}
.post-body ol li:last-child::after {
display: none;
}
Temaya Kodu Yapıştırın
Blogger'da Tema bölümüne gidin ve kopyaladığınız kodu CSS kısmına yapıştırın.
Artık blog yazılarınızda sıralı listeler oluşturduğunuzda timeline stili otomatik olarak uygulanacaktır.
<ol>
<li>İlk Adım: Gerekli malzemeleri hazırlayın.</li>
<li>İkinci Adım: Talimatları dikkatlice okuyun.</li>
<li>Üçüncü Adım: Uygulamaya başlayın.</li>
<li>Dördüncü Adım: Sonuçları kontrol edin.</li>
</ol>
</div>
Bu basit CSS kodu sayesinde, Blogger'da sıralı listeler çok daha düzenli, okunması kolay ve görsel olarak çekici hale gelecektir. Okuyucularınız adımları takip ederken daha keyifli bir deneyim yaşayacak. Örneğin, sadece belirli bir şablondaki listeleri hedeflemek için o şablona özel bir sınıf ekleyebilirsiniz.