23 lip 2015

Miętowy Poradnik #1: Pasek stron

Wakacje mijają w zabójczym tempie! Zanim się obejrzymy będziemy mieli już sierpień, a wtedy już czas zleci w mgnieniu oka i znów zasiądziemy (o zgrozo!) w szkolnych ławkach... 
Parę razy otrzymywałam pytanie jak wykonać pasek stron nad nagłówkiem. Aby rozwiać wszelkie wątpliwości postanowiłam stworzyć ten tutorial. Zarazem powstała nowa seria! A mianowicie "Miętowy Poradnik". Znajdą się w niej porady dotyczące designu bloga i nie tylko! Zapraszam do zapoznania się z instrukcją!

 1. Jeżeli chcemy dodać własne strony wchodzimy w "Strony", a następnie klikamy "Nowa strona". Tam tworzymy dowolnie wybraną przez siebie treść przyszłej zakładki.
2. Następnie wchodzimy w Układ → Dodaj gadżet → Strony. Ważne jest, by gadżet "Strony" dodać pod nagłówkiem!
3.  Dla początkujących mała wskazówka, gdzie należy wpisywać kody CSS.
Szablon → Dostosuj → Zaawansowane → Dodaj arkusz CSS
 Kolejnym krokiem jest wklejenie poniższego kodu w pole do arkuszy CSS.

#PageList1 {z-index:200; } #PageList1 ul {background: #000; position: fixed; top: 0px; left: 30px ; width: 3000px;}

Pochyła czcionka to kolor całego paska. Możecie go zmienić wpisując wybrany przez Was kod koloru, który możecie znaleźć w palecie RGB (klik!)

#PageList1 ul li {float: none; display: inline;}
#PageList1 li a:link, #PageList1 li a:visited {text-transform: uppercase; color: #fff; padding: 10px 20px; font-family: 'Georgia', serif; font-size: 16px; font-weight: 400;}

Znów mamy do czynienia z kolorem, lecz tym razem tekstu "zakładek". Następne zaznaczone kolorem wartości to szerokość paska w pionie oraz odległość między napisami oraz ich czcionka. Ostatnia podkreślona liczba to rozmiar czcionki.

#PageList1 li a:hover {color: #000; background: #fff; transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; -o-transition:all 0.5s;} 

Teraz mamy do czynienia z kolorem czcionki oraz kolorem tła po najechaniu kursorem myszy. Również wybieramy je z palety RGB.

Wskazówka! Kod ten najlepiej sprawuje się na prostym szablonie Simple. Na innych również, lecz mogą występować komplikacje ;)

Przypominam o konkursie!!! KLIK!
http://fabrykamiety.blogspot.com/2015/07/roczek-bloga-konkurs-urodzinowy.html

Zapraszam na ankietę! To tylko jedno pytanie :)

102 komentarze:

  1. Bardzo przydatny poradnik! Z pewnością przyda się wielu osobom :)

    Pozdrawiam cieplutko ^^
    Zapraszam na konkurs! KONKURS |KLIK|
    ♥by-sylwia.blogspot.com♥

    OdpowiedzUsuń
  2. przydatny post świetny poradnik !
    http://oliwialiv.blogspot.com/

    OdpowiedzUsuń
  3. bardzo przydatny poradnik. jak znajdę czas to na pewno wykorzystam u siebie :)

    OdpowiedzUsuń
  4. Bardzo podoba mi się ta nowa seria, czekan na kolejne pomysły ;)

    adgam.blogspot.com

    OdpowiedzUsuń
  5. bardzo przydatne! : )

    Zapraszam do siebie! :)
    https://xaaleksandra.blogspot.com/

    OdpowiedzUsuń
  6. Ooo, już się nie mogę doczekać kolejnych poradników :) Wyśmienicie!
    Pozdrawiam i ściskam mocno :)


    Jeśli możesz to poklikaj :) Będę wdzięczna

    OdpowiedzUsuń
  7. Odpowiedzi
    1. Korzystam właśnie, do mojego nowego szablonu. Info, może przydatne w instrukcji ( możesz dopisać jeśli chcesz xd). Na szablonie "Rewelacja'' CZARNYM działa bez zarzutu. Na białym są ledwo zauważalne komplikacje, ale też daje radę prawie bez zarzutu. Innych nie sprawdzałam.
      Pozdrawiam!
      Ruciakowa :)

      Usuń
  8. Bardzo przydatny poradnik ;)
    Masz prześliczny szablon. :3
    xoxo // mój blog

    OdpowiedzUsuń
  9. poradnik fajny, ale mój blog jest już w pełni gotowy, buziaki:*

    zapraszam luczijka.blogspot.com

    OdpowiedzUsuń
  10. Fajny pomysł na nową serię :) Myślę, że początkującym i tym, którzy jeszcze czegoś nie potrafią na pewno się przyda.

    Pozdrawiam!
    miniifluff

    OdpowiedzUsuń
  11. Bardzo fajny poradnik :) Ostatnio stworzyłam nowego bloga więc cały czas bawię się jeszcze z tym całym 'wyglądem', jakby co to na pewno skorzystam z twoich porad :D
    Pozdrawiam ^^
    dreams-lunatyk.blogspot.com

    OdpowiedzUsuń
  12. Jak będę zmieniać wygląd bloga to na pewno skorzystam z tego poradnika. :)

    http://justdaaria.blogspot.com/

    OdpowiedzUsuń
  13. Wszędzie szukałam takiego poradnika! Dzięki wielkie, na pewno skorzystam :)

    OdpowiedzUsuń
  14. Fajnie, ze osoby, które umią robić ładne designy (nwm czy tak to się piszę) XD pomagają innym zapoznać się z tym światem :)
    meerga.blogspot.com

    OdpowiedzUsuń
  15. Fajnie że poradziłaś jak to zrobić.

    ♥ Pozdrawiam ♥
    ♥ All Pastel World ♥ <-- klik

    OdpowiedzUsuń
  16. Świetny poradnik, ostatnio usunęłam pasek stron, ale zastanawiam się czy nie popełniałam błędu.
    Poklikasz w linki w tym poście i banery po prawej stronie? Odwdzięczę się obserwacją za podanie cen w komentarzu. :)
    http://bruneheureuse.blogspot.com/2015/07/wspopraca-z-soufeel_21.html

    OdpowiedzUsuń
  17. Uwielbiam takie poradniki, bo ja jestem zielona w tych sprawach :)

    OdpowiedzUsuń
  18. Super poradnik <3
    patrycja-paulina.blogspot.com

    OdpowiedzUsuń
  19. Przydatny post, skorzystam najbliższym czasie :)
    Poszerzając horyzonty - Klik!

    OdpowiedzUsuń
  20. Super post! <3

    Zapraszam do mnie :) Dopiero zaczynam :)
    Mój blog - klik!

    OdpowiedzUsuń
  21. Dla niektórych rady się napewno przydadzą :) Pozdrawiam i zapraszam
    Mój blog - klik!

    OdpowiedzUsuń
  22. Dla niektórych rady się napewno przydadzą :) Pozdrawiam i zapraszam
    Mój blog - klik!

    OdpowiedzUsuń
  23. Przydatny post! ;)
    Zapraszam do mnie:http://claudiev.blogspot.com
    Jeśli spodoba Ci się mój blog,zaobserwuj^^

    OdpowiedzUsuń
  24. Przydatny poradnik :)


    http://f0rder.blogspot.com/

    OdpowiedzUsuń
  25. Miętowy Poradnik - podoba mi się :)
    Jak będę kiedyś znów coś zmieniać to na pewno skorzystam, na razie mi się podoba :)
    Zapraszam! zuzu-zuzannaxx.blogspot.com

    OdpowiedzUsuń
  26. Oooo! Super, że doradzasz w takich sprawach!

    OdpowiedzUsuń
  27. Bardzo fajne porady ja jeszcze tego wszystkiego tak dobrze nie ogarniam;*
    MÓJ BLOG ZAPRASZAM-KLIKNIJ
    Mam prośbę jeśli masz czas to proszę poklikaj w linki w ostatnim poście będę bardzo wdzięczna
    Pozdrawiam<3

    OdpowiedzUsuń
  28. na pewno mi się przyda, ponieważ jestem początkującą blogerką, dopiero od tygodnia bloguję:>

    http://inspirationandvictoria.blogspot.com/

    OdpowiedzUsuń
  29. Super wpis, fajnie, że pomagasz innym :)

    OdpowiedzUsuń
  30. Poradnik jak zwykle genialny! Z pewnością wiele osób z niego skorzysta :)

    Pozdrawiam ♥,
    yudemere

    OdpowiedzUsuń
  31. Właśnie zauważyłam, że na samym dole strony są śliczne zdjęcia ^^ Fajny pomysł z takim paskiem, kolejnym, jak widać po poście
    U mnie jest on za sprawą najdroższej autorki bloga My Pastel Garden aktualnie. Ogólnie w takiej formie wygląda to bardzo ładnie, przejrzyście. Czyli jak powinno :)
    Opowiastki Prawdziwe (klik)

    OdpowiedzUsuń
  32. Ja mam pobrany szablon gotowy i dzięęęki Bogu - jest pasek! Ale jakby kiedyś moja niemądra osóbka postanowiła sama pokombinować - post zapisany w zakładkach :)
    ninazsensem

    OdpowiedzUsuń
  33. Super poradnik, zaraz zabieram się do robienia stron :D
    Zapraszam do mnie! ♥

    OdpowiedzUsuń
  34. super poradnik, na pewno przyda się wielu osobom ;* pozdrawiamy ;)
    dreamoutloudf.blogspot.com

    OdpowiedzUsuń
  35. Bardzo przydatna instrukcja, świetnie, że dzielisz się takimi radami z czytelnikami. Rzeczywiście fajnie to wygląda :)
    Bardzo lubię twoje posty! Oczywiście zagłosowałam w ankiecie.

    Pozdrawiam :)
    Po mojemu

    OdpowiedzUsuń
  36. Ooo, ten poradnik z pewnością wkrótce mi się przyda. ;)
    bgrenda.blogspot.com

    OdpowiedzUsuń
  37. U mnie to nie działa niestety ;/

    OdpowiedzUsuń
    Odpowiedzi
    1. Tak jak wspomniałam w poście - nie działa to odpowiednio na wszystkich szablonach. Należy też pamiętać o nadaniu odpowiednich selektorów itd. :)

      Usuń
  38. Bardzo fajnie, że pojawił się taki pomocny post :). Pozdrawiam!

    + Proszę o kliknięcie w link rzeczy w najnowszym poście: lublins.blogspot.com

    OdpowiedzUsuń
  39. Jasno wyjaśnione :D
    http://keepcalmandletithappen.blogspot.com/

    OdpowiedzUsuń
  40. przydatny post
    http://fashionbyalexandra1999.blogspot.com/

    OdpowiedzUsuń
  41. Kody css najlepszy sposób na ładnego bloga ;d

    OdpowiedzUsuń
  42. Skorzystam na pewno!
    pozdrawiam i zapraszam na mojego bloga:
    Klikniesz w linki w najnowszym poście?
    niuntis.blogspot.com

    OdpowiedzUsuń
  43. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  44. świetny poradnik, na pewno przyda się wszystkim początkującym blogerom

    magic-frenzy.blogspot.com

    OdpowiedzUsuń
  45. Super poradnik, bardzo przydatny ;)

    stegofashion.blogspot.com

    OdpowiedzUsuń
  46. Bardzo przydatny poradnik :)

    http://tamizaa.blogspot.com/

    OdpowiedzUsuń
  47. Fajny poradnik ♡♥♡♥

    http://wika-and-tika.blogspot.com/ ⇦Zapraszam.

    OdpowiedzUsuń
  48. Obserwuję, żeby dostać informację o miętowym poradniku!

    Veronica Memories- Klik

    OdpowiedzUsuń
  49. Przydatny wykorzystam :)

    Super blog będę zaglądać częściej :)

    potrzebuje kliknięć pomożesz będę wdzięczna :)
    http://natalia004j.blogspot.com/2015/07/dresslink.html

    OdpowiedzUsuń
  50. Świetny poradnik, genialnie to wytłumaczyłaś! Ze zniecierpliwieniem czekam na następne części. ;)
    POKLIKASZ W LINKI? DAJ ZNAĆ, JAK MAM SIĘ ODWDZIĘCZYĆ!

    OdpowiedzUsuń
  51. Zostałaś nominowana do LBA. Gratulacje :) Więcej informacji znajdziesz u mnie. Zapraszam :)
    http://mosionek.blogspot.com/2015/07/liebster-blog-award.html

    OdpowiedzUsuń
  52. I love your blog and your personality, keep going!

    Izabell | SSleek /KLIK/

    PS: follow for follow? Let me know, I always follow back!

    OdpowiedzUsuń
  53. Super poradniczek :) Zapraszam również do mnie -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    takie-beauty-ze-az-ful.blogspot.com

    OdpowiedzUsuń
  54. Świetna rada :)
    Wziełam udział w ankiecie
    http://official-patty.blogspot.com/

    OdpowiedzUsuń
  55. swietny post, zastanawiałam się kiedyś nad tym. pozdrawiam.
    daryyl.blogspot.com

    OdpowiedzUsuń
  56. Hi dear <3 ! now I follow u! i hope that u can follow me as well .
    Another earth pink

    OdpowiedzUsuń
  57. Jestem nowa na blogu, także takie poradniki są dla mnie przydatne :) Mój Blog - klik!

    OdpowiedzUsuń
  58. Świetnie napisane! Na pewno przyda się początkującym "mieszaczom w kodzie" ;-)

    Bardzo mi się podobają te kropeczkowe "kierunkowskazy"!

    OdpowiedzUsuń
  59. Bardzo przydatny post :)
    Obserwowanie za obserwowanie?
    Zacznij :)
    http://malwinabeczek.blogspot.com/

    OdpowiedzUsuń
  60. Mega przydatny poradnik! Bardzo jestem zadowolona z tego posta :)
    Zapraszam do mnie, gdybyście poklikały w linki to odwdzięczę się ;)
    OBSERWUJĘ! :)
    seecreetivee.blogspot.com

    OdpowiedzUsuń
  61. przyda sie ^^
    http://unconventionallygirl.blogspot.com/?m=1

    OdpowiedzUsuń
  62. przydatny poradnik, skorzystam z rad ;)

    izzy-bblog.blogspot.com

    OdpowiedzUsuń
  63. Świetny poradnik. Pewnie pomogłaś wielu osobom! Mi również! Świetny blog!

    mery-neon.blogspot.com - klik

    OdpowiedzUsuń
  64. Super poradnik, na pewno mi się przyda tym bardziej, że mam małe zlecenie na zrobienie bardziej profesjonalnego szablonu na czyjegoś bloga :)

    Mój Blog - zerknij! Zapraszam :)

    OdpowiedzUsuń
  65. Poradnik bardzo przydatny, ponieważ zaczęłam próbować swoich sił w wyglądzie mojego bloga! :)
    Zostaję tu na dłużej :D

    Zapraszam do mnie:
    kari-and-kari.blogspot.com/

    OdpowiedzUsuń
  66. Przydatny poradnik, muszę właśnie jescze zrobić kolka stron :D
    KLIK-BLOG

    OdpowiedzUsuń
  67. Świetny blog! Chętnie będę tutaj zaglądać patrząc czy są jakieś nowości :)
    Zapraszam również do mnie Blondyneczka Calineczka!
    Pozdrawiam

    OdpowiedzUsuń
  68. Świetny post nie mogę doczekać się kolejnego :)
    lositi.blogspot.com

    OdpowiedzUsuń
  69. Wow, ten tutorial jest świetny, czekam na kolejny z serii Miętowego Poradnika :)

    http://crafty-zone.blogspot.com/

    OdpowiedzUsuń
  70. Bardzo przydatny wpis! :)
    Pozdrawiam, stylstynka :*

    OdpowiedzUsuń
  71. Bardzo pomocne. Dobrze, że zaczynasz serie poradników, bo z chęcią nauczę się czegoś nowego. :)
    positivelikeedith.blogspot.com

    OdpowiedzUsuń
  72. Świetny poradnik. Sama kilka miesięcy temu szukałam pomocy w kwestii paska stron. Na pewno przyda się wielu osobom :)

    KLIK <-- Mój blog! :)

    OdpowiedzUsuń
  73. Bom dia
    Amei este post e me encantei em conhecer o seu blog. Ele é cheio de estilo, ótimas dicas e tem uma aparencia espetacular! Fiquei muito feliz em te conhecer.

    viciadasemlivros911.blogspot.com.br

    OdpowiedzUsuń
  74. Uwielbiam takie poradniki. Jest łatwo i czytelnie wytłumaczone krok po kroku ;)

    Zapraszam do mnie. Piszę o książkach, filmach muzyce no i o mnie ;)
    viss-vitalis.blogspot.com

    OdpowiedzUsuń
  75. Przydatny post. Jak będe w domu na 100% skorzystam
    Wpadniesz?
    http://zuzannaobsadna.blogspot.com/

    OdpowiedzUsuń
  76. Bardzo fajnie, że o tym napisałaś. Z chęcią skorzystam !
    Zapraszam do mnie!

    OdpowiedzUsuń
  77. Właśnie skończyłam zmieniać wygląd mojego bloga i bardzo mi przy tym pomogłaś. Dziękuję! :)

    BLOG-KLIK

    OdpowiedzUsuń
  78. Mega przydatne są takie rady! :*
    _________
    BLOG

    OdpowiedzUsuń
  79. Przydatny post, ja jednak wiem jak to zrobić ale na pewno bym skorzystała! :)

    Mój blog - klik!

    OdpowiedzUsuń
  80. no co nie co działam w designach. mimo wszystko instrukcja przydatna. masz świetny nagłówek! w jakim programie takowy stworzyłaś?

    OdpowiedzUsuń
  81. Sama wiem, jak takie info się bardzo przydaje! Super seria, powodzenia! :)

    Nowy Post!- Klik!

    OdpowiedzUsuń
  82. bardzo przydatny poradnik! :)
    http://diary-of-juuliet.blogspot.com/

    OdpowiedzUsuń
  83. Super, że o tym piszesz. Początkującym na pewno pomoże :) Obserwuję.
    Claude
    Pozdrawiam i zapraszam:
    http://obudzona-ze-wschodem-slonca.blogspot.com/

    OdpowiedzUsuń
  84. Rób więcej takich poradników!. :)
    Bardzo fajny blog :).
    -------------------
    Mini konkurs! Kliknij w banner sheinside( sprawdzam) w bocznym pasku.
    Napisz w poście czy kliknelaś i link do bloga.
    A ja wylosuje blogi, które polece w poście, a jeden umieszcze w bocznym pasku 'czytam'.
    Mój Blog - klik!
    -------------------
    zAPRASZAM! I DZIĘKI.

    OdpowiedzUsuń
  85. Ja akurat znam sposób na ten dodatek, ale gdybym nie wiedziała to post na pewno bardzo by mi się przydał! Fajnei to wszystko wyjaśniasz :)

    Mój blog - klik!

    OdpowiedzUsuń

*Każdy komentarz mile widziany.
*Obraźliwe wypowiedzi zostaną usunięte.
*Jeżeli blog Ci się spodobał - zaobserwuj.
*Nie odpowiadam na LBA, choć dziękuję bardzo za wszelkie nominacje ;)