Jak zmienić wygląd paska przewijania na blogu

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



10 komentarzy:

  1. Pomocne bardzo :D

    http://luxwell.blogspot.com/2014/11/3-sezonowcy.html

    OdpowiedzUsuń
  2. Skąd Ty to wszystko wiesz?:) jak zwykle przydatne informacje:)

    OdpowiedzUsuń
  3. Ale fajny dodatek :)
    teenluxy.blogspot.com

    OdpowiedzUsuń
  4. Bardzo przydatne. Takie rzeczy zawszę wydawały mi się trudne. :)

    OdpowiedzUsuń
  5. Przydatny post :) Czekam na więcej takich, bo u mnie coś słabo z html i css, a znaleźć ciekawe źródło jest ciężko :)

    OdpowiedzUsuń
  6. A jak wydłużyć ten pasek?

    OdpowiedzUsuń
    Odpowiedzi
    1. Pasek sam się wydłuża zależnie od treści na blogu - im więcej treści na stronie tym pasek jest krótszy, mnie treści = pasek dłuższy

      Usuń
  7. Witam, mam pytanie. Czy orientujesz się w jaki sposób zmienić styl ankiety blogger'a?
    Na stronie głównej mojego serwisu ( http://obserwatorgieldowy.blogspot.com ) wrzuciłem ankietę i nie mam pomysłu jak zastąpić domyślne czcionki na takie jak w przypadku pozostałych widgetów. Dziękuję za pomoc.

    OdpowiedzUsuń
    Odpowiedzi
    1. Aby modyfikować styl gadżetu "ankieta" bloggera, to niestety bezpośrednio przez kod CSS się nie da. Trzeba poszukać zastępników, stron, na których można taką ankietę stworzyć i dowolnie modyfikować, po czym kod wkleić w gadżecie HTML/JavaScript

      Usuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez Blonparia