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:

http://www.youtube.com/watch?v=4G2OOBQ5Lqc

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.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK79pn0ZjNoLLhvQg-mO4HZx1H4V7aaovUCG2OoPPMvDn2hwBnClZsIMFE8mR9fn09pVvoBaNWKkKktN8HyU7SzIf55K_-FN4y2swe1_x20eUgWtWV_CzlhlY-2OU9jSt3jZZdU92scXc/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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK79pn0ZjNoLLhvQg-mO4HZx1H4V7aaovUCG2OoPPMvDn2hwBnClZsIMFE8mR9fn09pVvoBaNWKkKktN8HyU7SzIf55K_-FN4y2swe1_x20eUgWtWV_CzlhlY-2OU9jSt3jZZdU92scXc/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!