Jak wykonać blogową strzałkę "w górę" zmieniającą kolor

25.02.2015



W dzisiejszym tutorialu pokaże wam jak zrobić swoją własną strzałkę w górę, która umożliwi nam powrót na górę strony. Taką strzałkę, możecie oczywiście zrobić na stronie profilki.pl, jednak ja chcę wam pokazać jak w prosty sposób można ją zrobić samemu, a oprócz tego będzie zmieniała kolor po najechaniu na nią myszką.

1. Otwieramy program PhotoScape i wybieramy opcję edytuj.

2. W lewej bocznej kolumnie pokazują nam się foldery, klikamy na ten, w którym mamy tło do naszej strzałki. Następnie klikamy na wybrane tło, tak abyśmy mogli je edytować.


3. Klikamy na obiekt - symbol.


4. Pojawi nam się drugie okno, wybieramy w nim strzałkę, kolor i klikamy ok.


Dzięki tym małym, białym kwadracikom możemy dostosować wielkość naszej strzałki, a łapką przesuwać.


5. Zapisujemy naszą pierwszą strzałkę i w ten sam sposób wykonujemy drugą.



6. Przechodzimy na stronę TinyPic i wgrywamy nasze strzałki. Najlepiej otworzyć sobie tą stronę w dwóch zakładkach, aby wgrać jednocześnie jedną i drugą strzałkę, ponieważ będą nam potrzebne linki do nich.

7. Po wgraniu strzałek przechodzimy do układ - dodaj gadżet - HTML/JavaScript



8. Kiedy otworzy się gadżet, wklejamy następujący kod:

<!--Strzałka w górę-->
<a rel="nofollow"
style="display:scroll;
position:fixed;bottom:
10px;right:5px;"
href="#" title="W górę"><img src="Ikonka 1" alt="Strzałka w górę" border="0" onmouseover="this.src = 'Ikonka 2'" onmouseout="this.src = 'Ikonka 1'"/></a>
<!--Koniec-->

Analiza kodu:

<!--Strzałka w górę-->
<a rel="nofollow"
style="display:scroll;
position:fixed;bottom:
10px;right:5px;"
href="#" title="W górę"><img src="Ikonka 1" alt="Strzałka w górę" border="0" onmouseover="this.src = 'Ikonka 2'" onmouseout="this.src = 'Ikonka 1'"/></a>
<!--Koniec-->

Położenie strzałki w pionie 
Położenie strzałki
Margines (odsunięcie strzałki od krawędzi bloga) 
Link do ikonki 1 (strzałka przed najechaniem na nią myszką) 
Link do ikonki 2 (strzałka po najechaniu na nią myszką) 

9. W miejsce Ikonka 1 i Ikonka 2 wklejamy linki do naszych strzałek, które znajdują się na stronie hostingującej.



10. Nasza strzałka już widnieje na blogu


12 komentarzy:

  1. Świetny poradnik ! Wszystko dokładnie i łatwo napisane :)
    Pozdrawiam ! :*
    http://you-always-be.blogspot.com

    OdpowiedzUsuń
  2. A ja się zastanawiałam jak taki bajer poczynić :D

    OdpowiedzUsuń
  3. Bardzo przydatne rady, teraz na pewno będę wiedziała jak to zrobić :)
    http://przyszopceuszatych.blogspot.com/

    OdpowiedzUsuń
  4. ale super! mi akurat nie jest potrzebna taka rzecz, ale dziękuję mega bo pewnie jak będę majsterkować jeszcze z wyglądem to spróbuję:)
    pozdrawiam cieplutko :**
    http://zuzanvx.blogspot.com/

    OdpowiedzUsuń
  5. hm, pierwszy raz spotkałam się z takim czymś. ciekawe, aczkolwiek nie dla mnie. :)

    OdpowiedzUsuń
  6. świetny poradnik :*

    nickyjxo.blogspot.com Mój blog!KLIK

    OdpowiedzUsuń
  7. Oj, chciałabym to wszystko wiedzieć, wtedy mój lapek by mnie tak nie wkurzał:)

    OdpowiedzUsuń
  8. Fajny pomysł, może go wykorzystam :)

    Zapraszam na nowy wpis, jeśli tylko znajdziesz chwilkę:Blog-KLIK♥

    OdpowiedzUsuń
  9. można by było poprosić o jakiś poradnik jak wykonać tą obecną strzałkę która pokazuje "procent" w jakim odsunęliśmy się od góry strony ?

    jeśli już mówiąc o niej popraw sobie (np. za pomocą z-index) ją bo Ci się chowa pod nazwy gadżetów ;)

    OdpowiedzUsuń
  10. Może kiedyś się pojawi, na razie muszę zrealizować to co mam zaplanowane ;)
    Jeśli już mówimy o poprawkach - wystarczy napisać tylko, aby poprawić nie trzeba mi mówić jak to się robi ;) Druga sprawa - sprawdziłam i u mnie na dwóch komputerach wyświetla się poprawnie :)

    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