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. Kodunher alanı etkileyen hali aşağıdadır.

CSS
::-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.

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

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.

Daha iyi bloglar için...