O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Górne poziome menu w szablonach sportowych, dodawanie kodu

Aktualnie nie korzystam na moim blogu z szablonami z górnego poziomego menu. To chyba poważnie niedopatrzenie z mojej strony bo właśnie w takim menu najwygodniej umieścić linki do spraw generalnych jak informacje o blogu, kontakcie, księdze gości czy innych przydatnych rzeczach, które zawsze powinny być pod ręką choć bardzo rzadko się z nich korzysta.

W szablonach sportowych, które poprawiałam ostatnio, zrobiłam dodatkowe górne menu. Wykorzystałam w tym celu listę nieuporządkowaną, którą zamieniłam przy użyciu css w listę poziomą. Efekt jest łatwy do zobaczenia w każdym z tych sportowych szablonów a często, w związku z tym, że takie menu umieszczone jest w okolicach winiety tytułowej, stanowi ono istotny element wizualny szablonu.

górne poziome menu szablonów sportowych

Menu jest przydatne, w szablonach sportowych ma opisany estetyczny, dopasowany do reszty wygląd ale jak je dodać u siebie? Jak sprawić, że pojawi się na własnym blogu? Aby ułatwić wszystko stworzyłam stronę z szybką i prostą instrukcją, którą będę systematycznie uaktualniała. Tutaj natomiast nieco dokładniej, tak dla nawet bardzo zielonych opiszę jak dodać u siebie odpowiedni kod.

Element poziomego górnego menu stworzymy podobnie jak poprzednie elementy html takie jak TrzeciaSzpalta czy uStopka. HTML to HTML są pewne znaczniki, które można wykorzystać do tworzenia elementów zawierających tekst i w zasadzie można to sobie zrobić po swojemu zachowując jedynie mój identyfikator aby element był umiejscowiony w miejscu przeze mnie określonym. Najlepiej jednak będzie zrobić to tak jak ja aby uzyskać dokładnie taki sam efekt.

TopMenu TopMenu TopMenu TopMenu TopMenu TopMenu TopMenu TopMenu

Kod górnego poziomego menu

Górne menu to rodzaj listy, to czy ma ona wizualnie układ poziomy czy pionowy ma znaczenie estetyczne nie wydaje się natomiast mieć znaczenia od strony kodu. Dlatego do stworzenia górnej listy wykorzystałam kod odpowiedzialny za stworzenie listy nieuporządkowanej (czyli tej zazwyczaj wypunktowywanej). Tak dla mniej zielonych przyznam się, że zastanawiałam się czy takie górne menu należałoby uznać za element nawigacyjny i do jego stworzenia wykorzystać w HTML5 znacznik nav... [dopisek: hipotetycznie, blox pisany jest XHTML]

Listę nieuporządkowaną budujemy przy użyciu znacznika ul, otaczamy nim wszystkie elementy listy na raz. Jedna lista jeden znacznik ul, który po zakończeniu listy oczywiście zamykamy analogicznym znacznikiem zamykającym. Poszczególne pozycje w tej liście dodajemy korzystając ze znacznika li, który odpowiedzialny jest za wyświetlanie pojedynczej pozycji na liście. Dzisiaj tworzymy listę nieuporządkowaną a więc znacznik li wyświetli nam pojedynczy punkt naszej listy. Przypominam, że mimo iż piszę tu o punktach i liście wypunktowanej, wizualnie na blogach wykorzystujących szablony sportowe nie będą to punkty tylko ładne poziome menu.

<ul id="menuTop">
<li><a href="adres linku">home</a></li>
<li><a href="adres linku">przykładowy tytuł linku</a></li>
</ul>

menuTop przykład znaczniki

menuTop przykład

Mój powyższy kod ma już dodany identyfikator menuTop. Jest to niezbędny element, który właśnie decyduje o zmianie ze zwykłego menu wypunktowanego w ładną pozioma listę umieszczoną w górnej części bloga. Bez tego identyfikatora lista pojawi nam się w typowej formie wypunktowanej wyświetlona pod wąską szpaltą.

Co możemy dodać w takim górnym poziomym menu?

W zasadzie wszystko co się chce. W praktyce jednak ta przestrzeń jest jednak mocno ograniczona. Aby element zachował swoją szczególną rolę nie może zwierać zbyt bogatej i różnorodnej treści. Należałoby ograniczyć się do pojedynczych słów bądź niewielkich fraz i dodać im linki przenoszące do miejsca gdzie szerzej można opisać co mieliśmy na myśli pisząc np burzliwie. Menu powinno zawierać więcej niż jeden element natomiast ich maksymalna liczba jest zależna od przestrzeni dostępnej wizualnie dla takiego menu. O ile używamy pojedynczych słów bądź niewielkich fraz w większości menu zmieści się co najmniej pięć elementów.

Każdy element koniecznie umieszczamy w ramach znacznika li. Taki element nie musi być linkiem. Jeżeli natomiast ma nim być to konieczne jest wykorzystanie znacznika linku - a. Ten typ znacznika także wymaga zamknięcia więc proszę o tym nie zapominać, w przeciwnym razie wszystko stanie się jednym wielkim linkiem. W znaczniku a podajemy href czyli adres i to tyle koniecznych części. Można jeszcze dodać title, które pojawi nam się gdy najedziemy na link jako dymek z tytułem odnośnika. Pozwala to na nieco szersze wyjaśnienie do czego prowadzić będzie ten link.

szablonykatemac.blox.pl jak dodać link

W powyższym kodzie, tworzącym link do strony z moimi szablonami, na czerwono zaznaczyłam części w których należy wpisać własną treść: adres i treść linku. Pochyły tekst to ten fragment, który potem będzie widoczny na blogu. Treść kodu podałam w formie pliku graficznego ponieważ edytor notek na blox.pl, przy zmianie treści wpisu zmienia tekst zawierający ostre nawiasy w prawdziwy kod. Tak więc przy okazji wprowadzenia poprawek do tej notki (a ja poprawkuję często) straciłabym tekst kodu bo zamieniłby się w link. Przepraszam, że nie możecie sobie go po prostu skopiować i zastąpić odpowiednie miejsca własną treścią ale dla mnie taka forma jest po części chociaż wygodniejsza. W ramach rekompensaty przykładowe kody w pliku txt prosto z notatnika.

link z adresem emailowym

Jednym z nieco mniej typowych linków jest link do maila. Oczywiście możemy podać nasz adres mailowy w postaci czystego tekstu bez linków, takie rozwiązanie może się okazać nawet wygodniejsze i sensowniejsze. Niektórzy jednak woleliby aby ich adres był też od razu linkiem który przenosi użytkownika do jego programu pocztowego. W takiej sytuacji należy skorzystać z mailto i po href zamiast adresu zaczynającego się od protokołu http należy wpisać mailto-dwukropek-adres mailowy, bez żadnych spacji pomiędzy.

szablonyakatemac@gmail.com jak dodać link

Gdzie wpisać kod górnego menu?

Na koniec informacja dla bardzo zielonych, o której często zapominam. Jedną z pierwszych rzeczy jaką zrobiłam jak założyłam bloga było dokładne obejrzenie sobie jego edycji, sprawdzałam co gdzie jest i do czego służy. Początkowo przy każdej nawet niewielkiej zmianie usiałam wszystkiego szukać i tak naprawdę nie bardzo wiedziałam, że rzeczywiście znalazłam to o co mi chodzi. Na koniec więc odpowiedź na pytanie gdzie wpisać kod który tak pracowicie tworzyliśmy.

Należy wejść do edycji bloga. Przejść do zakładki USTAWIENIA a następnie kliknąć kartę BOCZNA SZPALTA. W drugiej części zatytułowanej Dodatki będzie tam Pole na dodatkowy HTML. Tu właśnie wklejamy kody dodatków, które chcemy wyświetlić pod wąską szpaltą. Nasz nowy element też by się tam właśnie pojawiała na blogu gdyby nie zmiana, której dokonałam w arkuszu css.

USTAWIENIA -> BOCZNA SZPALTA -> Dodatki -> Pole na dodatkowy HTML


Polecane notki

 

poniedziałek, 03 października 2011, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Położenie elementu górne poziome menu z szablony katemac
1. Dodawanie kodu Stworzony uprzednio kod górnego menu dodajemy do naszego bloga korzystając ze specjalnego pola na kod HTML. Wchodzimy w edycję bloga, następnie wybieramy zakładkę USTAWIENIA i przechodzimy do karty BOCZNA SZPALTA USTAWIENIA ... »
Wysłany 2011/10/25 19:51:29
Komentarze
s.z.y.m.o.n
2011/10/04 16:43:42
"Tak dla mniej zielonych przyznam się, że zastanawiałam się czy takie górne menu uznać za element nawigacyjny i do jego stworzenia wykorzystać w HTML5 znacznik nav ..."

Zły byłby to pomysł...
Dwa podstawowe powody:
1) mamy tu (na blox.pl) zadeklarowany typ dokumentu jako XHTML, a jego specyfikacja nie zawiera elementu nav
2) nowe elementy definiowane przez HTML5 nie są rozpoznawane przez starsze wersje IE (<9). Potrzebna jest łatka w postaci skryptu, który uświadomi IE, że takie elementy istnieją na stronie.

Na dziś HTML5 to opcja dla stron, gdzie ma się pełną kontrolę nad kodem i można sobie pozwolić na eksperymenty.
-
kate_mac
2011/10/04 21:19:32
@s.z.y.m.o.n
Chyba zapomniałam zaznaczyć, że to hipotetyczne rozważania, w razie gdybym kiedykolwiek poczuła chęć napisania strony od zera. Jakoś mnie ten HTML5 ostatnio zastanawia... początkowo w ogóle nie mogłam zczaić o co chodzi, zresztą do tej pory nie bardzo łapię temat
Zastanawiałam się czy w HTML5 takie menu podchodziłoby pod nav. Zupełnie niepotrzebnie to w notce napisałam. Chyba jeszcze o dużo za mało sobie poczytałam ;-) i jest zupełnie niepotrzebnym takie zastanawianie się na głos w notce z bardzo podstawową instrukcją. Nie mam zamiaru mieszać do XHTML HTML5. Nie zawsze rozumiem przełomowość różnic pomiędzy xhtml a html ale wiem, że one istnieją. Domyślam się też, że nowe elementy nie będą interpretowane przez przeglądarki skoro praca nad kodem nie jest jeszcze zakończona.
-
milk_chocolate84
2011/10/09 09:17:01
hej :) mam pytanko, w sumie poza tematem notki ;)
Chciałabym u siebie na blogu, w prawej szpalcie umieścić element na samej górze.. ale jak go wklejam do dodatkowego kodu html w panelu bloxa, wędruje on na dół..
Wydaje mi się że trzeba coś dopisać do kodu aby automatycznie wywindował obrazek ponad archiwum. Szukałam, próbowałam, ale nic nie pomaga.. :(
Pozdrawiam i z góry dziękuję za ewentualną pomoc :)
-
kasia.prezydentowa
2011/10/09 16:10:38
Witam, czytam i podziwiam! Mam bloga od 3-ch miesięcy i wciąż się uczę. Chciałabym umieścić separatory pod nagłówkiem, nad stopką i pod postem, ale nie wiem, jak? Pomogłabyś mi? ;) A gdzie mogę znaleźć, albo jak zrobić ładny separator?
Za wszelkie porady będę bardzo wdzięczna! :)
-
felicja79
2011/10/09 20:18:45
Ostatnio znalazłam wygodne rozwiązanie naszego problemu z kodami, który tu opisałaś:

Treść kodu podałam w formie pliku graficznego ponieważ edytor notek na blox.pl, przy zmianie treści wpisu zmienia tekst zawierający ostre nawiasy w prawdziwy kod. Tak więc przy okazji wprowadzenia poprawek do tej notki (a ja poprawkuję często) straciłabym tekst kodu bo zamieniłby się w link. Przepraszam, że nie możecie sobie go po prostu skopiować i zastąpić odpowiednie miejsca własną treścią ale dla mnie taka forma jest po części chociaż wygodniejsza.

Piszę wpis w Wordzie, wklejam do zaawansowanego edytora graficznego, formatuję, a na koniec klikam przycisk HTML. Kopiuję zawartość, czyli caly kod i wklejam do nowego, pustego pliku w Wordzie. I już :-)

Gdy chcę edytować post, otwieram plik z kodem, kopiuję go i wklejam w zaawansowanym edytorze graficznym, też po kliknięciu HTML. Tym sposobem żadne znaczniki nie znikają.

Osobny plik w Wordzie jest mi przydatny, bo używam skrótów klawiaturowych: CTRL+A, CTRL+C, CTRL+V. Dzięki tym skrótom w parę sekund mam tekst skopiowany, wklejony i gotowy do edycji. Kamień spadł mi z serca, jak zaczęłam tak robić :-). Już nie mam problemu ze znikającymi kodami.

Jedynie starsze wpisy muszę tak skopiować. Chociaż zamiast Worda zacznę chyba używać edytora HTML, znalazłam naprawdę fajny i darmowy, z przyciskami na znaczniki HTML i funkcją sprawdzania poprawności kodu. Polecam:

www.dobreprogramy.pl/kED,Program,Windows,11810.html

Był polecony w Poradniku Webmastera przez Pawła Wimmera:

webmaster.helion.pl/index.php/html-dla-poczatkujacych

A przy okazji jego poradnik też jest świetny dla początkujących :-)

-
2011/10/14 21:06:02
Cześć Kate,
bardzo podoba mi się jeden z Twoich szablonów (Kate08 magentowy). Chciałabym go przekopiować, ale muszę go troszkę zmienić. Trochę rozszerzyć głowną szpaltę (zwiedzaniewyspy.blox.pl) i chciałabym dodać zdjęcie. Więc proste kopiowanie z prawej tabelki nie wchodzi w grę. Kiedy próbowałam zmienić ustawienia w CSS, nie wiedzieć czemu wchodził mi szablon, który miałam na samym początku (zupełnie inny niz mam obecnie) i w ogóle nie mogłam zobaczyć CSS szablonu Kate08. Nie wiem na ile, to jest problem na moim blogu, a na ile zastrzeżenie z Twojej strony, że nie można odczytać CSS.
JAk się pewnie domyślasz, jestem totalnie zielona w tych sprawach.
Jesli nie życzysz sobie żadnych zmian w Twoich szablonach, to spoko, ale jeśli nie masz nic przeciwko, to ja oczywiście i tak umieszcze Twoje logo.
Pozdrawiam.

-
kate_mac
2011/10/15 14:10:31
odpowiedz na komentarze felicja79, viki_on_line

@viki_on_line
Więc proste kopiowanie z prawej tabelki nie wchodzi w grę.
Wszystko zaczyna się od prostego kopiowania guziczkiem ;) umożliwia ono proste załadowanie wszystkich plików graficznych przypisanych do szablonu

Kiedy próbowałam zmienić ustawienia w CSS, nie wiedzieć czemu wchodził mi szablon, który miałam na samym początku (zupełnie inny niz mam obecnie) i w ogóle nie mogłam zobaczyć CSS szablonu Kate08. Nie wiem na ile, to jest problem na moim blogu, a na ile zastrzeżenie z Twojej strony, że nie można odczytać CSS.
To nie jest ani problem z Twoim blogiem ani zastrzeżenie z mojej strony. To blox. Trafiłaś na taki moment, że piszę stronę na ten temat. Ta niemożność zobaczenia kodu css to częsty problem u osób, które od razu chcą poprawić sobie szablon. Gdybyś odczekała jakiś czas to nawet nie zauważyłabyś tej bloksowej przypadłości.

Za każdym razem jak zgłasza się ktoś z takim błędem to moja odpowiedz jest jedna i a sama: po skopiowaniu szablonu wyloguj się z bloksowego konta i zaloguj na nowo. Szablon powinien wskoczyć na swoje miejsce. To trochę tak jaz z niektórymi zmianami na komputerze, czasami potrzeba zrestartować system. Na bloksie trzeba zrestartować swoje konto.

Jesli nie życzysz sobie żadnych zmian w Twoich szablonach, to spoko, ale jeśli nie masz nic przeciwko, to ja oczywiście i tak umieszcze Twoje logo.
Każdy może zmieniać moje szablony w dowolnym stopniu. Można nawet te zmienione szablony udostępniać (możesz: tworzyć i rozpowszechniać utwory zależne). Panuje pełna dowolność.

@felicja79
Jeżeli chodzi o przeklejanie tekstu z Worda (czy też edytora innej firmy) to pamiętam czasy kiedy to powodowało raczej kłopoty niż pomagało ;) Word jak każdy zaawansowany edytor ma własne kody formatowania tekstu. Tego nie widać, nie ma dostępu do źródła strony ale można by powiedzieć, że Word pracuje analogicznie jak tutejszy bloksowy edytor Tiny. Coś tam sobie wpiszesz, podkreślisz, przekreślisz, wyrównasz do prawej a edytor ładnie zamieni to w kod odpowiedni dla stron internetowych. Word robi to samo tylko dla siebie, dla swojego środowiska.
Kiedyś kopiuąc taki tekst do notki kopiowło się tez całe to formatowanie z całą masą kodu, który nic nie robił tylko śmiecił. Generalnie nie był widoczny na blogu, przy edycji dopiero zaglądając do html można było go dostrzec ale ON TAM BYŁ :D Zobacz na przykład tekst pierwszego trackback. Te wszystkie false Style Definitions * table.MsoNormalTable mso-style-name:Standardowy mso-tstyle-rowband-size:0 to właśnie ten wordowy śmiecio-kod. Teraz na szczęście chyba takie coś się nie dodaje, Tiny to chyba jakoś automatycznie czyści ale nie próbowałam :/

Takie zapisywanie kodu ma swoją zaletę, masz dzięki temu kopię zapasową na dysku ale poza tym wydaje mi się, że równie dobrze sprawdzi się zaglądanie do źródła strony. Tam też jest przecież kod html opublikowanej notki. Jedyna uciążliwość to może konieczność zaznaczenia nie wszystkiego (Ctrl+A) a wyszukania treści notki ale skoro już odkryłaś źródło strony to nie powinno to być problemem.

Z tym edytorem html to fajny pomysł a Pawła Wimmera czytam, zaglądam i co ciekawego ujrzę to zawsze testuję.
-
kate_mac
2011/10/15 15:11:53
odpowiedz na komentarze milk_chocolate84, kasia.prezydentowa

@kasia.prezydentowa
Chciałabym umieścić separatory pod nagłówkiem, nad stopką i pod postem, ale nie wiem, jak? Pomogłabyś mi? ;) A gdzie mogę znaleźć, albo jak zrobić ładny separator?

Zacznę odpowiedz od końca. Ładny separator robi się najczęściej wycinając go z czegoś innego ładnego. Mój, tutaj w notce jest sporą przeróbką wzoru, który mam w górnej części bloga.

Smashing magazine robił kiedyś konkurs na hr, masz tam spory wybór separatorów. Bardzo ładnych i w wielu różnych stylach.
Możesz przeszukać tez strony typu www.deviantart.com wpisując tam angielskie określenia typu divider.

Piszesz, że chciałabyś umieścić rozdzielacze pod nagłówkiem, nad stopką i pod notkami. Niestety Twój blog jest na bloggerze, a w każdym bądź razie taki podałaś tu adres. Ja się znam na bloksie :D mogę powiedzieć Ci jak tutaj zrobić coś takiego, jak nazywają się odpowiednie selektory i gdzie co wpisać aby działało itp.
Czasami zaglądałam na bloggera ale nigdy mu się specjalnie nie przyglądałam więc bez powodu do grzebania w nim nie mam odpowiedniego doświadczenia aby Ci w tej dziedzinie doradzać. Mogę zgadywać ale to tylko hipotezy, których nie miałam możliwości sprawdzenia.

Za tego co pamiętam na Bloggerze masz dostęp do html. Chyba więc mogłabyś dodać znacznik rozdzielacza treści (hr) w odpowiednich miejscach a następnie w kodzie css (który chyba jest tam na początku kodu html) opisać jego wygląd mniej więcej tak jak ja to robię dla bloksowych notek.

Albo możesz przypisać w css tło dla elementów o których wspominałaś czyli nagłówka, stopki i notki. W kodzie widzę element o klasie .post-footer może więc to będzie koniec notki? Winieta to może być klasa .header-inner a stopka .footer-inner
Ale to są tylko moje zgadywania. Aby wiedzieć na pewno i poradzić Ci konkretnego musiałabym temu poświęcić więcej czasu niż te pół godziny, które spędziłam pisząc ten komentarz.

Przy okazji Twój blog nie mieści się w rozdzielczości 1024. Aby zobaczyć trzecią kolumnę trzeba przewinąć stronę. To nie jest duży problem ale często osoby które korzystają z małych laptopów/netbooków (10') mają ustawioną właśnie taką rozdzielczość. Staraj się więc umieszczać tam informacje trzeciorzędne ;)

I na koniec, jeżeli będziesz miała konkretne pytania to z chęcią pomogę Ci poszukać odpowiedzi ale dodanie elementów na blogu, którego w ogóle nie znam (w sensie technicznym) wymaga ode mnie sprawdzenia całej masy różnych wariantów i napisanie takiej instrukcji zapewne byłoby stratą czasu bo i tak byś jej nie zrealizowała. Jeżeli uda Ci się rozbić to na pojedyncze pytania to może nawet mogłabym Ci pomóc. Zawsze zostaje też możliwość zlecenia mi takiej zmiany, w tej sprawie pisz na maila (adres w zakładkach na stronie o blogu). Obczajenie tematu zajmie mi pewnie trochę czasu ale mając dostęp do Twojego bloga będzie pewnie nieco łatwiej.



@milk_chocolate84
Chciałabym w prawej szpalcie umieścić element na samej górze.. ale jak go wklejam do dodatkowego kodu html w panelu bloxa, wędruje on na dół..
Bo się nie da. Bloks udostępnia tylko dwa miejsca na kod html. Pod pojedynczą notka i pod wąską szpaltą. Można jednak zaczarować element i sprawić, ze będzie on widoczny nad wąską szpaltą. To działa trochę jak powieszenie obrazu na oknie. Nie sprawi to, że widok za oknem się zmieni ale może stworzyć wrażenie czegoś innego. Felicja pisała o umieszczaniu elementów nad wąską szpaltą. Jej instrukcja jest wystarczająca i powinnaś sobie poradzić. Oczywiście planuję napianie własnej ;) ale tych zaplanowanych tematów jest cała masa.
-
kate_mac
2011/10/15 15:17:29
@viki_on_line
Jeszcze jedno mi się przypomniało. Napisałam Ci dlaczego tak się dzieje i jak temu zapobiec w przyszłości a zapomniałam o radzie na teraz. :D
Skoro skopiowałaś już szablon to pliki graficzne szablonu powinny być w zasobach (dla pewności to sprawdź). Aby ich nie dublować zmień szablon podstawowy na connections albo spokojny... następnie przejdź do edycji css i wklej tam arkusz szablonu magentowego. Jego treść znajdziesz tutaj: katemac08szablon.blox.pl/db-css/Plus1
-
viki_on_line
2011/10/15 17:40:53
Dzięki za wyczerpującą odpowiedź. Udało mi się nawet to zrobić, chociaż za każdym razem kiedy coś przestawiam na CSS, to czuję się jak we mgle...Zamieściłam informacje o Twoim blogu. Szukałam czegoś na boczną szpaltę, jakiegoś ładnego kawowego detalu, ale nie mogłam znaleźć.
Dzięki raz jeszcze. Ide jeszcze pozastanawiać się, jak dodać zdjęcie i w jakiej wielkości, ale to juz drobiazg.
Pozdrawiam.
-
milk_chocolate84
2011/10/17 21:10:39
dzięki, jesteś wielka :)
Pzdr.
Ps. co my byśmy bez Ciebie zrobili... ;)
-
Gość: Telimena, *.neoplus.adsl.tpnet.pl
2014/10/06 15:13:15
Dzięki za te wpisy bo one uświadamiają mi i innym, że tak naprawdę tworzenie strony internetowej nie musi być trudne. Mozna się poczuć choć trochę pewniej w tych czasach gdzie internet właściwie jest wykorzystywany na każdym kroku. To naprawdę fajna sprawa. Ja ze swojej strony moge jeszcze dodać, że czekamy na nowe wpisy bo ostatnio się zrobiło trochę pusto na stronie.
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...