Come nascondere o modificare l'icona dell'autore nei commenti nidificati di Blogger.

Come sostituire l'icona visibile accanto al nome dell'autore del blog di Blogger nei propri commenti o come addirittura nasconderla a tutti.

A seguito di un commento ricevuto appena ieri su come si possa nascondere l'icona che appare accanto al nome dell'amministratore del sito nei commenti nidificati di Blogger ho deciso di scrivere un instant post su questo tema che spero possa interessare anche altri lettori. 

Tale icona è visualizzata da tutti i navigatori e sostanzialmente serve per rendere subito evidenti i commenti che sono stati pubblicati dall'autore del blog. L'icona di default di Blogger ha dimensioni di 16-18 pixel quindi nel caso si pensi di modificarla è consigliabile sostituirla con una immagine di pari dimensioni o al limite più piccola. Si parte da una situazione di questo tipo.

 

COME NASCONDERE L'ICONA

Se si vuole nascondere l'icona senza sostituirla con altra immagine, dopo aver salvato il template, si va su Modello > Modifica HTML e intorno alla 14-esima riga si clicca sulla freccetta nera accanto alla sezione <b:skin> per visualizzarne tutto il codice. Si clicca sull'area del template e si digita Ctrl+F per visualizzare in alto a destra la casella di ricerca. Vi si incolla il codice ]]></b:skin> e si pigia su Invio. Nel modello sarà visualizzata ed evidenziata di giallo proprio tale riga. Subito sopra a questa va incollato 

span.icon.user.blog-author {display:none !important;}

Si salva il modello. Il risultato sarà il seguente

 

COME MODIFICARE L'ICONA DELL'AUTORE

Se si vuole modificare l'icona dell'autore dei commenti si deve ovviamente trovare una immagine adeguata. Per uniformità con il sistema utilizzato da Blogger è preferibile scegliere di utilizzare Base64 per convertire l'immagine in una stringa alfanumerica senza doverla caricare da nessuna parte. Si può usare il tool WUtils.com e cliccare su Sfoglia per selezionare l'immagine da convertire

  
Si va su Convert image to Base64 string e si scorre la pagina che si apre fino in fondo

Si seleziona e si copia il codice del css background image come mostrato nello screenshot. Si crea adesso un nuovo codice con questa struttura 

.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
CODICE COPIATO DAL TOOL PER LA CONVERSIONE IN BASE64
}

dove al posto della scritta in rosso si incolla il codice copiato da WUtils.com. Per maggiore chiarezza incollo il codice che ho usato come test per questa personalizzazione

.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAALpSURBVHjalJJZSJRxFMV/33zfzNhMNovmgmN7VloYLRaVpmGRFEY9tEBJUCAYRSAV0qIkiJi0ZxYtDwVSUFnSQw8lFUW0EUU+WGkTWulk0zjTOOv376FBGhyLDvwf7uX8D+fceyXHyQaGg0BCo5Ewu5zZHZ0duYmZ0xos6TYVvz+auGEjSnvmrOGFNDLaOAVD85VlT2/eqitKt4WQ5cZYXOWN5B3WTTDgIdOaMSlxdckBqbOToMtZhBpqRA0PFep6dy2mkAZAa6Tq8dG9+TPWjFxbcxTl5cNKr9dHQNZGcc2AUmqOHUunDmA3LS8YYZy5+VDLbr53tZ8uX1T26rXzC0gSqqpiMBiwJlgwA5Lr8rqYsWRvL8GsJY/kKXsX3H/S3tPmeDYjNT7RERSgyBrGpMnYOz/woPUxFxovooSc76NVJAh5feiNbLHMnrAgoLnD9KS2akuc7HD6XpCWoictLZ59B19z/uxNRNj3W+iryz3EkdrvNttyV1Wiz0Bnb3w2LvncqXGpINnA3gbbSqD5Lgj1j2E73K4/3Ej4+10kTc7YZZ6fny76XuLx3ajWjAajFT7bIb8IPn6Ksf6BAc9gEQ6FCAbCmamFubvAiLv7zDVpbF+L0QT2DliYB93dsZejdH3/OVh4v0FW4fT9yVk5Ws+be2pQaa1MMMGly1Cyib9C6Y0Y8g2AwcDSmSvz19PlRtVer0+YytuqPVB/csg/KWrJgGK0Jv2O9cPF7IJFFQnJc3Dbmz6NyrbXVFRAbV2UgBaIB3RAGPBGnlDirCn4g34SR5jm5uSUFuD0ET+ptbp8B67DJwaP3BQ5YB3gB9zATyAw6EivulG9/Uydv6LYlDORq1U7apueB84130YBxgKWSJQfQA/QD6hDwh4vn8eRnbMI9V39fOFYWVOknQ2sApYAGcDIvw1aCAGptvEUFa8rLt++tUULKUAesBgYH4nyTwghkABJp49LEYJwMODzR4bo4T8ghODXACjIFNV6ldgMAAAAAElFTkSuQmCC); 
}

dove la parte evidenziata di giallo è quella che deriva dalla conversione della icona in Base64. Da notare la parentesi graffa finale subito dopo il codice preso da WUtils.com. Tale codice si incolla nel template di Blogger esattamente nella stessa posizione in cui abbiamo incollato il precedente. Si salva il modello e se si apre un post con un commento dell'autore si avrà questo risultato

Volendo si può fare anche a meno di usare Base64 e usare questo codice

.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(URL_ICONA_AUTORE);
}

dove al posto di URL_ICONA_AUTORE si incolla l'indirizzo della icona prescelta che precedentemente dovrà essere caricata su Picasa per poi ottenerne il link diretto.