O co chodzi?

Potrzebujesz grafiki na swojego bloga?
Banera, tła, drobnych elementów czy całego szablonu? Nie ma problemu. Grafika zajmuje się od paru lat i mogę zaoferować Ci coś wykonanego profesjonalnie i tylko dla Ciebie.

środa, 24 października 2012

Tutorial - Animowane menu i nie tylko

Odkładam ciągle zrobienie tego tutorialu bo nie wiedziałam jak wam to łatwo przedstawiać ale że już parę osób o to pytało postanowiłam w końcu się zebrać i o tym napisać. Mam nadzieję, że dzięki temu tutorialowi dacie rade same zrobić sobie animowane paski z linkami pod banerem :).
Przypominam też, że ciągle czekam na wasze życzenia odnośnie tego co ma się pojawić na blogu. Sama, nie zawsze mam pomysły a może jest coś konkretnego co zauważyłyście gdzieś i chciałybyście wiedzieć jak to zrobić. Albo może chcecie jakieś konkretne dodatki? Piszcie TUTAJ.


Zabawę z menu obrazkowym polecam zacząć od tego tutoriala KLIK. Dla przypomnienia, korzystając z samej wiedzy z poprzedniego tutoriala stwórzmy najpierw:

 Menu obrazkowe bez animacji.


Będziemy do tego potrzebować obrazków. Dla przykładu posłużę się moim menu na stronie:

Obrazek pierwszy

Link do niego: http://tnij.org/sw22

Obrazek drugi

Link do niego: http://tnij.org/sw21

Obrazek trzeci

Link do niego: http://tnij.org/sw24

Aby zrobić z tego obrazkowe menu musimy:

1. Utworzyć gadżet HTML/JavaScript
2. Wkleić do niego trzykrotnie, jeden po drugim kod odpowiadający za wklejanie obrazka (Więcej informacji o kodzie w poprzednim Tutorialu) jednak odrobinę zmodyfikowany. Kod w poprzednim tutorialu wyglądał tak:

<img src="ADRES OBRAZKA" />

Tym razem jednak nie tylko chcemy aby pokazały się nam obrazki ale też aby po kliknięciu na nie prowadziły nas w jakieś konkretne miejsce. Musimy więc dodać do niego odpowiednią właściwość. Nasz kod po zmianie będzie wyglądał tak:


Tutaj można go po prostu skopiować:

<a href="ADRES STRONY NA KTÓRĄ WEJDZIEMY PO KLIKNIECIU"><img src="ADRES OBRAZKA" /></a>

Czyli jak będzie wyglądał gotowy kod takiego trzy obrazkowego menu?

Adresy obrazków mamy. Jeśli chcemy zdobyć adresy np do konkretnych etykiet na blogu tak jak w moim przypadku. Wystarczy  kliknąć dowolną etykietę na blogu (są one u większości pod postami albo umieszczone w prawej lub lewej kolumnie). I gdy przeniesie nas na stronę skopiować jej adres. Adres do naszych etykiet będzie wyglądał zawsze tak:


Czyli pojedynczy element będzie wyglądał np tak:

<a href="http://wymien-sie.blogspot.co.uk/search/label/wymiana"><img src="http://tnij.org/sw21" /></a>

Jeśli skopiujemy go parę razy obok siebie wymieniając jedynie adres obrazka i strony utworzymy menu.

Menu obrazkowe z animacją po najechaniu


Tak na prawdę, jeśli nie sprawiło wam problemu stworzenie zwykłego menu obrazkowego to menu z animacją też zrobicie bez problemu. 
Aby zrobić takie menu postępujemy identycznie jak w przypadku menu zwykłego tylko poszerzamy kod o animacje.

Potrzebujemy też dodatkowo obrazków które będą nam się pokazywać po najechaniu na poprzednie. W tym celu najlepiej stworzyć obrazki tej samej wielkości z drobną graficzną różnicą.

Ja przygotowałam takie:


Nowy kod który musimy użyć wygląda tak:

OBRAZEK1 - to miejsce gdzie wpisujemy kod z obrazkiem który ma być widoczny przed najechaniem

OBRAZEK2- to miejsce gdzie wpisujemy kod z obrazkiem po najechaniu

Tutaj kod do skopiowania:

<a href="ADRES STRONY"><img src="OBRAZEK1" border="0" onmouseover="this.src='OBRAZEK2'" onmouseout="this.src='OBRAZEK1'" /></a>

Jeśli trzykrotnie wkleję ten kod w gadżecie HTML/Java jeden po drugim i uzupełnię danymi moich obrazków wyjdzie coś takiego:



Jeśli będzie miało dostatecznie dużo wolnego miejsca na szerokość to ustawi się w jednej linii.
Gotowy gadżet HTML/Java zapisujemy i ustawiamy w wybrane miejsce. Możemy tak stworzyć dowolną rzecz nie tylko menu. Mogą to być jedno obrazkowe odnośniki do rozdania umieszczone w panelu bocznym bloga oraz wszystko co wam przyjdzie do głowy.

4 komentarze:

  1. przydatne dla laików :) ja już mam to obcykane :)
    a może zrobisz tutka jak "zaokrąglić" podobne posty pod notkami? (Zobacz Też u ciebie)

    OdpowiedzUsuń
  2. Dobra, porządnie napisana instrukcja ;) Co prawda nigdy się nad takim efektem nie zastanawiałam, ponieważ postawiłam na całkowitą prostotę szablonu, ale może kiedyś ^^ Ach, i właśnie mi się przypomniało nad czym myślałam przed zaśnięciem - nowy szablon!
    Dziękuję ślicznie za komentarz <3

    OdpowiedzUsuń
  3. Podpinam się, fajnie wyglądają okrągłe :)

    OdpowiedzUsuń
  4. Czytelna instrukcja-masz dar do tłumaczenia :-) kiedyś na pewno z niej skorzystam.

    OdpowiedzUsuń