sobota, 13 sierpnia 2016

Poradnik Designu #6 Jak zrobić pasek stron nad nagłówkiem?

Hej! W dzisiejszym poście przygotowałam dla Was krótki poradnik designowy. Na wstępie zachęcam do wypełnienia ankiety. Tymczasem zapraszam do dalszej części!
Zaczynamy od stworzenia stron.
Następnie dodajemy gadżet strony i przeciągamy pod nagłówek!
Wchodzimy w szablon > dostosuj > zaawansowane > dodaj arkusz CSS. Wklejamy tam ten kod:
#PageList1 {z-index:100; text-align:center} #PageList1 ul {background: #3bb6fe; position: fixed; top: 0px; left: 0px ; width: 100%}
#PageList1 ul li {float: none; display: inline;}
#PageList1 li a:link, #PageList1 li a:visited {text-transform: uppercase; color: #fff; padding: 5px 15px; font-family: 'PT Sans', serif; font-size: 16px; font-weight: 100;}
#PageList1 li a:hover {color: #000; background: #3bb6fe; transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; -o-transition:all 0.5s;}

Wszystkie wartości można zmieniać według uznania.

Analiza kodu:
położenie tekstu (center, left, right)
tło
ilość pikseli od góry
ilość pikseli od lewej
wielkie litery; jeżeli chcesz małe zmień na samo case
kolor tekstu
grubość paska
odległości między słowami
czcionka
wielkość czcionki
kolor tekstu po najechaniu
kolor tła po najechaniu

Efekt:

No i to tyle w dzisiejszym poście! Mam nadzieję, że Wam się spodobał. Tymczasem zapraszam do komentowania, udostępniania oraz obserwowania bloga. Pozdrawiam Was i do zobaczenia już za tydzień!

14 komentarzy:

  1. Bardzo przydatny post! Mam nadzieję, że zobaczę więcej tego typu notek. Obserwuję :)

    OdpowiedzUsuń
  2. Może kiedyś skorzystam :) Przydatny post!

    OdpowiedzUsuń
  3. Bardzo przydatny post!
    http://m-grabowska.blogspot.com/

    OdpowiedzUsuń
  4. Fajny, prosty poradnik. Teraz dużo blogów ma takie wygodne paski zakładek u góry strony, więc na pewno post przyda się wielu osobom :D
    Pozdrawiam i zapraszam do siebie
    andszei.blogspot.com

    OdpowiedzUsuń
  5. Taki średnio pomocny ten post :P Spodziewałam się, że dowiem się jakichś niecodziennych metod na ulepszenie bloga :C

    Turkusowa Sowa

    OdpowiedzUsuń
    Odpowiedzi
    1. No niestety, ale u mnie w postach z tej serii raczej jest jeden lub kilka kodów na zmianę wyglądu bloga, a nie ogólnie polepszenie. Ale uspokoję Cię mam w planach taki post. Możesz też zajrzeć do innych wpisów z tej serii, tam może uda Ci się zobaczyć coś co Cię interesuje.

      Usuń
  6. Ten post z pewnością przyda się wielu osobom :D
    Pozdrawiamy i zapraszamy do nas :)
    http://shutupanddancewithus.blogspot.com/

    OdpowiedzUsuń
  7. Co do moich przygód z desing'em polecam przeczytać pierwszy post na blogu! Najlepsze jest to, że w ty orku była powtórka z rozrywki :)

    Może wpadniesz na krótką historię anonimowego uzależnienia? :) Anonimowe: hit czy kit??

    Pozdrawiam cieplutko
    Julka.bb

    OdpowiedzUsuń
    Odpowiedzi
    1. Powiem Ci, że kiedyś trafiłam już na Twojego bloga, a było to wtedy gdy zaczynałaś, dlatego przeczytałam już ten post. Ja na początku nie miałam nic wspólnego z kodami CSS, a nawet nie wiedziałam, co to jest :D

      Usuń
  8. W końcu mam idealny swój pasek. Przejrzałam wiele tutków, ale ten mi najbardziej pasuje.

    OdpowiedzUsuń

♥ Dziękuję za każdy komentarz ♥
♥ Napisz coś wartościowego ♥
♥ Nie ma nic złego w krytyce, o ile jest konstruktywna ♥
♥ Nie komentuj samych zdjęć, pamiętaj że oprócz nich jest też tekst ♥
♥ Każdy obserwator ma miejsce w moim serduszku ♥