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