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!

Zapraszam na ankietę! To tylko jedno pytanie :)