Oto część trzecia kursu, myślę, że ostatnia. No, chyba że czegoś nowego się nauczę ;)
Jeśli przyjrzycie się moim pozostałym blogom, zapewne spostrzeżecie, że nagłówki mają w sobie klikalne menu, czyli rózne skróty. Jak takie coś zrobić i u siebie?
Najpierw musisz przygotować banner w dowolnym edytorze graficznym.
![]()
Na Design Seeds znalazłam taki schemat kolorystyczny. Gdybym robiła prawdziwego bloga, linkom, czcionkom, nagłówkom i tak dalej nadałabym kolory w nim zestawione.
Banner z linkami powinien być nieco wyższy niż taki zwykły. Ja proponuję wielkość 900x450, dzięki czemu jest dużo miejsca na umieszczanie wszystkiego, co potrzebne. A gdy już skończysz i zostaną puste miejsca przy brzegach, możesz użyć polecenia Crop do przycięcia obrazka.
![]()
![]()
![]()
![]()
![]()
![]()
Pojawi się okienko z odliczaniem sekund, więc cierpliwości ;)
![]()
![]()
![]()
Interesuje cię narzędzie Rectangle (prostokąt). Kiedy klikniesz ten klawisz, pojawi się pole mapowania.
![]()
![]()
W polu "Link for this map" wpisz/wklej odpowiedni adres internetowy.
![]()
Postępuj tak ze wszystkimi miejscami, które mają być klikalne, które mają prowadzić do innych adresów.
Kiedy skończysz, poszukaj po prawej klawisza Get your code poniżej przycisku Rectangle.
![]()
Na kolejnej stronie kliknij HTML Code.
![]()
W ramce jest kod, ale nie będziesz potrzebować całego. Nie zamykaj strony, tak na wszelki wypadek.
Teraz zaczyna się Czarna Magia ;)))
Wejdź do ustawień bloga, tam, gdzie uruchamia się edytor szablonu. Zamiast wchodzić do niego, wybierz opcję "Edytuj HTML". Wstaw kursor w okno z kodem i za pomocą Ctrl+F znajdź <header>
i </header> wraz z nimi samymi.
![]()
Przejdź do sekcji Układ w menu i w miejscu, gdzie poinien być na główek, nad postami, utwórz nowy gadżet HTML. Wklej do niego kod z mapą obrazka, na końcu dodaj
i zapisz.I już :)
Mam nadzieję, że kurs się przyda i że nie będziecie bać się pogrzebać w głębi swojego blogu. Blogger nie oferuje zbyt ciekawych opcji edycji szablonu, ale jak widać, można obejść standardowe rozwiązania i zrobić to po swojemu.
Jeśli wykorzystacie kurs, miło mi będzie, jeśli dacie mi znać :) A po prawej możecie wziąć bannerek z linkiem do kursów, jeśli chcecie je podlinkować u siebie :)
![]()
Jeśli przyjrzycie się moim pozostałym blogom, zapewne spostrzeżecie, że nagłówki mają w sobie klikalne menu, czyli rózne skróty. Jak takie coś zrobić i u siebie?
Najpierw musisz przygotować banner w dowolnym edytorze graficznym.
Banner z linkami powinien być nieco wyższy niż taki zwykły. Ja proponuję wielkość 900x450, dzięki czemu jest dużo miejsca na umieszczanie wszystkiego, co potrzebne. A gdy już skończysz i zostaną puste miejsca przy brzegach, możesz użyć polecenia Crop do przycięcia obrazka.
Tak mniej więcej wygląda banner w wersji jak w poprzednich kursach - jest tytuł, podtytuł jakaś ozdoba.
A tu dodałam menu - oczywiście tylko od ciebie zależy, co się w nim znajdzie.
Dorzuciłam też trzy kółeczka na skróty do takich stron, jak Pinterest, Facebook i Ravelry (wszelkie inne social media też są mile widziane ;))
Ja zrobiłam po prostu literki, stylizowane na oryginalne loga, ale możesz poszukać w necie "social media silhouettes" - a potem wkleić je w odpowiednie miejsca.
Zapisz swoją pracę na dysku komputera. Teraz musisz wgrać ją na jakiś serwis przechowujący zdjęcia: Picasę, Imageshack, Photobucket... Skopiuj bezpośredni link do zdjęcia.
I tu zaczyna się magia HTML i mapowanie obrazka ;)
Zacznij od wejścia na stronę Image Map Tool i we wskazane niżej okienko wklej adres obrazka, a następnie kliknij Start Mapping Your Image.
Pojawi się okienko z odliczaniem sekund, więc cierpliwości ;)
O, jest link :)
Interesuje cię narzędzie Rectangle (prostokąt). Kiedy klikniesz ten klawisz, pojawi się pole mapowania.
Oznaczenia:
1 - pole mapowania, kwadraciki na rogach służą do zmiany kształtu i rozmiaru.
2 - tytuł strony - tego pola nie trzeba uzupełniać.
3 - zapisz - po kliknięciu dane pole będzie zapamiętane, aby utworzyć nowe pole, znów kliknij Rectangle.
Kiedy skończysz, poszukaj po prawej klawisza Get your code poniżej przycisku Rectangle.
Teraz zaczyna się Czarna Magia ;)))
Wejdź do ustawień bloga, tam, gdzie uruchamia się edytor szablonu. Zamiast wchodzić do niego, wybierz opcję "Edytuj HTML". Wstaw kursor w okno z kodem i za pomocą Ctrl+F znajdź <header>
(kliknij obrazek, by go powiększyć)
Zapisz szablon. Od tego momentu twój blog nie ma nagłówka [wstawić szatański chichot].Przejdź do sekcji Układ w menu i w miejscu, gdzie poinien być na główek, nad postami, utwórz nowy gadżet HTML. Wklej do niego kod z mapą obrazka, na końcu dodaj
i zapisz.I już :)
Mam nadzieję, że kurs się przyda i że nie będziecie bać się pogrzebać w głębi swojego blogu. Blogger nie oferuje zbyt ciekawych opcji edycji szablonu, ale jak widać, można obejść standardowe rozwiązania i zrobić to po swojemu.
Jeśli wykorzystacie kurs, miło mi będzie, jeśli dacie mi znać :) A po prawej możecie wziąć bannerek z linkiem do kursów, jeśli chcecie je podlinkować u siebie :)
