Cambiare il puntatore del mouse nel blog


image

Una cosa che mi è stata richiesta da più persone è come fare a cambiare l'icona del mouse nel blog, ottenendo un effetto simile a quello che si vede nel blog di Daniela. La cosa è abbastanza semplice e non richiede nemmeno di modificare il template di Blogger, basta solamente aggiungere in nuovo elemento del codice HTML che ora vado a spiegare, con qualche premessa.

Cos'è un puntatore?

Il puntatore del mouse non è altro che una semplice immagine (nei formati GIF o PNG) o un'animazione (generalmente un file con estensione ANI, CSR o CUR) che il sistema operativo carica e visualizza su schermo. La dimensione massima consigliabile (per compatibilità con vecchie versioni di Windows) per un puntatore è di 32x32 pixel. Per compatibilità tra Firefox e Internet Explorer, è sempre preferibile utilizzare solo immagini in formato PNG o GIF o animanzioni in formato CUR. Ovviamente, per poterle utilizzare nel blog, dovranno essere pubblicati in rete tramite Skydrive, Imageshack o servizio analogo.

Potete utilizzare un puntatore già presente in rete, ma tenerne una propria copia è sempre la cosa migliore da fare.

 

Dove trovarli?

Ci sono diversi siti che permettono di scaricare gratuitamente puntatori per il mouse, uno molto fornito è Totally Free Cursors, dove trovate oltre 5000 cursori divisi in categorie, che dovrete scaricare e pubblicare per conto vostro come accennato sopra. Un altro sito dove è possibile trovare immagini da usare come puntatori è Iconarchive. Potete però sempre creare con le vostre mani delle immagini GIF o PNG e pubblicarle in rete per utilizzarle come puntatori. Anche Freeiconsweb contiene un certo numero di immagini che potete utilizzare come puntatori.

Se trovate siti dove si trovano puntatori, vi prego di segnalarmeli affinchè possa farne un elenco per tutti.

 

Cambiamo il puntatore nel blog

Create un nuovo elemento di tipo HTML/JavaScript e incollate il seguente codice:

<style type="text/css">html, body {
cursor: url("immagine o animazione"), auto;
}</style>

Sostituendo "immagine o animazione" con l'indirizzo in rete di quello che avete deciso di usare come animazione. Per fare una prova, incollate il seguente codice:

<style type="text/css">html, body {
cursor: url("
http://www.iconarchive.com/icons/fasticon/coffee-break/coffee-cup-32x32.png"), auto;
}</style>

che cambierà il puntatore del mouse in una tazzina di caffè.

 

Modificare il puntatore solo in certi punti

E' possibile modificare il puntatore non in tutto il blog ma solo per certe sue parti. Ad esempio è possibile personalizzare il puntatore del mouse quando si passa sui link col seguente codice:

<style type="text/css">a {
cursor: url("immagine o animazione"), auto;
}</style>

Come potete vedere, l'unica differenza rispetto al codice precedente è che ho sostituito la parte che prima era indicata con html/body (che rappresenta tutto il corpo della pagina web del blog) con a (che rappresenta solo i link). Ovviamente le porzioni di codice possono essere usate entrambe per avere magari due immagini diverse per link e resto del blog.

I più smaliziati potranno guardare nel codice html del proprio template per vedere quali tag CSS vengono utilizzati per sostituirne il puntatore.

Come sempre, per chiarimenti o maggiori informazioni, lasciatemi un commento.

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

44 commenti:

DR ha detto...

Può essere una bella cosa. ma confesso che trovare un puntatore blog diverso in un sito o in un blog mi dà sempre fastidio...

Noy a.k.a. Manah ha detto...

Uhm... ma non è che su Mac non funziona, vero? Io con Firefox sul blog di Daniela non vedo un cursore diverso :-s

Massimo Destroverso ha detto...

Caro tenebrae, ho tentato poco fa il codice di prova (quella con la tazzina di caffè, per intenderci), ma non ha funzionato. Forse c'è qualcosa che non va nella sintassi? Oppure magari bisogna aprire l'elemento java/html in un punto/modo preciso che non conosco?
Eventualmente, vorrei anche provare ad incollare il codice editando direttamente il template... ma in questo caso, in quale punto intervenire?
Grazie anticipatamente
Max

Tenebrae ha detto...

@noy: strano, con firefox funziona sicuramente, visto che l'ho provato io... evidentemente ha qualcosa a che fare col sistema operativo, ma non so dirti di più

@massimo: il codice che ho messo io per prova ho visto che ha qualche problema con internet explorer... mi puoi dire che sistema operativo/browser usi?

Tenebrae ha detto...

dimenticavo: per inserirlo direttamente nel codice del template bisogna cercare la porzione di codice con:

body {

e inserire sotto la riga con cursor: fino al punto e virgola (compreso).

controlla però che non ci sia altro codice simile, nel caso sostituiscilo

Massimo Destroverso ha detto...

Effettivamente, uso explorer 6 con windows xp. provo con il codice del template.
Grazie

Frasco! ha detto...

Una domanda...
ma se volessi un cursore animato l'estensione deve essere necessariamente CUR?
Non e' che ci deve essere qualche limitazione nelle dimensioni/frame/etcetc perche' se uso .gif mi prende un solo frame, .ani non me lo considera proprio e -sigh- .cur non so come crearlo -sigh-

Tenebrae ha detto...

Si, per i cursori animati le gif non vanno bene... cur è l'unica buona scelta, come dicevo nel post... per le dimensioni consigliate fai riferimento a quanto ho scritto... e per creare i file cur vedrò se riesco a posta qualche info

Frasco! ha detto...

Allora condivido la mia esperienza:
Cur, gif e png per immagine statiche, ani per le animate.
Purtroppo non su tutti i browser c'e' l'effetto ad esempio sul mio [alla fine ce l'ho fatta ole'] con Firefox non si vede nulla ma con IE si.
Comunque bravo Tenebrae, guide molto utile, non solo per i cursori!

Tenebrae ha detto...

grazie frasco per l'utile feedback!

| Graficolina ha detto...

Ciao. Come posso fare in modo che il mio cursore venga visualizzato anche su IE come vedo che è possibile per il blog di Daniela "Sfizi in tavola"? Aspetto risposta urgente... Grazie

Tenebrae ha detto...

@graficolina: mi sembra che tu abbia risolto, io lo vedo su internet explorer

elena71 ha detto...

Ma grazie!!!

Avevo già provato ad incollare il codice nell'html del blog, ma mi uscivano scritte stranissime...

E invece bastava solo aprire un nuovo gadget html, copiare, incollare e sostituire la tazzina.

Elena

elena71 ha detto...

Ops, rileggendo i commenti mi rendo conto che ho sbagliato ad incollare...

Pero' funzia lo stesso con una piccola gif che ho fatto io stessa..

Carramba :D

Anonimo ha detto...

scusate nn ho capito come incollare il codice nell html ci provo ma nn esce niente

Anonimo ha detto...

Io vedo il gelato nel blog di Daniela, ma nel mio non esce niente. Faccio tutto come spiegato, ma niente da fare. Sigh!!

Tenebrae ha detto...

che browser, blog... ? magari se lasci il link dò un'occhiata

Anonimo ha detto...

il mio blog è:
http://roberta-lagolosona.blogspot.com/

Grazie per quello che puoi fare

Shuryo ha detto...

ciao nn sono 1 grand esperto di queste kose ma sto creando un blog con blogger http://kirathejustice.blogspot.com/
nn so kosa vuol dire copiare e inkollare il dokumento html/javascript
me lo puoi spiegare??
grazie

Tenebrae ha detto...

@shuryo: ciao e benvenuto nel blog... dalla bacheca, se vai in layout->elementi pagina, vedrai che puoi cliccare su "aggiungi elemento"... ti comparirà una lista, e da lì scegli l'elemento di tipo "html/javascript"

Silvana ha detto...

HELP tenebra!!!
Ho provato la tazzina ... ma non mi compare nulla :-( mi sento molto stupida!
il mio blog è scrapperinaeoltre.blogspot.com
Volevo metterci un angelo, non x fare la ruffiana ma è la prima cosa che ho pensato dopo che ho visto il tuo sito paradisiaco per una ignorantissima come me!!!

Anonimo ha detto...

MITICA...come sempre.CIAOOOOOOOOO!!!

Alidiluna ha detto...

grazieee..ci sono riuscita!

Elena ha detto...

Ciao Tenebrae,

anche io mi sono creata di recente un blog con Blogger che sto rendendo sempre più bello ed interessante grazie anche ai tuoi utilissimi consigli.

Dato che nel mio sito che trovi a questo indirizzo
http://sonohrina79.blogspot.com
si parla di due giovani chitarristi, volevo sostituire permanentemente il cursore del mouse con l'icona di una chitarra elettrica, ma stavolta non sono riuscita a capire come posso fare per compiere bene tale operazione.

Ti dispiacerebbe darmi una mano per cortesia, dopo aver visto magari come è fatto il mio sito?
Dove devo aggiungere esattamente il nuovo codice HTML esattamente, nel mio caso? Ho provato a fare tutto quello che hai detto ma non ce l'ho ancora fatta e sono tre giorni che provo senza risultati!

Faccio presente che volevo assolutamente usare uno dei cursori già pronti da Totally Free Cursors ma non mi è chiaro se lo devo scaricare prima sul mio PC e poi linkarlo (in che modo?) al mio sito o usare direttamente un codice che mi forniscono loro. Sul sito non c'è scritto niente al riguardo!!!

Oltretutto, dato che ci sono, ti volevo chiedere inoltre, se possibile, come posso fare per togliere l'antipatico faro che presenta in alto attualmente la pagina del mio sito e che nulla ha a che fare con l'argomento del mio blog, sarebbe fantastico sostituirlo con un'immagine del gruppo musicale di cui sono ammiratrice.

Grazie di tutto.

Elena (Reggio Emilia)

Amministrazione ha detto...

Ciao!
Ho seguito la procedura per mettere un pallone come cursore, ma con mozilla si vede senza problemi, con explorer no! :( come posso fare?
Grazie e complimenti per il blog!

Anonimo ha detto...

sarà ma da me nn funzina...

Puccina ha detto...

Ciao! Io mi sono messa un Totoro come puntatore, io lo vedo, ma da un'amica con Explorer niente, mannaggia! Secondo te devo provare a modificare il codice del template? Io preferirei tenerlo in un gadget, così lo posso cambiare a piacere facilmente...
Buon Anno!

Silvia ha detto...

Grazie, utile e chiaro.
http://ilfavolosomondo.blogspot.com/

*°* Silvia *°* ha detto...

Vorrei chiederti una cosa....
Posso usare puntatore modificato e scia insieme?
Ho provato, ma non funziona.....

Grazie,
Silvia

P.s. A giorni pubblicherò la nuova versione del mio blog e ho inserito il tuo link

Anonimo ha detto...

Io ci ho provato ma non funzioa!! :((

ღ¢нιαяα♪™ ha detto...

Grazie 100!!! C'e l'ho fatta!

ps: il mio blog è
http://themagicworld-of-harrypotter.blogspot.com/

se lo vuoi visitare...

CiaoOo!!! by chiara

Luca ha detto...

grazie mille sei bravissimo!!

Luca ha detto...

il mio blog:
http://iphone-ipodtouch-blog.blogspot.com/

Hamsters' fan ha detto...

A me nn esce nnt!! Prova a guardare nei siti dove ho provato: www.imypinkworld.blogspot.com oppure www.myhamsterz.blogspot.com

Hamsters' fan ha detto...
Questo commento è stato eliminato dall'autore.
Hamsters' fan ha detto...

Scusa ancora, so che forse nn ci azzecca molto, ma nn so come si fanno e come si chiamano questi...(per esempio)http://hamletoilcriceto.blogspot.com/2007/07/link.html#go-to-banners dove c'è scritto tutto...cos'è? Un post, un casella di testo che se clicchi si apre in un'altra finestra?? Non capusco la vorrei fare anche io...i collegamenti li so fare, ma nn so proprio cosa siano queste pagine che nn sn post, ma si scrive lo stexo!! Ti prego nn so nemmeno km si kiamano...per uesto tee lo chiedo, anche s enn ci azzecca molto...! Sono disperata!!!!! :((

Associazione AmicidiFido ha detto...
Questo commento è stato eliminato dall'autore.
Stranger ha detto...

Ti adoro!!! :)

CINZIA ha detto...

grazie ai tuoi preziosi consigli il mio blog è diventato molto carino! Ho modificato il cursore, lo vedo diverso con Chrome mentre su IE è sempre la freccia

CINZIA ha detto...

ho messo 2 gadget per il puntatore, uno per il link e l'altro per tutto il blog come hai suggerito tu; solo che quanto passa in alcune immagini (non tutte) mi mette la solita manina...e invece io vorrei l'immagine che ho scelto per i link (sui link funziona) come posso fare?

palestra tortona ha detto...

Ciao, con photoshop ho creato un'immagine per un puntatore e l'ho caricata su imageshak, poi ho messo l'url nel codice che hai fornito tu ma non c'è verso di vederlo funzionare.
Puoi aiutarmi?

Stefano ha detto...

grazie x l'aiuto ma non riesco a utilizzare i cursori animati, forse dipende dal fatto che copio solamente l'url dall'immagine cosa devo fare per poter utilizzare il cursore animato? aspetto una tua risposta.
A presto!

gianmarco ha detto...

Ciao a tutti,grazie a voi sono riuscito a mettere il puntatore diverso

http://nintendo.blogfree.net/
che ne dite?

Samanta Machado ha detto...

Una guida molto utile! ^_^


Che ne pensate dei nuovi cursori?
http://mineguida.blogspot.it/


Prima di lasciare un commento, leggete qui

Posta un commento