Jak zrobić własny banner na bloga z klikalnymi linkami

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.

 

 

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.

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 skasuj kod znajdujący się pomiędzy znacznikami <header>

i </header>

wraz z nimi samymi.

 (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 :)

MarioG, cieszę się, że mój tutek (och, jak ja lubię to słówko) okazuje się przydatny :)