Lavoriamo insieme ✨

In questa pagina trovi i servizi che metto a disposizione per chi vuole migliorare la propria comunicazione online, attraverso il blogging e non solo.
Se hai dubbi su quale servizio scegliere, non esitare a contattarmi.
Sarò felice di risponderti :)

Blogger in Azione

Blogger in Azione

ideale per chi ha già un blog, e vuole analizzare la propria comunicazione
Web Design

Web Design

avere un sito ben curato è importante, anche su Blogger!
Primi Passi

Primi Passi

1 problema = 1 soluzione. Anche se sei alle prime armi, l'importante è partire!
F.A.Q.

F.A.Q.

Hai dubbi? Leggi le F.A.Q. per cominciare, oppure contattami :)

Illustrazioni e Lettering

In questa pagina trovi alcuni miei lavori di illustrazione e lettering creati per i miei canali social.

Icona autore nei commenti: come personalizzarla

16.4.19
Simona S.
6 commenti
come evidenziare l'autore del blog nei commenti personalizzando l'icona accanto al nome

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 è:
  1. copiare il codice
  2. cliccare all'interno del frame che racchiude il tuo HTML
  3. premere CTRL+F per far comparire la casella di ricerca all'interno del frame
  4. 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIRdS_gXGQWzxFCUGvhbu_j27wdMlpng55NV7kg7c2lS46Z2PWeR-Dz2-7OsgXkKeix4uQzevkwIy_1wqrnppihPcx4jD2rolYAGaSkJzj39Touo18v2_zNYvY5nSAS6lT6Q95J8VKSe95/s0/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 ♥


potrebbe interessarti:








Aiutami a crescere, condividi il mio post!
Grazie!
come evidenziare l'autore del blog nei commenti personalizzando l'icona accanto al nome


6 commenti in "Icona autore nei commenti: come personalizzarla"

  1. Ciao Simona :)
    io non ho la matitina accanto e nemmeno .icon.blog-author, forse perchè ho adottato uno dei "nuovi" temi responsive, boh? Comunque grazie per i post sempre utilissimi, seguo tutti i tuoi consigli ♥

    RispondiElimina
    Risposte
    1. Ciao Irene ♥
      Allora ho guardato il tuo blog, ho fatto una prova e se inserisci il codice degli stili nel tuo CSS (come ho spiegato in questo post) ti assicuro che si vedrà ;)

      Elimina
  2. Post utilissimo! Grazie mille ♥

    RispondiElimina
    Risposte
    1. Grazie Nadia, sono felice che ti sia stato utile ❤️

      Elimina
  3. davvero interessantemente formidabile...merci...^__^

    RispondiElimina

Grazie di aver commentato!
Solitamente rispondo ai commenti nelle prime 24 ore, se hai richieste urgenti puoi scrivermi usando il modulo dei contatti :)

Per favore NON lasciare link, a meno che non siano richiesti espressamente nel post stesso.
I commenti con link non richiesti o con link affiliati verranno considerati come SPAM e quindi subito cancellati.
So che capirai ;)