Come aggiungere emoji nel Tema di blogger - in menù, widget, ecc...

Come inserire icone rappresentate da emoji nel modello di Blogger, nei menù e nei widget come fossero normale testo usando i loro identificativi Unicode

Qualche giorno fa ho ricevuto un commento su un post in cui illustravo come installare un menù orizzontale su più livelli. Il lettore aveva provato a modificarlo aggiungendo delle immagini al testo delle voci del menù.

Il risultato non era stato completamente di suo gradimento e mi chiedeva se si poteva risolvere in qualche modo. Cominciamo a fare delle considerazioni preliminari. Innanzitutto conviene andarci cauti con l'inserimento delle immagini, perché rallentano parecchio il caricamento delle pagine. In seconda battuta sarebbe importante usare i CSS Sprite per minimizzare le richieste HTTPS da parte del browser.

In questo post vedremo appunto come aggiungere delle icone a degli elementi del nostro blog su Blogger, che possono essere dei menù oppure dei widget o altri oggetti HTML, che sono stati aggiunti al nostro modello mediante un codice. La soluzione che propongo è quella di aggiungere delle icone usando i loro codici Unicode.

Il consorzio Unicode si occupa di definire in maniera univoca la corrispondenza fra un preciso carattere (sia esso latino, cirillico o cinese) e un numero di codice. Le Emoticon e le Emoji che inseriamo nei social e nelle chat, hanno tutte il loro codice Unicode identificativo. Unicode supporta circa due milioni (2²¹) di caratteri. Oltre alle classiche faccine, sono disponibili icone di ogni genere che possono essere utilizzate per rendere più accattivante un menù o un widget o altri oggetti HTML.

Visto che si tratta di caratteri, non viene in alcun modo appesantito il caricamento della pagina. Se si conosce il codice Unicode di un carattere, lo si può mettere tra i simboli &#x e ; per ottenere la stringa da incollare nel codice per poterlo visualizzare. Facciamo un esempio pratico. Il codice Unicode di una faccia imbronciata è U+1F621. I primi due caratteri U+ non ci interessano perché indicano solo che si tratta di un codice Unicode.

Se usando tali caratteri, creiamo la stringa 😡 e la incolliamo come fosse un normale testo, ci verrà mostrata questa emoji 😡, e, se non ci credete provate a incollare tale stringa nel tool Real Time Editor. 

COME TROVARE IL CODICE UNICODE DI UNA EMOJI

Poniamo che abbiate un sito di tecnologia e che nel menù vorreste aggiungere le emoji di CD, DVD, Telefono, Telecamera, ecc. Se avete già trovato le emoji che vi servono, incollatele nel riquadro del Tool delle Entità.

Nella parte bassa visualizzerete la stringa che dovrà essere incollata nel codice per visualizzarle nel modello di Blogger. Le stringhe iniziano sempre con &#x e terminano con il punto e virgola.

Le icone possono essere copiate anche dall'Editor di Blogger che le inserisce direttamente come emoji e non con il loro codice Unicode. Possono anche essere cercate direttamente sul sito di Unicode facendo una ricerca con parole chiave in lingua inglese. Sono indicati anche gli ID Unicode con cui passare alla loro rappresentazione. Si possono pure copiare selezionandole per poi digitare Ctrl+C.

Una soluzione ancora più semplice è quella di cercare le Emoji da usare come icone nel sito Grumdrig. Ci sono emoji suddivise in categorie quali Persone, Natura, Cibo, Attività, Posti, Oggetti, Simboli, ecc...

A destra di ciascuna emoji si potrà copiare il loro codice completo da copiare su HTML, per poterle visualizzare con un browser. Questi codici possono essere inseriti insieme al normale testo, per visualizzare anche le emoji a cui corrispondono, come si vede nel primo screenshot mostrato in questa pagina.

La dimensione della emoji sarà quella dei caratteri di testo. Si potrà cambiare la dimensione della icona, così come si fa con quella di un testo; p.e. usando questo codice <p style="font-size:36px;">&#x1F600;</p> si otterrà una emoji delle dimensioni di 36 pixel. In taluni casi occorre aggiungere anche uno spazio tra emoji e caratteri testuali, per non visualizzarli attaccati. Per farlo si aggiunge &#160; che è appunto l'Entità dello spazio.