niedziela, 2 czerwca 2013

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

21 komentarzy :

Lenard pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

świetne tutoriale! no kurdesz, szkoda że tak późno ;-P

Kinnka pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Suuuper :) W wolniej chwili wypróbuję :D

Ulo pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Bardzo dobrze i przejrzyście napisany tutorial, musiałaś się z nim sporo napracować :)
Picmonkey używam od dawna i jestem bardzo zadowolona :)

Caitlin pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Dziękuję. Od jakiegoś czasu mnie to nurtowało i pewnie w przyszłości wykorzystam tę wiedzę.

olllq pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Fajnie , że jest ktoś kto potrafi takim opornikom jak ja wytłumaczyć z czym się to to je ;) Dzięki :)

dom za końcem świata pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Kurczak, jesteś genialna! Dzięki!!!

Katarzyna Ka pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Rety,ja to naprawdę jestem oporna na wiedzę.Nic a nic nie pojmuję:)
Myślę że samo czytanie nic nie da,trzeba poćwiczyć...

Anonimowy pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

U mnie się nie dwa wyszukać tego :( A tak mi dobrze szło.

Anonimowy pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Nie mogę usunąć nagłówka :(

Anonimowy pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

EUREKA! Udało się! Ja chcę więcej poradników na przykład nie umiem robić kolorowych nagłówków do szablonów

Statystyczna pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Witam,
tutorial był mi niezwykle pomocny. W zasadzie wszystko się udało. irytuje mnie jednak jedna. mianowicie kiedy przyciskamy wybraną kartę zaznacza się ona w czerwonym prostokącie. Czy jest szansa aby to zlikwidowac?

Pozdrawiam Karolina

Unknown pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Skorzystałyśmy w 100%, krop po kroku doszłyśmy do zamierzonego celu :-)
Pozdrawiam
Kasieńka

Unknown pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Kocham Cię normalnie! Myślałam, że już nie dam rady, ale się udało hihi :)

Devinette pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Ja mam jeszcze pytanie do tego tutoriala, bo może jestem lekko tempa :)
Jak zrobić, żeby te linki prowadziły do etykiet postów? Co tam podlinkować? Będę bardzo wdzięczna za odpowiedź.

Devinette pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

OK. Już do tego doszłam :) Wielkie dzięki za tutorial. Fantastyczna rzecz :)

Anonimowy pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Wielkie dzięki za ten post, bardzo przydatny. O to efekt pracy - http://lunandraw.blogspot.com/ - zapraszam i pozdrawiam!

Sylwia Słupianek pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Świetnie. Wszystko ładnie, prost napisane, że tam powiem: łopatologicznie. Nawet ja zrozumiałam.

Dzięki wielkie!

Ola pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Bardzo fajny tutorial. Szkoda tylko, że nie mogę dodać gadżetu HTML. Po prostu się nie da :( POMOCY!

Sylwia Słupianek pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Napociłam się, ntrudziłam, nawymyślałam. W końcu się jakoś udało. Niestey w kodzi html mojego bloga nie odnajduje mi znaczników . Tak więc nie jest idealnie.
Mimo wszystko bardzo dziękuję. Rewelacyjny tutek, wspaniały blog, od dłuższego czasu jestem fanką :D

Unknown pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

a ja mam pytanie ;) jak ustawić ten nagłówek tak, aby był na środku mojego bloga? bo jak na razie jest z prawej strony i nie umiem sobie z tym poradzić ;/

Unknown pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

@Pigmejka
jak ci sie udalo bo ja mam ten sam problem nie mam header

Step 7: Then click on the save template.