Uno dei miei post più popolari è Come evidenziare il nome dell'autore nei commenti. Purtroppo il codice non funziona perché Blogger ha deciso di togliere quel pezzettino di codice che permetteva di rilevare l'autore del blog ed evidenziarne il commento.
Certo si può sempre trovare una soluzione inserendo uno script, ma oggi ti propongo un'alternativa più creativa per differenziare il commento dell'autore del blog dal resto dei commenti: personalizzando l'icona accanto al nome.
Di default, tutti i blog su Blogger mostrano una icona accanto al nome dell'autore, questo pallino grigio con una sorta di matita:
La mia icona, che ho invece personalizzato, è una tazza con un buon cappuccino fumante:
Il cappuccino non si vede, ma fidati se non è lui è cioccolata.
Il thé solo quando sto male.
Per personalizzarla devi innanzitutto avere una immagine da inserire che non sia troppo grande; la mia per esempio misura 26*30px.
Certo dovresti avere un programma di grafica, ma se non ce l'hai ti consiglio di utilizzare ciò che trovi online, come canva.com con il quale ho fatto creato questa immagine, semplicemente utilizzando una delle sue illustrazioni gratuite messe a disposizione per gli utenti.
Dove inserire l'icona?
All'interno del codice HTML devi cercare .icon.blog-author. Per cercare un codice il modo più semplice è:
- copiare il codice
- cliccare all'interno del frame che racchiude il tuo HTML
- premere CTRL+F per far comparire la casella di ricerca all'interno del frame
- incollare il codice da trovare all'interno della casella di ricerca.
Il codice che vedi qui sotto è quello all'interno del mio blog.
Al posto dell'url del tulipano che trovi qui, devi inserire l'indirizzo della tua icona.
.comments .comments-content .icon.blog-author {
display: inline-block;
height: 29px;
width: 23px;
margin: 0 0 -4px 7px;
background-image: url(https://2.bp.blogspot.com/-zPyq_PWwtWA/XJs51AHT4KI/AAAAAAAAUr4/9Enzo8yVwNQy0QxOpIZehYOOzpitU_C-QCLcBGAs/s000/tulipano.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: bottom;
}
Ricorda di modificare le dimensioni di width ed height (larghezza ed altezza), in base alla tua immagine. Ovviamente lo devi decidere a monte quali devono essere le dimensioni, cioè già al momento della creazione dell'icona.
Per caricare le immagini e utilizzarle nel tuo codice HTML di Blogger, puoi creare una pagina lasciandola in bozza, e caricarle lì, avendo così sempre a tua disposizione le immagini come se fossero in una cartella.
E tu avevi mai fatto caso all'icona dell'autore?
Se hai trovato utile questo post e se userai questo mio tutorial nel tuo blog, per favore lascia pure un commento.
io li lovvo ♥
Aiutami a crescere, condividi il mio post!
Grazie!
