UWAGA! Po skopiowaniu szablonu należy w edycji blogu włączyć Optymalizację szablonu. Ścieżka do niej to: Wygląd - Pozostałe - Optymalizacja pod wyszukiwarki.

Jak zrobić chmurkę tagów

Wiele osób pyta mnie co zrobić, aby utworzyła się chmurka tagów, podobna do tej z mojego blogu.
Mam nadzieję, że instrukcja pomoże zwłaszcza tym, którzy niewiele mają wspólnego z css.

Otóż klikamy w WYGLĄD, potem w EDYCJA CSS i juz jesteśmy na miejscu. Rozwijamy arkusz z kodami i musimy wkleić do niego ten oto kod.  Najlepiej na koncu arkusza. Możemy sobie nieco usprawnić pracę i niektóre elementy dopisać do odpowiednich istniejących już w arkuszu.

#BlogChmuraTagowBox {}
#BlogChmuraTagowTytul {}
#BlogChmuraTagowBox li {display: inline; padding: 1px}
#BlogChmuraTagowBox ul {margin:5px; padding: 0px}
#BlogChmuraTagowBox a {}
#BlogChmuraTagowBox a:hover {}


Po kolei omówię poszczególne zapisy:
I tak: 

#BlogChmuraTagówBox -  najprościej dopisać tę sekwencję do #BlogZakładkiBox lub #BlogTytułyOstatnichWpisow oczywiście po przecinku:

#BlogTytulyOstatnichWpisow, #BlogChmuraTagowBox {}

Poprzez dopisanie do istniejącego już boxu korzystamy z jego opisu. Nie musimy tworzyć na nowo, zwłaszcza, gdy nie znamy się na tym.

Podobnie robimy z tytułem. #BlogChmuraTagowTytul dopisujemy do #BlogTytulBoxaOstatnichWpisow. Tytuł "Tagi" wyświetli nam się w identyczny sposób jak tytuły zakładek, tą samą czcionką, tej samej wielkości i koloru, a nawet i miejsca;)
Proszę się nie przerazić, gdy obok selektora #BlogTytulOstatnichWpisow po przecinku zobaczy się #BlogAutorzyTytul. Te dwa elementy zazwyczaj w arkuszu występują wspólnie. My stawiamy przecinek i dopisujemy #BlogChmuraTagowTytul. Wyglądać będzie to tak:

#BlogTytulBoxaOstatnichWpisow, #BlogAutorzyTytul, #BlogChmuraTagowTytul {}

Po przecinakch jest spacja!

Idźmy dalej:

#BlogChmuraTagowBox li {display: inline; padding: 1px} 
#BlogChmuraTagowBox ul {margin:5px; padding: 0px}


Te dwa elementy możemy wkleić w takiej postaci jak widać. Nie doklejamy ich do żadnych innych elementów.
Najlepiej umieścić je w arkuszu na końcu.

#BlogChmuraTagowBox li tworzy z pionowej wypunktowanej listy listę ułożoną w poziomie. To jest cała tajemnica chmurki tagów:)

#BlogChmuraTagowBox ul - to jest część chmurki bez tytułu.

Pozostały jeszcze dwa selektory:

#BlogChmuraTagowBox a {}
#BlogChmuraTagowBox a:hover {}


Pierwszy określa kolor i ewentualne podkreślenia słów-tagów, drugi to samo, ale po najechaniu myszką. Możemy wkleić je pod poprzednimi elemetami. Kolory stosujmy takie, jakie mamy w zakładkach. Wpisujemy je w nawias klamrowy, np:

#BlogChmuraTagowBox a {color: #333333; text-decoration: none;}
#BlogChmuraTagowBox a:hover {color: #666666; text-decoration: underline;}


Wszelkie pytania i niejasności proszę wpisywać w komentarzu na tym blogu. W miarę wiedzy odpowiem.

Tu napisałam szczegółową instrukcję



forum o css