Scrollbar'ı CSS ile Özelleştirme

Merhaba arkadaşlar bugün sizlere blogunuza veya sitenize giren kullanıcılara özel scrollbar'ınız ile karşılamanız hoş olabilir.Ama bir programcı olarak size önerim bu temanızla uyuşacak bir renk seçmeye özen gösterin bu temanızda bulunan ana renklerden birisi de olabilir size bir başka tavsiyem sitenizde 5-6 renkten fazla renk karmaşasına koymamanız aşırı göz yoran siteler kullanıcı kaybına neden olmaktadır.

Scrollbar'ımızı özelleştirmek için Blogger yönetim panelimize girişimizi yapıyoruz.Ardından Tema > Html'yi Düzenle kısmına giderek ana kod bloğuna ulaşıyoruz.CTRL + F yardımı ile ]]></b:skin> kodunu aratıyoruz hemen üstüne aşağıdaki bulunan kodumuzu ekliyoruz.

CSS::-webkit-scrollbar-track{background-color:#f0f0f0}
::-webkit-scrollbar{width:12px;}
::-webkit-scrollbar-thumb{background-color:#313131}

• Yukarıdaki kısımı biraz kurcalamak gerekirse ::-webkit-scrollbar-track{background-color:#f0f0f0} kısmında scrollbar'ın arkaplan rengini ayarladık.
• ::-webkit-scrollbar{width:12px;} bu kısımda ise scrollbar'ın boyutunu piksel cinsinden ayarladık.
• ::-webkit-scrollbar-thumb{background-color:#313131} bu kısım ise scrollbar'ın belirteç kısmının rengini hex color cinsinden tanımladık.

NOT: Unutmadan üstteki kısım blogunuzun veya sitenizin herhangi bir yerinde genel olarak ayarlamış bulunmaktasınız.
Sadece sayfalarınızda scrollbar'ın görünümünü değiştirmek istiyorsanız alttaki kısmı yine aynı şekilde ]]></b:skin> kodunun hemen üstüne ekliyoruz.Farkı ise sadece üstteki kodların başlarına body ekliyoruz.

CSSbody::-webkit-scrollbar-track{background-color:#f0f0f0}
body::-webkit-scrollbar{width:12px;}
body::-webkit-scrollbar-thumb{background-color:#313131}

Herhangi bir widget/eklenti üzerinde scrollbar'ın görüntüsünü değiştirmek için başına o widget/eklentinin etiketini getiriyoruz. Mesela ben aşağıda Etiketler Eklentisinde bu şekilde değişiklik yaptım. Kodlarla haşır neşir değilseniz, deneme yanılma yöntemi ile yapabilirsiniz.

CSS.Label ul::-webkit-scrollbar-track{background-color:#f0f0f0}
.Label ul::-webkit-scrollbar{width:12px;}
.Label ul::-webkit-scrollbar-thumb{background-color:#313131}

Yukarıda gördüğünüz örneklerden yola çıkarak scrollbarın görünümünü kolaylıkla değiştirebilirsiniz. Basit kodlarla site/blogunuzun görüntüsünde hoş bir değişiklik yapabilirsiniz.