Jak zrobić nagłówek ze stronami

20.06.2015


Każdy na blogu chce mieć coś niepowtarzalnego. Dotyczy to nagłówka oraz całego szablonu. Niektórzy kombinują jak połączyć ciekawą grafikę w nagłówku ze stronami, albo po prostu chcą posiadać jedną z tych fantazyjnych czcionek, które odróżnią strony od reszty, a nie potrafią dodać własnych fontów do bloga. W dzisiejszym wpisie przedstawię jak w prosty sposób połączyć nagłówek ze stronami. Można tą instrukcje użyć w innych celach, osobiście używałam tego sposobu właśnie na strony z nagłówkiem.

1. Będziemy potrzebowali białego obrazu, programu PhotoScape oraz jakąś czcionkę, którą możecie pobrać na dafont.com.

2. Otwieramy nasz obraz w programie PhotoScape i zaczynamy projektować nasz nagłówek. Grafika, nazwa oraz nazwy stron.







3. Wchodzimy na stronę Image-maps.com i klikamy "Browse for File".  Szukamy naszego nagłówka i klikamy na niego. Nagłówek wgrał się nam na serwer, a przycisk zmienił napis z "Browse for File" na "Start Mapping" - klikamy w to. Zostaliśmy przeniesieni na kolejną stronę, na której musimy kliknąć "click to continue". Zostaliśmy przeniesieni na jeszcze kolejną stronę gdzie zaczniemy podlinkowanie naszych wyrazów. Klikamy prawym przyciskiem myszki na obraz i wybieramy "Create Rec".







3a. Pojawi nam się kwadracik, który musimy przeciągnąć na dany wyraz i rozciągnąć na jego długość i szerokość. Następnie w linijce "Map URL" musimy wkleić link, do danej strony, na jaką ma nas przekierowywać po kliknięciu. Tę czynność, zaczynając od "Create Rec", musimy powtórzyć za każdym razem przy linkowaniu każdego nowego wyrazu. Na koniec klikamy "Save". Nasze wyrazy powinny być zaznaczone na czerwono.





3b. Klikamy prawym przyciskiem myszki na obrazie i wybieramy "Get Code". Pojawi nam się okienko, w którym wybieramy "HTML Code". Zjeżdżamy na sam dół i z ramki "HTML Image Map Code" kopiujemy kod.





3c. Przechodzimy do układ - dodaj gadżet HTML/JavaScript i wklejamy tam nasz skopiowany kod. Musimy pamiętać aby usunąć dotychczasowe strony z szablonu oraz usunąć nagłówek. Przeciągamy na miejsce stron nasz nagłówek ze stronami i zapisujemy rozmieszczenie.






Przetestuj:

Image Map

Instrukcję w formie filmiku na YouTube* znajdziesz TUTAJ

31 komentarzy:

  1. Przyda się na pewno! Świetnie, że wszystko wytłumaczyłaś :)

    Pozdrawiam!
    INNA MYŚL

    OdpowiedzUsuń
    Odpowiedzi
    1. Zawsze się staram wszystko dokładnie wytłumaczyć :)

      Usuń
  2. Wow, świetny poradnik. Sama zajmuję się wyglądami blogów, więc na pewno kiedyś z tego skorzystam :)
    http://thisismydream-blog.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. Tylko między nami jest pewna różnica - ja się uczę robienia szablonów na daną platformę oraz projektowania stron internetowych, a Ty to robisz, bo robisz :)

      Usuń
  3. Zdecydowanie mi się przyda. Fajnie, że dodajesz posty z takowymi pomocami blogowymi :)

    just-aulia.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Fajnie, że komuś się to przydaje :)

      Usuń
  4. Bardzo przydatny post, jak wszystkie zresztą, więc wielkie dzięki za wszystkie porady.
    Pozdrawiam,Laru!

    OdpowiedzUsuń
  5. Sposób jest bardzo dobry i dosyć często z niego korzystam
    Pozdrawiam,Madda
    Blog Maddy -> klik

    OdpowiedzUsuń
  6. Oooo i to jest coś co nam sie przyda! Musimy we wakacje dokładnie przejrzeć te wszystkie Twoje świetne tutoriale :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Wakacje to dobry czas na zmianę szablonu :)

      Usuń
  7. wielkie dzięki! to mi się przyda! :)
    http://zatrzymacchwileulotne.blog.pl/- zapraszam skomentuj jeśli coś Ci się spodoba, będzie mi bardzo miło :)

    OdpowiedzUsuń
  8. Nawet nie wiesz jak długo szukałam jak to zrobić, strasznie przydatny post :)
    Chciałam Cię zaprosić na konkurs, w którym do wygrania jest 440 zł do wykorzystania w Sheinside!
    http://jtere.blogspot.com/2015/06/giveaway-with-shein.html

    OdpowiedzUsuń
  9. Dzięki! Kiedyś wykorzystam <3

    http://lazurytoweniebo.blogspot.com/

    OdpowiedzUsuń
  10. Przydatny post! Szkoda, że nie mogę tego wykorzystać, bo nie mam komputera...

    http://free-style-for-you-and-me.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie masz komputera teraz czy w ogóle? Bo to by było trochę dziwne, jakbyś nie miała w ogóle, a posiadasz bloga ;)

      Usuń
  11. twoje posty są mega przydatne! Obserwuję :)

    OdpowiedzUsuń
  12. Świetny Ci wyszedł ten nagłówek, to ważna rzecz na blogu:)

    OdpowiedzUsuń
  13. Świetny poradnik! Racja: każdy chce, aby jego blog się czymś wyróżniał. Jak będę miała wolny czas: to coś takiego zrobię nawet tak dla siebie, sprawdzić, czy dam sobie radę :)
    [klik]

    OdpowiedzUsuń
  14. uwielbiam Cię za te instrukcje <3 http://creamshine.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Dobrze, że jest coś za co można mnie uwielbiać :p

      Usuń
  15. Wow, wow, wow! Długo szukałam jasnego i przejrzystego tutorialu, wykorzystam na pewno! Good job xxx

    OdpowiedzUsuń
  16. Super!! :) zapisuję sobie linka i zbieram materiały pomocnicze do zmian ;) dzięki! :*

    OdpowiedzUsuń
  17. Cieszy mnie to bardzo! :)
    Nie ma za co ;)

    OdpowiedzUsuń
  18. super na tej podstawie stworzyłam własny nagłówek ze stronami. Mam jedno pytanie czy do tych stron da rade stworzyć własne rozwijane menu i to jakos podpiąć. Jak naprzykład mam strony : STRONA GŁÓWNA, O MNIE, PRZEPISY, KONTAKT..chciałabym żeby po na jechaniu na przepisy rozwijała mi się lista sniadania, obiady i tp . da rade?

    OdpowiedzUsuń
  19. Jeśli chodzi o ten konkretnie tutorial, żeby do niego dodać rozwijane menu, to nie, nie da się.

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez Blonparia