Jak zrobić nieruchome menu nad nagłówkiem

poniedziałek, 9 maja 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:

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