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 </a>
<a href="LINK DO STRONY">NAZWA STRONY </a>
<a href="LINK DO STRONY">NAZWA STRONY </a>
<a href="LINK DO STRONY">NAZWA STRONY </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 trzeba dopisać za nazwą strony. Tak samo jak jest to w poprzednich.
- 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 dopisujemy kolejne
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
Przydatny kod, ja muszę poszukać jak brobić by ikonki były nierucjome z boku strony
OdpowiedzUsuńBlog Maddy -> klik
Napisz do mnie na maila to Ci powiem jak to zrobić ;)
UsuńŚ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ńAle za to masz talent do gotowania, a ja niestety nie :(
Usuńprzydatny post :)
OdpowiedzUsuńewamaliszewskaoff.blogspot.com
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 :)
OdpowiedzUsuńjust-aulia.blogspot.com
Ciesze się, że komuś się to przyda :)
Usuń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ńCiesze się, że Ci się spodobał mój blog :)
UsuńGenialne :D Dużo ciekawych porad można u Ciebie znaleźć :)
OdpowiedzUsuńO to właśnie chodzi, aby było dużo, ciekawych i przydatnych porad :)
UsuńFajnie, że stworzyłaś taki wpis! Z pewnością przyda się nie jednej osobie. Ja sama jestem kompletnie zielona z tymi kodami HTML ;P
OdpowiedzUsuńwww.nataliamajmonroe.blogspot.com
Nie Ty jedna, wiele osób jest zielonych jeśli chodzi o HTML ;)
UsuńŚ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 :)
OdpowiedzUsuńhttp://przygody-mileny.blogspot.com/
CSS jest częścią HTML ;)
Usuńbardzo przydatna instrukcja, pamiętam jak sama potrzebowałam w tej kwestii pomocy ;) pozdrawiam ;) http://creamshine.blogspot.com
OdpowiedzUsuńu mnie te kod nie działa, ikonki się nie pokazują, kombinuję ale nie wiem o co chodzi, no nic trudno...
OdpowiedzUsuń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ń