Jak zrobić strony z ikonkami

Jakiś czas temu ktoś na Ask.fm poprosił mnie o to abym zrobiła instrukcje na menu z ikonkami, a parę dni temu Wiktoria również poprosiła mnie o pomoc ze zrobieniem takich stron. Stwierdziłam, że skoro jest zapotrzebowanie na tego typu instrukcje to pojawi się ona na moim blogu, szczególnie, że ostatnio trochę zrobiło się ubogo jeśli chodzi o instrukcje blogowe. Na wstępie powiem, że będziemy pracowali w HTML/JavaScript oraz w arkuszu CSS.

1. Przechodzimy do układ i usuwamy obecne strony i w tym samym miejscu klikamy dodaj gadżet - HTML/JavaScript i wklejamy kod:

<div class='menu'>
<ul>
<a href="LINK DO STRONY">NAZWA STRONY&nbsp;&nbsp;&nbsp;</a>
<a href="LINK DO STRONY">NAZWA STRONY&nbsp;&nbsp;&nbsp;</a>
<a href="LINK DO STRONY">NAZWA STRONY&nbsp;&nbsp;&nbsp;</a>
<a href="LINK DO STRONY">NAZWA STRONY&nbsp;&nbsp;&nbsp;</a>
<a href="LINK DO STRONY">NAZWA STRONY</a>
</ul>
<div class='ikonki'>
<a href="LINK DO PROFILU SPOŁECZNOŚCIOWEGO"><img src="LINK DO IKONKI"/></a>
<a href="LINK DO PROFILU SPOŁECZNOŚCIOWEGO"><img src="LINK DO IKONKI"/></a>
<a href="LINK DO PROFILU SPOŁECZNOŚCIOWEGO"><img src="LINK DO IKONKI"/></a>
</div></div>

1a. Jeśli potrzebujemy większej ilość stron to po ostatnim </a> przed </ul> dopisujemy <a href="LINK DO STRONY">NAZWA STRONY</a> Trzeba pamiętać aby do strony, która jest przed ostatnia i nie zawiera &nbsp;&nbsp;&nbsp; trzeba dopisać za nazwą strony. Tak samo jak jest to w poprzednich.

&nbsp; - To jest twarda spacja. Jeśli zrobimy spacje w tradycyjny sposób czyli klikając na klawiaturze to w kodzie nie zostanie ona odczytana. Dzięki tej spacji, nasze strony będą oddzielone od siebie, nie będą tworzyć ciągu wyrazów, tylko będą ładnie rozmieszczone. Jak widać ja w kodzie zrobiłam trzy spacje, jednak jeśli chcemy aby nasze strony były od siebie dalej to po każdym ostatnim &nbsp; dopisujemy kolejne &nbsp;

1b. Jeśli potrzebujemy większej ilości ikonek to po ostatnim </a> przed </div></div> dopisujemy <a href="LINK DO PROFILU SPOŁECZNOŚCIOWEGO"><img src="LINK DO IKONKI"/></a>

2. Przechodzimy do szablon - dostosuj - dodaj arkusz CSS.

Jak na razie nasze strony prezentują się tak:

Nie za ciekawie to wygląda dlatego musimy dodać kod CSS aby nasze strony wyglądały jakoś sensownie.

Pierwsza część kodu ma klasę "menu" czyli .menu - to nasz selektor dotyczący stron. Druga część kodu ma klasę "ikonki" czyli .ikonki - to nasz selektor dotyczący ikonek.

Mój kod prezentuje się tak:

.tabs-outer {
background-color:#741b47;
}
.menu {display:inline-block; max-width: 1240px; text-align:center; font-family: Times New Roman; font-size:13px; text-transform:none; letter-spacing:2px; padding:8px; margin-top:4px; margin-bottom: 4px;}
.ikonki {margin: -27px 190px -15px 770px; max-width: 1240px; text-align:center; font-family: Times New Roman; font-size:13px; text-transform:none; letter-spacing:2px; padding:8px;}
.menu a:link {color: #fff;}
.menu a:visited {color: #fff;}
.menu a:hover {color: #d5a6bd;}
a:hover {text-decoration: none;}

Wszystkie pogrubione wartości są zmienne. Efekt końcowy u mnie prezentuje się tak: 

Najlepiej sprawdzają się ikonki w rozmiarach 20x20px lub 24x24px