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.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.
Blog ipuçları...
Hiç yorum yok: