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.
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!
