Jak zmienić wygląd paska przewijania na blogu

poniedziałek, 24 listopada 2014

Pasek przewijania strony - mały szczegół,większość z nas nie zwraca nawet na niego uwagi jednak,fajnie to wygląda kiedy nawet taki mały szczegół komponuje się z naszym blogiem.
W dzisiejszym tutorialu pokaże wam jak w bardzo prosty sposób możemy odświeżyć nasz pasek przewijania na blogu.

Pamiętaj aby przed rozpoczęciem edycji szablonu zrobić kopię zapasową 

1. Przechodzimy do szablon - edytuj kod HTML 

2. Klikamy kursorem w dowolne miejsce a następnie za pomocą CTRL + F wywołujemy okno wyszukiwania.




3. W oknie wyszukiwania wpisujemy ]]></b:skin> i klikamy enter.

4. Kiedy już znajdziemy wyszukiwany  przez nas fragment kodu to nad nim wklejamy następujący  kod:

::-webkit-scrollbar {

background:#fff;             

width:10px; 

}

::-webkit-scrollbar-thumb {

-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.5);

background-image: -webkit-linear-gradient(top, #3FB1AE  10%, #3FB1AE 51%);

}

::-webkit-scrollbar-track {

}

background:#fff; - kolor tła 

width: 10px - szerokość naszego paska

background-image: -webkit-linear-gradient(top, #3FB1AE  10%, #3FB1AE 51%) - kolory naszego paska,jeśli ma być on w jednolitym kolorze to ten sam kolor musi byc zarówno przy 10% i przy 51% aby uzyskać efekt tzw ombre na naszym pasku zmieniamy kolor albo przy 10% albo przy 51% 

Jeśli chcemy mieć dwukolorowy pasek bez efektu ombre to zmieniamy 10 % na 51% (wartościami procentowymi możemy się bawić) 

Oto kilka przykładów: 

Jeśli spodobał Ci się wpis, przekaż go dalej :)