Come personalizzare l'icona nei commenti dell'autore del blog.

Sostituire l'icona dei commenti dell'autore del blog su Blogger con un'altra codificata secondo l'algoritmo Base64.

Se si sono attivati i commenti con le risposte nel template di Blogger, accanto a quelli dell'autore comparirà una icona circolare di colore grigio con questa forma  . In alcuni modelli personalizzati questa immagine non si vede e ho già postato un articolo su come fare per riuscire a visualizzarla.

La particolarità di quel CSS è che l'immagine non è caricata da nessuna parte ma viene generata da un algoritmo che il browser è in grado di leggere senza bisogno di ricavare l'URL dell'immagine da un hosting. Questo comporta un aumento della velocità di caricamento del sito. Infatti il CSS relativo è sì più pesante ma non c'è però bisogno di ricorrere a un archivio esterno. Inoltre i fogli di stile sono memorizzati nella cache del browser e questo rende più rapida la navigazione quando si è già aperta almeno una volta una pagina del sito.

L'algoritmo utilizzato si chiama Base64 e ha l'obiettivo di sostituire degli oggetti quali le immagini con un codice equivalente. La sintassi per introdurre questo tipo di codice è la seguente

data:[<mediatype>][;base64],>dati>

Mediatype indica il tipo di browser e il formato del file. Se vogliamo tradurre una immagine dobbiamo immettere image/gif, image/jpeg o image/png. Nel caso non si scegliesse il tipo di file, la codifica lo considererà come fosse del semplice testo (text/plain). Per chi volesse approfondire consiglio la voce Data URI Scheme di Wikipedia. Come abbiamo visto quindi il codice della icona dell'autore è il seguente

.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

da incollare subito sopra a ]]></b:skin> nel caso non si visualizzasse correttamente. La parte colorata di blu è il codice secondo l'algoritmo Base64 che denota l'icona dell'autore. Se volessimo usare un'altra icona, sempre di dimensioni 18x18 pixel, per esempio questa  , dovremo convertire tale immagine in una sequenza alfanumerica come quella precedente. Si può utilizzare il tool WUtils.com selezionando la sezione Image to Base 64. Si seleziona il file dal computer e si clicca su Convert Image to Base64

Il codice ottenuto si sostituisce a quello del modello per visualizzare una icona personalizzata quando è l'autore del blog a commentare. Tale codice può essere trovato cercando la riga

.comments .comments-content .icon.blog-author

Si può naturalmente usare il metodo classico per personalizzare l'icona sostituendo tutto il blocco di codice con il seguente e personalizzando l'URL dell'icona da visualizzare

.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(https://lh3.googleusercontent.com/-3xT1KUHrZlQ/T3a5oODwXeI/AAAAAAAAXQU/KlBXCzIInjE/s18/icona-autore.png);
}

Il risultato sarà simile a questo