1 czerwca 2013

Sposób na kursor

Zanim przejdziemy do postu...

Happy birthday Jill! Niech Twe życie zacne będzie, kasy, tytuł profesora doktora habilitowanego, weny, ładnych chłopców i duużo jedzenia oraz nieskończoną ilość wolnego czasu... Wycieczki do ciepłych krajów (byle nie Egipt, za dużo tam śmieci), nagrania płyty solowej, własnego programu w telewizji...
(Nie wiem czego byś sobie życzyła, więc podaję to, co by mnie uszczęśliwiło.)
 Specjalnie troszkę opóźniłam publikację postu, żeby zbiegło się z pierwszym czerwca. :)

Dziś kursory!
Zmienianie kursorów jest powszechne, dlatego nie wiedziałam czy napisać tę notkę. Po dłuższym przemyśleniu postanowiłam napisać dwa punkty: czyli skąd wziąć kursor i jak samemu go zrobić.

1. Skąd wziąć gotowy kursor?

Polecam stronę:
http://www.cursors-4u.com
(klikamy w interesujący kursor i kopiujemy zawartość ramki u góry <OBRAZEK>. Przechodzimy do naszego bloga - panel nawigacyjny > układ > dodajemy gadżet HTML (byle gdzie). Wklejamy tam skopiowany wcześniej kod i zapisujemy.)

2. Jak stworzyć swój własny kursor?

Sprawa prosta, potrzebujemy programu graficznego, który może robić przezroczyste tło lub wchodzimy do edytora online (<klik>). Jeśli nie mamy zdolności graficznych/nie chce nam się rysować/stwierdzamy, że ręcznie robione kursory to badziewie, potrzebny nam jeszcze obrazek.

a) otwieramy nasz obrazek w programie graficznym. Ja wezmę taki:
<KLIK>
(wygrzebałam go z Google)

Sprawa chyba oczywista - dobierzcie kolory tak, aby nie ginęły na waszym szablonie. Jasnozielony kursor i jasnozielony szablon na nie.

b) wycinamy białe tło <KLIK>. Oczywiście to nie jest konieczne, gdy wybieracie obrazek tego typu:
<KLIK>

c) Radziłabym, aby obrazek miał strzałkę, jeśli nie jest "stworzony" na kursor. Innymi słowami: jeżeli nasz obrazek nie ma dzióbka, szpica lub strzałeczki, to innym będzie ciężko go używać. Najlepiej zobrazuje to przykład: <KLIK>.
To gotowa strzałka, która jest już w Photoshopie ;D możecie namalować własną lub zrobić zwykły trójkącik u góry.

d) Przycinamy obrazek. Strzałka musi być w samym jego kącie. W Photoshopie zrobimy to za pomocą opcji Obraz > Przytnij (lub Image > Tirm jak u mnie), można też przyciąć kursor w Microsoft Office Picture Manager. Oto jak ma wyglądać na końcu: <KLIK>

e) Nie zapomnijmy o dobrym rozmiarze kursora! Kto by chciał mieć kursor wielkości nagłówka? Zmniejszamy, zmniejszamy... Tylko nie za bardzo. Mój jest większy, żeby dobrze go było widać. Pamiętajcie, iż to tylko tutorial - kursor jest przykładowy (i na pewno nie nadaje się na żadną stronę XD).
Nazwę go Piotruś.


f) Zapisujemy kursor jako .png.

g) Wgrywamy obrazek do np. imageshack.us, żeby mieć link do niego.

i) Wchodzimy w Panel nawigacyjny > Układ > dodajemy gadżet HTML.
Do gadżetu wklejamy:

<style> body, a, a:hover { cursor:url(LINK_DO_OBRAZKA), auto }</style>

j) Zapisujemy.

Mój efekt:
<TUTAJ>

--------------
Ten nowy HTML mnie wkurza...



16 komentarzy:

  1. Super! :D
    Muszę skorzystać!
    No i jeszcze tak ode mnie:
    STO LAT STO LAT! :*

    OdpowiedzUsuń
  2. Bolesław Prus8 czerwca 2013 19:31

    Fin, Fin!
    Odżywasz czy to tylko zryw?
    A kursor - świetna sprawa. Myślałam o czymś takim i patrz zjawiłaś się w samą porę! ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. Właśnie w przykładzie jest zdjęcie Bolka... :D
      Na razie zryw, bo nie mam neta x'D Bozia rozwaliła mi piorunem router.

      Usuń
    2. Finn! 25 lutego było już baaardzo dawno temu! :(

      Usuń
    3. Aj noł! ;<< Ale mam dobrą wiadomość :D
      Komentarz wyżej ^
      Bozia roztrzaskała mi router, tak więc dostęp do neta mam bardzo ograniczony :D Kiedy go mam, staram się robić prezentacje (teraz na emisję głosu) i odpisywać na maile z Zaczarowanych Instrukcji :D
      BUT
      od kiedy nie mam neta tak mi się nudzi, że piszę opo ;D Tamta wersja poszła do kosza, teraz zaczęłam lepszym opisem :)
      Poza tym, próbuję się uwijać jak mogę do egzaminów i zaliczeń, ale one trwają do końca czerwca :D Tak naprawdę to moje łapska chcą dorwać się do klawiatury jak najszybciej mogą xd Pisałabym w zeszycie, ale zawsze jakaś małpa mi do niego patrzy na zajęciach, a nie lubię jak ktoś czyta moje potworki xd

      Usuń
    4. =-= Właśnie, jak będę mieć powtórki, to nie będę mogła pisać...
      *robi ściągi tak na wszelki wypadek*

      Usuń
    5. Ojeeej, zmartwiłaś mnie tylko ;c

      Usuń
    6. Dlaczego? ._.
      Już napisałam kilka egzaminów i zdałam ustny. Jeszcze w piątek jeden (literatura amerykańska), a w środę trzy z zajęć z pedagogiki. Jeśli je zaliczę, to skoczę z mostu ze szczęścia.

      Usuń
  3. ja nie widzę nigdzie czegoś takiego jak gdżety HTML. A w zwykłych mi nie działa -.- proszę o pomoc.

    OdpowiedzUsuń
    Odpowiedzi
    1. Musi być ;D
      Jesteś w Układzie? Tam, gdzie rozrysowane są kolumny? Przypatrz się im.
      Klikasz niebieski napis "Dodaj gadżet". Wyskakuje okienko. W zakładce "Podstawy" (czyli ta, która wyskoczyła) na bodajże 11 pozycji jest "HTML/JavaScript". Na obrazku są dwa nawiasy takiego typu >

      Usuń
  4. Jak wyczyścić tło? :(
    Sama tworzyłam obrazek, wstawiłam do zalecanej strony i nie mogę znaleźć gumki, ścierającej to tło! (!)

    OdpowiedzUsuń
  5. Są proste sposoby jak np. na stronie: http://dodatki-na.blogspot.com/p/kursory-na-bloga_20.html Kopiujesz podany kod HTML i wklejasz na swoim blogu :) Pozdrawiam.

    OdpowiedzUsuń
  6. WOW ! Super porady i super blog
    Zapraszam -------------------------------------> http://nataszus.blogspot.no/
    Jak byś mogła mi czasem pomóc ulepszyć bloga ;)

    OdpowiedzUsuń
  7. Dziękuję za pomoc :*
    idiocisawsrodnasxd.blogspot.com

    OdpowiedzUsuń
  8. W końcu wiem jak wstawić inny kursor!
    wilkiiludzie.blogspot.com

    OdpowiedzUsuń
  9. Dzięki za instrukcję ! Właśnie tego szukałam :3
    Zapraszam do mnie http://srebrna-szkatulka.blogspot.com/

    OdpowiedzUsuń

szukaj