Come riprodurre suoni al passaggio del cursore su foto o link.

Ho già presentato un tutorial su come si possa installare sul blog un meccanismo per riprodurre effetti audio al passaggio del mouse. Il sistema presentato aveva la controindicazione di funzionare solo su Internet Explorer. Vado adesso a illustrare un nuovo metodo che in teoria dovrebbe funzionare con tutti i browser ma che nel mio post di test da risultanze negative proprio con Internet Explorer. Non ci sono invece problemi di funzionamento con Chrome, Firefox e Opera. Visto che nel sito da cui ho preso ispirazione di cui il link a fondo articolo il metodo va anche con IE potrebbe anche essere un problema limitato al solo template che ho usato o più in generale a tutta la piattaforma Blogger. Il metodo non funziona invece con Safari per OS Windows, non so dire nulla per Safari installato su Mac.

In teoria i file audio MP3 dovrebbero essere supportati da IE9+, Chrome 6+, Safari 5+ mentre i file audio OGG da Opera 10.5+. Inserendo dei file audio nei due formati si dovrebbero quindi coprire tutti i browser più importanti. La prima cosa da fare è quindi quella di procurarci i file e eventualmente convertirli in entrambi questi formati. Si può usare il programma gratuito Format Factory o un qualsiasi altro convertitore di file audio. Se avete un blog gratuito del tipo Blogspot.com potete usare Google Sites come hosting dei file audio.

Come inserire un cursore di scorrimento nei widget di Blogger.

I blogger si trovano molto spesso ad affrontare questioni di spazio nella gestione del layout. Si devono sempre cercare dei compromessi tra far vedere al visitatore il più possibile e la mancanza di spazio sufficiente per poterlo fare.

Sono sicuro che questo semplicissimo tutorial risolverà dei problemi a molti di voi. Come tutte le cose particolarmente efficienti è di una immediatezza disarmante e può essere usato per tutti i widget di Blogger o di altre piattaforme che vengano installati mediante codice HTML/Javascript.

L'idea è quella di inserire un cursore nel widget in modo da ridurne drasticamente l'altezza ma non la possibilità di consultarlo. Vi faccio un esempio pratico. Se volete mostrare il widget degli articoli recenti relativamente agli ultimi 25 post, questo avrebbe una altezza decisamente troppo elevata e comprometterebbe gli equilibri estetici del layout. Se invece poniamo che debba essere alto solo 150 pixel e inseriamo un cursore ecco che tutto viene risolto

Modificare la forma del cursore con i fogli di stile (CSS).

Il cursore assume delle forme diverse a seconda dell'elemento a cui passa sopra. Questo accade praticamente in tutti i siti e con tutti i browser. In linea di massima lo vediamo cambiare almeno in tre modalità: freccia bianca inclinata a sinistra (forma di default), barra verticale lampeggiante (nei campi in cui si deve inserire del testo) e mano con indice puntato (quando il cursore passa sopra un link).

Mi sono già occupato di come personalizzare la forma del cursore introducendo una immagine che lo sostituisca

1. Cursore personalizzato -
2. Cursore personalizzato che funzioni anche con Internet Explorer -

Con questo breve articolo voglio illustrare come modificare la forma del cursore soltanto attraverso i CSS, inserendo cioè l'attributo style in un paragrafo o in un contenitore del tipo div. L'operazione si può fare modificando il modello oppure direttamente nel post. Il primo caso è da sconsigliare quindi non lo tratterò neppure. Se si vuole cambiare la forma del cursore in una particolare zona del testo bisogna prima conoscere quali sono gli attributi supportati

Come inserire l'Effetto Zoom nelle immagini di Blogger.

Quando si devono postare in un articolo delle foto molto grandi, è evidente che debbano essere ridimensionate. Questo va però a discapito della corretta visualizzazione dei dettagli. Possiamo collegare l'immagine al suo link originale, per farla aprire in un'altra finestra del browser se ci si clicca sopra, ma questo significa far uscire dal sito il visitatore. Vediamo come sia possibile applicare un Effetto di Zoom molto bello in modo tale da poter ingrandire una determinata porzione della foto. Ho testato l'effetto nei vecchi modelli con successo, mentre con i nuovi template il cursore non sempre è centrato bene dentro l'area da selezionare. Nella pagina dell'autore sono comunque presenti le istruzioni per calibrare al meglio tutte le distanze. Si usa la libreria JQuery che può essere incompatibile con altri script.

L'Effetto Zoom che vado a presentarvi si deve a Ben Nadel e la sua installazione su Blogger non presenta alcuna difficoltà. L'immagine da sottoporre all'effetto può avere qualsiasi dimensione, noi dobbiamo solo scegliere la larghezza di quella che vogliamo mostrare nel post. Ho messo in rete una

• Demo dell'Effetto Zoom per Blogger -

Come creare un cursore personalizzato per Blogger che funzioni anche con Internet Explorer.

Nell'articolo precedente ho parlato di come si possa modificare l'aspetto del cursore quando punta un determinato link. In articoli passati mi sono occupato più volte della personalizzazione di cursori, c'era sempre però il problema che questi non si visualizzavano correttamente con Internet Explorer. La ragione risiede nel fatto che IE riconosce come cursore solo immagini in formato ANI (absit iniura verbis) che sono di difficile reperimento. Gli altri browser invece funzionano con i formati più classici come GIF, PNG o JPG.

Per creare un cursore che sia visibile nello stesso modo da tutti i browser, dobbiamo quindi avere una stessa immagine con due formati diversi. I cursori gratuiti possono essere trovati nell'interessante portale Totally Free Cursors in cui ne sono presenti una infinità, suddivisi in categorie che vanno dagli animali ai segni dello zodiaco. Quando abbiamo individuato il cursore che ci interessa, dobbiamo scaricare l'immagine normale, solitamente in GIF, e quella da utilizzare per Internet Explorer che è, come già detto, in formato ANI.

Modificare la forma del cursore in tutto il blog o solo in particolari link.

I cursori sono moltissimi e ciascuno è in genere associato a una particolare azione.
 In Blogger vi sarete accorti che, quando puntiamo un link, il cursore si trasforma in una mano con in dito indice verso il collegamento. Se invece scriviamo un articolo con l'Editor di Blogger  o con Windows 

LIve Writer prende la forma di una linea verticale lampeggiante. Ecco un elenco dei principali tipi di cursori. Se puntate con il mouse un elemento, potrete visualizzarne la forma del cursore che vi è associato

Cursore con cappello di Babbo Natale per mettere nel blog per le Feste.

Sembra che soprattutto il pubblico femminile ami particolarmente le personalizzazioni che mutano la forma del mouse all'interno di un sito o anche solo di una singola pagina. In occasione delle Feste di Natale ho quindi pensato di proporre un codice che, se inserito nel blog, mostrerà ai visitatori il puntatore con la forma del cappello di Babbo Natale.

Lo script funziona benissimo su Chrome e Firefox mentre è un po' più lento su Internet Explorer. Non ho dati sugli altri browser che comunque sono usati da una netta minoranza di navigatori.

Occorre andare su Design > Modifica HTML e cercate la riga

</head>

Subito sopra bisogna incollare il seguente codice