Pubblicato il 13/02/15e aggiornato il

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.

icona-autore-blogger

 

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

icona-autore-commenti-nascosta

 

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

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

codice-base64
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

icona-autore-blogger[4]

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.




5 commenti :

  1. ciao ernesto, purtroppo anche queste modifiche non funzionano per cui ho eliminato l'intero css dell'icona dell'autore e non vedo più la matita, grazie ancora (la soluzione l'ho trovata leggendo altri post sul tuo blog) grazie ancora

    RispondiElimina
  2. Ciao Ernesto so che sono fuori tema ma vorrei sapere come tirare fuori dal congelatore vecchi post che tornano di un'attualità spaventosa. Ho scritto altri post su questo blog che mi sono stati bannati per mia ignoranza. Gradirei anche sapere quali sono i passi per arrivare sino a te per un discorso un pò più professionale. Saluti.

    RispondiElimina
    Risposte
    1. Ho raccolto in un post tutta la mia esperienza in materia di blogging
      http://www.ideepercomputeredinternet.com/2013/10/blog-tips-and-tricks.html
      Il riproporre vecchi post senza però fare copia incolla perché questo sarebbe visto in modo negativo da Google è sicuramente una scelta giusta. Quando un post che ha avuto successo comincia a scendere nelle SERP è opportuno crearne subito uno simile che lo possa sostituire magari linkandolo.
      Per quello che riguarda la seconda domanda purtroppo come ho già avuto modo di dire posso dedicare solo una parte modesta del mio tempo al blog. Inoltre ti assicuro che non son o certo il depositario di verità o conoscenze particolari. Ho solo una esperienza di 7 anni di blog e questo non è poco. Preferisco per varie ragioni mantenere il rapporto con i lettori solo attraverso i commenti sul sito o al limite i post sulla pagina fan o su Google Plus
      @#

      Elimina
  3. ciao Ernesto posso chiederti una cosa, ho scaricato un modello free in rete e ora ho un problema nei post c'è scritto il nome mio quando pubblico qualcosa.. bhe questa funzione l'ho tolta dalle impostazioni di layout però mi è rimasta.. quale stringa di codice devo togliere dal modello per far si che non pubblicano il nome dell' autore?? grazie per 'aiuto

    RispondiElimina
    Risposte
    1. In linea di massima la risposta che pubblico per questo genere di domande è:
      "Rivolgiti all'autore del template, perché lo chiedi a me? che c'entro? È un lavoro di un altro"
      Successivamente aggiungo una riga in cui avverto che magari la prossima volta incolla l'URL del sito in modo che possa dargli uno sguardo. Però stasera ho 5 minuti di tempo in più e allora ho aperto il tuo Google+ e sono andato a cercare il sito nelle Info. È questo?
      http://pianetdragonball.blogspot.it/
      Se è quello dopo aver salvato il template vai su Modello > Modifica HTML e cerca la riga
      ]]></b:skin>
      quindi subito sopra a questa incolla questo codice

      .meta_author {display:none !important;}
      span..meta_author {display:none !important;}
      .meta_author span {display:none !important;}

      e salva il modello.Dovrebbe funzionare

      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.