Blog scrolbar çubuğunun rengini değiştirme


Blog sayfanızın sağ tarafında ki aşağı yukarı hareket ettirtiğimiz çubuğumuzu istersek özelleştireliriz.
Ben özelleştirdim. Kendimin kullandığı kodları aşağıya yazıcam. Özelleştirmede ki sebebim sayfam bu şekilde daha özel ve güzel gözükecekti.


Şimdi nasıl yapaılacağını anlatmaya geçelim.
İlk önce blog anasayfamızda Tema seçeneğini tıklıyoruz. Açılan sayfada Html düzenle butonuna basıyoruz.

Ardından tema kodlarının olduğu alanda ctrl + f butonuna basarak arama bölümüne
]]></b:skin>  yazıyoruz.
Aşağıda belirttiğim kodları ]]></b:skin> hemen üstüne yapıştırıyoruz.

/*------scrolbar style begin----------*/

::-webkit-scrollbar {width:12px;}

::-webkit-scrollbar-track {background-color:transparent;}

::-webkit-scrollbar-thumb {background:linear-gradient(to top, #fd4040, #190a05);border-radius:10px}

::-webkit-scrollbar-thumb:hover {box-shadow:0 0 30px 0 #000;}

/*------scrolbar style end----------*/

Kodların açıklaması
1. webkit-scrollbar {width:12px;}  scrollbar genişliğinizi ayarlamayı sağlar.

2. webkit-scrollbar-thumb burda ben gradient bir renk seçtim sizde istediğiniz rengi verebilirsiniz.
Aynı zamanda bir 10px köşelere ovallik verdim.

3. webkit-scrollbar-thumb:hover  burda da scrollbarın üzerine gelince biraz gölge verdim.

Ve artık scrolbar yeni rengine ve stiline kavuşmuştur.

  Blog ipuçları... 

Hiç yorum yok: