Dla wielu osób język HTML to czarna magia. Nie jest jednak taki straszny, jak wygląda. To zwykły angielski z mnóstwem znaków, skrótów itp. Do tworzenia bloga nie musicie go znać aż tak dobrze, ale jego znajomość może się przydać. Kiedy ogłosiłam Wam "Akademię Blogera" poprosiliście mnie o instrukcję jak zrobić rozwijane menu. Mikołajem nie jestem, ale lubię uszczęśliwiać ludzi (czasami), więc oto jest Wasz wymarzony post.
Na sam początek musicie znaleźć sobie kod do menu, no bo komu chce się bawić w tworzenie go? Ja swój znalazłam na Tracę Cierpliwość, gdzie autor przedstawia darmowe kody. Myślę, że możecie sobie pożyczyć. Przed edycją kodu HTML możecie oczywiście zapisać sobie szablon, jednak jak dla mnie jest to niezbyt przydatne. Lepiej utworzyć sobie plik tekstowy, skopiować cały kod, wkleić i zapisać. W ten sposób macie gwarancję, że w razie nieudanej próby możecie na nowo wkleić stary kod.
Wybierzemy przykładowo nr. 1. Który wygląda tak:
1. Klikamy na link pod obrazkiem (na stronie), aby móc pobrać kod.
2. Zaznaczamy cały kod (trzeba uważać, bo może być niepełny) i klikamy 'Kopiuj'
Teraz musimy otworzyć notatnik lub dokument tekstowy. W tym celu klikamy na Pulpicie prawym przyciskiem>Nowy>dokument tekstowy/notatnik
3. Wklejamy nasz kod
4. Otwieramy blogger>Szablon>Edytuj kod HTML
Otwiera nam się okno HTML. Szukamy w nim znacznika </header> Wkleimy nad nim nasz kod.
Teraz musimy uzupełnić kod.
5. Wchodzimy na swój blog (ja tutaj posługuję się blogiem przykładowym, ale linki pochodzą z obecnego)
6. Klikamy na wybraną przez nas stronę i kopiujemy jej link www.
7. Otwieramy nasz dokument tekstowy
8. Wybieramy miejsce w menu, gdzie ma się znaleźć nasza strona (na pasku). Jest to trochę skomplikowane, ponieważ aby tworzyć podstrony (jak na zdj) musimy dodawać kolejne części kodu. To samo ma się do kolejnych stron widocznych na pasku.
Kolejność jest ułożona jeden pod drugim. Moja strona znajdzie się na samym początku.
9. W miejscu "####" wklejamy link, a "*****" nazwę, która ma się wyświetlić. Jest to bardzo ważne, ponieważ ten fragment kodu jest podobny do kodu tekstowego, pomiędzy <cośtam> a </cośtam> wpisujemy TEKST. Jeżeli zamienimy te dwa miejsca, wyświetli nam się link jako nazwa!
Wszystkie linki wklejamy podobnie. Jeżeli chcemy mieć podstrony, wystarczy wkleić kod
<ul>
<li><a href='####'>****</a></li>
</ul>
pod fragmentem kodu danej strony np.
<li><a href='####'>****</a>
<ul>
<li><a href='####'>****</a></li>
</ul>
Pamiętamy o znacznikach zamykających </"znacznik">!!!!! np. </div>
Kod "▼" wklejamy po tekście w polu tekstowym, aby zrobić coś takiego "^" tylko, że w dół :D.
10. Kopiujemy kod, wklejamy nad </header> i zapisujemy szablon.
Jeżeli wyświetla nam się komunikat, że coś jest źle lub czegoś brakuje, staramy się znaleźć błąd i go naprawić. Nie sugerujcie się tekstem komunikatu, niemal na pewno ta część jest dobrze, warto to jednak sprawdzić.
11. Na sam koniec wchodzimy w Strony i klikamy w prawym górnym rogu "nie pokazuj". Teraz możemy cieszyć się pięknym szablonem!
Mam nadzieję, że wszystko jest jasne i czytelne. Bardzo przepraszam za jakość zdjęć, niestety nie mogę zainstalować programu do robienia screenów (laptop się buntuje). Musicie się zadowolić tymi zrobionymi tabletem.
Jeżeli mimo instrukcji coś jest niejasne, albo patrzycie na to i nie wiecie, jak ugryźć - służę pomocą.
Wystarczy napisać na adres e-mail lawendacorine@gmail.com i opisać problem, dać linka.
Cenna rada:
Warto założyć sobie testowego bloga, żeby nie bać się zniszczyć szablonu.
I jak? Macie zamiar teraz siąść i zrobić sobie Menu? Musicie poświęcić na to trochę czasu, bo trzeba dopracować, zmieniać wielkości, dodawać fragmenty kodu. Nie jest to praca łatwa i szybka.
Jeżeli moja Akademia Blogera się Wam podoba i jest przydatna, to możecie podać mi jakiś temat lub problem, z którym sami się borykacie. Gwarantuję, że pojawi się w którymś odcinku :D
Zapraszam również do polubienia mojego bloga na Facebooku.
