Jak zrobić nieruchome menu nad nagłówkiem

09.05.2016


Zastanawiałeś się kiedyś jak zrobić statyczne strony Bloggera nad nagłówkiem? Doskonale wiemy, że Blogger umożliwia nam opcje stworzenia statycznych stron, ale tylko pod nagłówkiem, więc co zrobić jak chcemy mieć je na górze naszego bloga? Pewnie sobie myślisz "trzeba mieszać w kodzie" - racja, ale nie aż tak bardzo jakby mogło nam się to wydawać i również można ten zabieg wykonać za pomocą CSSa, jednak jest on mało precyzyjny. Zaprezentuje Wam dwa sposoby jak można to zrobić. Żeby było jasne - statyczne menu czyli takie, które pozostaje na swoim miejscu, nie porusza się wraz z blogiem. Taki efekt, możecie zaobserwować u mnie na blogu.

ZRÓB KOPIE ZAPASOWĄ SZABLONU! TUTAJ ZNAJDZIESZ INFORMACJE JAK TO ZROBIĆ

Sposób pierwszy - CSS

1. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy kod:

.tabs-outer {top: -165px;
background: #ddd;
margin-left: -235px;
margin-right: -234px;}

Oczywiście można dopisać jakieś własne style dla naszego menu do tego kodu, a wszystkie pogrubione wartości są zmienne.

Efekt:




Sposób drugi - HTML i CSS 


1. Przechodzimy do szablon - edytuj kod HTML

2. Klikamy kursorem obojętnie w jakie miejsce w kodzie i wybieramy ctrl + f

3. Wyszukujemy takiej frazy <div class='tabs-outer'>

4. Wycinamy kod, który zaznaczony jest w ramce na poniższym zdjęciu


5. Teraz wyszukujemy <div class='header-outer'>  i tuż NAD nim, wklejamy nasz wycięty kod


6. Zapisujemy szablon

7. Nasze strony prezentują się tak:



8. Teraz dodajmy styl CSS, aby nasze strony się jakoś prezentowały. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy kod:

.tabs-outer {background: #ddd;
top: -40px;
text-transform: uppercase;
letter-spacing: 2px;}
.tabs-outer { margin-left: -100px;
margin-right: -94px;}

Wszystkie pogrubione wartości są zmienne, oczywiście, możemy dopisać coś "od siebie"

Efekt:


19 komentarzy:

  1. Kurcze, chciałabym kiedyś sama zrobić szablon 💜

    OdpowiedzUsuń
  2. Katarzyna Markiewicz11 maja 2016 19:45

    Kiedy naszła mnie chęć do zmiany designu mojego bloga to przez pewien czas natykałam się na setki blogów o tej tematyce, ale przyznam, że ten Twój jest jednym z najlepszych, najbardziej zrozumiałych, przejrzystych i estetycznych! Podziwiam, dziękuję i pozdrawiam ♥
    THE PRETTY FRECKLES

    OdpowiedzUsuń
  3. Nie uważam się za jakąś specjalistkę, ale mówiąc szczerze niewiele jest osób, które piszą tego rodzaju blogi czy same instrukcje i się na tym naprawdę znają :) Ja w tym siedzę już jakiś czas, więc wiem na czym to polega i może dlatego moje instrukcje są przejrzyste ;) Dziękuję za miłe słowa :)

    OdpowiedzUsuń
  4. Nic nie stoi na przeszkodzie :D

    OdpowiedzUsuń
  5. Aha musimy Ci napisać (już sporo po fakcie ale zawsze) masz ładny nagłówek :) Idealnie pasuje do Twojego bloga :)

    OdpowiedzUsuń
  6. jeśłi dobrze rozumiem ten myk ma polegać na tym że menu ma być przypięte nad logiem naszego blogu i ma być zawsze na wierzchu.. lecz mi ten myk nie działa.. zrobiłem testowy blog i nie chce przypisując to tak jak u Ciebie na blogu wygląda.. :|

    OdpowiedzUsuń
  7. Podaj link do bloga. Prawdopodobnie wina leży po Twojej stronie (źle wklejasz kod lub jest niedomknięty - ucinasz). Specjalnie sprawdziłam na innych blogach - działa u innych osób również. Bez linku do bloga nic nie mogę poradzić.

    OdpowiedzUsuń
  8. Trochę Ciężko pomylić coś jak się robi kopiuj i w klej ale jednak szansa na to jakaś znikoma jest.. Kurde głupio tak się jak by reklamować w ten sposób ( nie przepadam za tym ) ale skoro to jednany droga do pomocy to proszę www.notkipi.blogspot.com - jednak chciał bym uprzedzić że trochę tam się bawię więc może trochę jeszcze nie wyglądać to za dobrze.. :D :P

    OdpowiedzUsuń
  9. Masz menu wklejone tak jak było standardowo - wykonaj instrukcje jeszcze raz i wtedy daj znać ;) W innym wypadku mija się to z celem

    OdpowiedzUsuń
  10. hmm.. jeśłi przez wklejenie standardowe masz na myśli menu wykonane w html / css to tak tak robiłem to menu. Natomiast próbowałem pierwszego sposobu, bo w drugim przy kodzie html napisane jest żeby wkleić jakiś kod, tylko jaki kod - bo nie jest to wspomniane ani pokazane ?

    żeby tego nie przeciągać to napiszę do Ciebie maila jak nadal nic z tym nie zdziałam - jeśłi mogę ..

    OdpowiedzUsuń
  11. Oczywiscie ze jest napisane jak byk - nawet pokazane na zdjęciu, bo kod jest juz w szablonie i cały trik opiera sie na tym aby wyciac kod stron (ktory jest pokazany we wpisie) i go przeniesc. Instrukcja dotyczy stron bloggerowych czyli tych dodanych za pomoca dodaj gadzet - strony a nie za pomocą dodaj gadzet - HTML/JavaScript. Oczywiście mozesz napisac maila, ale tutaj ewidetnie zle zrozumiales wpis z tego co wnioskuje z Twojego komentarza

    OdpowiedzUsuń
  12. A co w przypadku kiedy nie nie ma się w kodzie ani ? czy istnieje ich inny zapis?

    OdpowiedzUsuń
  13. a jak zrobić, żeby to menu na górze było tak jak u Ciebie na całą szerokość strony, mimo węższego układu bloga? Nie chce mieć bloga strasznie szerokiego, ale chcę, żeby pasek był na całą szerokość strony. Kombinuję i kombinuję, ale coś mi umyka.

    OdpowiedzUsuń
  14. To menu mam zrobione w kodzie html dlatego tak jest + mam zmodyfikowany szablon tak aby góra i dół bloga (stopka) była na całą szerokość bloga, więc u mnie każde menu będzie na całą szerokość.

    OdpowiedzUsuń
  15. przepięknie to wygląda! Podpowiesz mi jak się za to zabrać, czy to juz za duża ilość zdradzonych sztuczek magika? ;)

    W ogóle dzięki za Twoją świetną pracę! Siedziałam wczoraj do środka nocy i grzebałam w swoim przyszłym blogu używając Twoich wskazówek. :)

    OdpowiedzUsuń
  16. Jeśli chodzi o to menu co mam na górze, to w najbliższym czasie będzie na to instrukcja (jeszcze nie wiem czy w poniedziałek czy w inny dzień) :)
    Natomiast jeśli chodzi o to jak zrobić aby na całą szerokość była stopka bloga i góra (menu i nagłówek) to na razie nie planuje robić instrukcji na to, bo jest to trochę skomplikowane i musiałabym się nad tym bardzo zastanowić :)

    OdpowiedzUsuń
  17. ok, dzięki! miłego dnia :)

    OdpowiedzUsuń

- 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