Jak zrobić strony z ikonkami

27 maja 2015


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 

18 komentarzy:

  1. Przydatny kod, ja muszę poszukać jak brobić by ikonki były nierucjome z boku strony
    Blog Maddy -> klik

    OdpowiedzUsuń
    Odpowiedzi
    1. Napisz do mnie na maila to Ci powiem jak to zrobić ;)

      Usuń
  2. Świetny wpis, ja niestety cierpię na kompletny brak informatycznego talentu, żeby cokolwiek na swoim blogu czy koputerku wyczyniać, ale innym na pewno się przyda:)

    OdpowiedzUsuń
    Odpowiedzi
    1. Ale za to masz talent do gotowania, a ja niestety nie :(

      Usuń
  3. przydatny post :)

    ewamaliszewskaoff.blogspot.com

    OdpowiedzUsuń
  4. Bardzo przydatne. Ostatnio właśnie szuakałam takiej pomocy, a nie mogłam znaleźć. Dlatego ciesze się, że napisałaś u siebie o tych stronach z ikonkami :)

    just-aulia.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Ciesze się, że komuś się to przyda :)

      Usuń
  5. Przejrzałam blog i bardzo mi się podoba, aż sobie zapisze go w zakładce czytanych blogów, bo sporo ciekawych blogowych instrukcji widzę :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Ciesze się, że Ci się spodobał mój blog :)

      Usuń
  6. Genialne :D Dużo ciekawych porad można u Ciebie znaleźć :)

    OdpowiedzUsuń
    Odpowiedzi
    1. O to właśnie chodzi, aby było dużo, ciekawych i przydatnych porad :)

      Usuń
  7. Fajnie, że stworzyłaś taki wpis! Z pewnością przyda się nie jednej osobie. Ja sama jestem kompletnie zielona z tymi kodami HTML ;P
    www.nataliamajmonroe.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie Ty jedna, wiele osób jest zielonych jeśli chodzi o HTML ;)

      Usuń
  8. Świetny poradnik, na pewno skorzystam, ponieważ dopiero zaczynam swoją przygodę z tworzeniem bloga kodem CSS, zazwyczaj korzystałam z HTML, który w zasadzie też jest używany na bloggerze :)
    http://przygody-mileny.blogspot.com/

    OdpowiedzUsuń
  9. bardzo przydatna instrukcja, pamiętam jak sama potrzebowałam w tej kwestii pomocy ;) pozdrawiam ;) http://creamshine.blogspot.com

    OdpowiedzUsuń
  10. u mnie te kod nie działa, ikonki się nie pokazują, kombinuję ale nie wiem o co chodzi, no nic trudno...

    OdpowiedzUsuń
  11. Za wiele to mi nic nie mówi. Nie mogę pomóc, skoro nie mam linku do bloga ani nie wiem w czym problem dokładnie.

    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