Blogger'da Scrollbar Üzerinde CSS ile Değişiklik Yapmak

Blogunuz/sitenizde scrollbarın görüntüsünden memnun değilseniz, değiştirmeniz çok kolay. Öncelikle Blogger > Tema > HTML'yi Düzenle yolunu izleyip ]]></b:skin> kodunun hemen üstüne aşağıda paylaşmış olduğum kodu kendinize göre düzenleyip ekleyin.
İlk olarak kodun temel halini paylaşıyorum. Daha sonra üzerinde nasıl değişiklik yapacağınızı, nasıl istediğiniz widget/eklentide kullanacağınızı göstereceğim.

Kodun her alanı etkileyen hali aşağıdadır.

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

Sadece sayfalarınızda scrollbarın görüntüsünü değiştirmek için bu kodların başına sadece body ekliyoruz. Örneği hemen aşağıda mevcuttur.

[body::-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.

[.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.