Przepis na * inne niż wszystkie * menu, w bloggerze...




Mój Mężczyzna zaangażował się w moje blogowanie do tego stopnia, że wyszedł naprzeciw moim pomysłom odnośnie zmiany szaty graficznej oraz dodatkom. Kilka z Was pytało jak i skąd, więc w skrócony sposób przeprowadzę Was przez kolejne kroki.

Przepis na * inne niż wszystkie* menu, w bloggerze...

Składniki:

1 osoba, która potrafi, jako tako rysować (nie potrzeba od razu wielkiego talentu)
1 darmowy program GIMP do rysowania
1 garść pomysłów na obrazeczki do ikonek
Szczypta znajomości kodu HTML

Ale po kolei.

GIMP to darmowy program (do pobrania tutaj: http://www.gimp.org) który ma bardzo wiele fajnych opcji podobnych do osławionego komercyjnego Photoshopa. 

 
Logo GIMP, licencja GFDL


Aby skorzystać z odpowiednich opcji należy po prostu poszukać w sieci – znajduje się tam pełno instruktaży i krótkich opisów jak uzyskać jakiś efekt w programie GIMP. Niemal wszystkie są stosunkowo proste, chociaż wymagają kilku kroków jak np. uzyskanie trójwymiarowego guzika:


Natomiast wydłużenie nosa można zrobić dosłownie jednym narzędziem Rozsmarowywanie  (Smudge):


 
Następnie używając warstw w GIMPie (żeby nie popsuć sobie już stworzonych elementów) na taki „guzik” możemy sobie następnie nałożyć dowolny obrazek oraz tekst. Możemy wygenerować kilka identycznie rozmiarowych guzików, przez manipulowanie co jest na kolejnych warstwach.

W efekcie możemy uzyskać taki oto „przycisk”:



 
Dobrze jest go zapisać jako plik o szerokości nie większej niż np. 300 pikseli aby przyspieszyć ładowanie menu.

Każdy taki plik musimy osobno załadować na nasz blog i zapisać jaki jest jego docelowy adres, który może być bardzo dziwny. Aby to zrobić wystarczy kliknąć prawym przyciskiem na wyświetlonym pliku (np. w próbnym wpisie na blogu) i wybrać opcję ”Kopiuj adres obrazka” (Copy image URL) i zapisać sobie gdzieś tak, aby wiedzieć jaki jest adres każdego załadowanego pliku. Typowy adres obrazka na blogerze to np.

http://1.bp.blogspot.com/-y8-0hcfNszg/T-ijz75n1II/AAAAAAAAFMQ/GkQumQcVomU/s1600/o-mnie.png

Następnie musimy „wyczarować” kod HTML który umieści obrazki jeden przy drugim i połączy je z odpowiednimi linkami.

Kod HTML jest tutaj bardzo prosty i używa tylko dwóch znaczników (tagów). Jednym jest znacznik <a href>, który wstawia link do czegoś (jakiejś naszej podstrony), a drugim <img>, który wstawia obrazek. Jeśli zagnieździmy jeden znacznik w drugim to dostaniemy wyświetlony obrazek, który jest od razu linkiem do jakiejś strony.

Taki przykładowy kod dla jednej pozycji w menu wygląda zatem:

<a href="adres_linku"><img src="adres_obrazka" width="250px"  /></a>

Co po wstawieniu obu pełnych adresów daje nam na przykład:

<a href=" http://www.1001pasji.com/p/kontakt_20.html"><img src=" http://1.bp.blogspot.com/-y8-0hcfNszg/T-ijz75n1II/AAAAAAAAFMQ/GkQumQcVomU/s1600/o-mnie.png " width="250px"  /></a>

Zmieniając wartość 250 na inną możemy regulować szerokość wyświetlanego obrazka.

Dla każdej pozycji w menu musimy wygenerować taki kod - w moim przypadku jest ich aż 9.

Cały tak przygotowany kod należy wstawić w odpowiednie miejsce. Aby to zrobić należy wejść w opcję Układ w bloggerze i dodać gadżet „HTML/JavaScript”. Po czym wystarczy tam wkleić nasz kod HTML i... voila! Musi działać :-)



Jedyne co pozostaje to wyłączyć „stare” menu.

 
W taki oto sposób powstały zmiany, które cieszą oko :D
Umieszczone rysunki zostały własnoręczne wykonanie - jedynie elementy * O mnie * i * Makijaże* bazują na moich zdjęciach.

Podoba się Wam taka zmiana? I czy poradnik* krok po kroku* okazuje się przydatny?

Pozdrawiam!


34 komentarze:

  1. Oooo, myślę, że się zagłębię, jeśli będę chciała wprowadzić urozmaicenie. Super, dzięki :*

    OdpowiedzUsuń
  2. Świetny temat i może spróbuję choć dla mnie takie cuda to czarna magia:)

    OdpowiedzUsuń
    Odpowiedzi
    1. Wonderwowman, pozornie czarna magia, poważnie:)

      Usuń
  3. Może kiedyś wypróbuję, bo póki co takie zmiany mnie przerażają i wydają się awykonalne :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Tova służę pomocą w razie potrzeby:)

      Usuń
  4. Dzieeeeekuuuujeeeemyyyy. Wiem już co bede robic w sobote :D

    OdpowiedzUsuń
  5. świetny opis! może coś kiedyś pokombinuję, bo też mi się chce coś pozmieniać :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Wydaje mi się, że każda z Nas przechodzi przez taki etap;)

      Usuń
  6. Twoje menu jest po prostu super :)

    OdpowiedzUsuń
  7. Poradnik bardzo fajny, na pewno przyda się osobom, które nie siedzą w html'u i grafice.
    Co do menu - nie moje klimaty, za dużo kolorów i 'tematyka' daleka memu sercu. Najważniejsze, że Tobie się podoba :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Idalio, maiło być prosto i czytelnie, udało się.
      Co do kolorów to wszystko zależy od Naszych upodobań, postawiłam na takowe bo cała reszta jest stonowana a zależało mi aby było w klimacie, udało się:)
      Ze mną taka tematyka jest od wieluu lat i finalnie blog wygląda tak jak chcę:)

      Usuń
  8. dzieki :) dla mnie poki co za duzo roboty, ale moze sie kiedys pokusze, bo juz na swoja szate a wlasciwie jej brak nie moge patrzec :D

    OdpowiedzUsuń
  9. przejrzyste menu, pewnie kiedyś mi się ta instrukcja przyda :)

    OdpowiedzUsuń
  10. A dla mnie i tak malo zrozumiale.... A to dlatego ze ja w ogole malo elektroniczna i htmlowa jestem.... Ale moze sprobuje:)

    OdpowiedzUsuń
  11. najbardziej spodobalo mi sie wydluzanie nosa :D

    OdpowiedzUsuń
  12. Dzięki dobra kobieto. Kiedyś skorzystam na pewno :)

    OdpowiedzUsuń
  13. O jak super!!!!!!!!!!!! U Ciebie wygląda to świetnie!

    OdpowiedzUsuń
  14. Świetnie to opisałaś, ale z moimi umiejętnościami (a raczej ich brakiem) niestety nie jestem w stanie tego ogarnąć hehe ;D

    OdpowiedzUsuń
  15. Prosto opisane i nawet taki laik ja jak dałby radę :)

    OdpowiedzUsuń
  16. Nie da się ukryć, że Twoje menu wymiata!!!! :D

    OdpowiedzUsuń
  17. Masz najlepsze menu w blogosferze ;) Ja takie rzeczy zostawiam swojemu facetowi bo dla mnie to czarna magia :D

    OdpowiedzUsuń
  18. Obstawiam, że będzie to najczęściej czytany post:D Bardzo czytelne!

    OdpowiedzUsuń
  19. Twoje menu jest absolutnie powalające :D ale to, co czytam w poście, to dla mnie czarna magia... chyba sobie odpuszczę taką personalizację ;p z resztą przy moim mini blożku póki co nie jest to potrzebne ;p

    OdpowiedzUsuń
  20. Fajne jest to nowe menu :D Najlepszy jest obrazek do testowania - idealnie pasuje hehe :D Poradnik na pewno się przyda, może skłoni mnie to bliższej znajomości z Gimpem, bo na razie traktuję go po macoszemu ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. Fiolka, bardzo długo uciekałam od Gimpa a teraz widzę, że niesłusznie. Jest naprawdę rewelacyjny! i na moje domowo-blogowe potrzeby jak znalazł. Fakt, że trzeba się przyłożyć i nie można na skróty ale późniejszy efekt to wynagradza:)

      Usuń
  21. Hexiiii!!! :*

    Ściskam Cię, ściskam, po czym podrzucam do góry [i łapię^^] za ten instruktaż!!!

    Któregoś tu bowiem dnia przyszłam sobie - patrzę - a tu zakładki zyskały bardzo atrakcyjne urozmaicenie. Nawet nie śmiałam znowu Cię o coś prosić, nawet przez myśl nie przeszło mi, że sama wyjdziesz do nas z otwartymi rękami. Wiesz, jak to mi się przyda?! Pozostaje mi teraz zrobić jaką grafikę, ale to musi troszkę poczekać [no... muszę się wyrobić z realizają zleceń ludziom, którzy mi zaufali :) ].

    Skarbie, dzięki wielkie. Złocista jesteś :*

    OdpowiedzUsuń
  22. Chciałam dziś zmienić ten pasek, ale jednak... nie ogarniam :/

    OdpowiedzUsuń
    Odpowiedzi
    1. A dokładnie gdzie potrzebujesz pomocy? :)

      Usuń
    2. Te zakładki u mnie żyją własnym życiem, nie są ułożone jedna obok siebie jak u Ciebie. w ogóle za duże wyszły. nadal z tym kombinuję. robię operację na otwartym organizmie ;)

      Usuń
    3. Ok, zajmę się tym innym razem :) w razie czego będę pytać :) na razie wróciłam do starego wyglądu.

      Usuń

Dziękuję za wszystkie Wasze komentarze, każdy z nich sprawia że TO miejsce ożywa dzięki WAM!
Jeżeli jeśli chcesz zaprosić mnie na swoją stronę, nie wklejaj linków w komentarzach. W wolnej chwili zajrzę z chęcią do Ciebie :)
Zastrzegam sobie prawo do usunięcia reklamowych postów, które zostaną zamieszczone bez mojej zgody.

Related Posts Plugin for WordPress, Blogger...