CSS ile scrollbar (kaydırma çubuğu) kısmını özelleştirmek ister misiniz?

Blogger scrollbar CSS kodu

Basit CSS kodları ile kolayca scrollbar kısmının rengini, boyutunu değiştirebilir ve dilediğiniz şekilde özelleştirebilirsiniz. Aşağı, yukarı kaydırılarak sayfaların tüm alanına ulaşmamızı sağlayan scrollbar (kaydırma çubuğu) kısmını yeniden renklendirebilir ve dilediğiniz gibi düzenleyebilirsiniz. Peki nasıl?

Uyarı: Scrollbar kısmının nasıl özelleştirilebileceği sorusunun yanıtına geçmeden önce ufak bir uyarıda bulunmak isterim dostlarım. CSS kodları ile scrollbar kısmı üzerinde yapacağımız işlemleri malesef her internet tarayıcısı desteklemeyebilir. Google Chrome destekliyor Internet Explorer ve Mozilla Firefox'un ise son sürümleri destekliyor sanırım. Bu yüzden kodları denerken Google Chrome kullanmanız daha sağlıklı olacaktır.

Scrollbar kısmı nasıl düzenlenir?

Yapılması gereken işlemler oldukça basittir. İlk olarak Tema, ardından HTML'yi düzenle seçeneği ile kodların yer aldığı HTML kısmına ulaşın. Daha sonra klavyeden Ctrl F tuşları ile beliren arama kutusu aracılığıyla aşağıdaki kodu aratın.

]]></b:skin>

Bulduğunuz bu kodun hemen üstüne aşağıdaki kodları ekleyin

::-webkit-scrollbar {
    width: 10px;
    background-color: #eaeaea;
    border-left: 1px solid #cecece;
}
::-webkit-scrollbar-thumb {
    background-color: #47575e;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #39484f;
}

Ve temanızı kaydederek blogunuzu kontrol edin.

See the Pen Scrollbar Özelleştirme by Blog Tecrübem (@blogtecrubem) on CodePen.

Yukarıda yeni CSS kodları ile scrollbar kısmının nasıl bir görünüm aldığını canlı önizleme ile inceleyebilirsiniz. Kodlar arasında bulunan 10px scrollbar çubuğunun genişliğini belirliyor. Renk kodları ise kaydırma çubuğunun ve arka planının renklerini. Bu kısımları dilediğiniz gibi düzenleyebilirsiniz. Sorularınız olursa yorum yaparak bildirmeniz yeterli.