Aggiungere su Blogger una icona prima e/o dopo il titolo del post.

Come aggiungere una icona prima o dopo il titolo del post in un blog su Blogger.

Mi sono già occupato di come inserire una immagine prima o dopo il titolo di un articolo modificando l'HTML del template. Vediamo come si possa arrivare allo stesso risultato semplicemente aggiungendo un opportuno CSS. Dopo aver scelto l'icona da inserire accanto al titolo dell'articolo questa va ovviamente caricata su un album pubblico di Picasa e ne va ottenuto il link diretto.

Il passaggio successivo sarà quello di verificare quale sia la classe dichiarata per il titolo degli articoli. Bisogna andare su Modello > Modifica HTML e cercare post-title. Nella gran maggioranza di casi il CSS relativo dovrebbe essere .post-title inserito nel modello come h3.post-title. Dove h3 rappresenta appunto il tag del titolo. Dopo aver verificato la presenza di questa classe, bisogna cercare la riga di codice ]]></b:skin> e, subito sopra a questa, incollare il codice

.post-title {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuP7-cUzHBkrzqwKnkok2Tfyzdvq6XGMihUQ1vDjb3gKDCY6TxDt1dUCOneYwFS_8Cb4Y7-sKdyMm1RyMpC1u93jySIvJf5YazAKAWluSSfNKn9mXqzTFf58WINNkdxC6_mHH_Fd_Dmzc/s40/matita.png) no-repeat left transparent;
    padding-left: 40px;
    }

dove al posto dell'URL della immagine colorato di rosso inserirete quello della vostra icona. La distanza tra l'immagine e il titolo del post sarà determinato dal valore del padding che potrà essere personalizzato. Si va su Anteprima modello per vedere l'effetto della modifica

Se ci soddisfa potremo andare su Salva modello per rendere effettiva la personalizzazione. E' possibile inserire l'icona anche sopra il titolo del post incollando quest'altro codice

.post-outer:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy1u4QNUGppFHNnd7Wev08H4qAzjOOLJf48Ckwr8sJJDzvTeZkQfZ5QpXu03RWuodKysP_EjL-IPBWDOW2Hd27lSC1BwG04YjoOYyL-FJDXtfEGnJ12ZO1auhnbwtupvLNcUm3XN5Wubc/s32/cuore.png);
}

dove come nel caso precedente dovremo verificare che post-outer sia effettivamente la classe presente nel template e inserire l'URL della nostra icona caricata su Picasa. Si va sempre su Anteprima modello per vedere il risultato della modifica per poi andare su Salva modello per renderla effettiva

Se volessimo centrare l'icona sopra al titolo, il codice precedente dovrebbe essere così modificato

.post-outer:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy1u4QNUGppFHNnd7Wev08H4qAzjOOLJf48Ckwr8sJJDzvTeZkQfZ5QpXu03RWuodKysP_EjL-IPBWDOW2Hd27lSC1BwG04YjoOYyL-FJDXtfEGnJ12ZO1auhnbwtupvLNcUm3XN5Wubc/s32/cuore.png);
display: block;
width: 32px;
margin: 0 auto;
}

COME INSERIRE DUE ICONE PRIMA E DOPO IL TITOLO DEL POST

Se volessimo inserire due icone identiche prima e dopo il titolo del post il codice da incollare sempre sopra alla riga ]]></b:skin> potrebbe essere simile a questo

.post-title:before,
.post-title:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy1u4QNUGppFHNnd7Wev08H4qAzjOOLJf48Ckwr8sJJDzvTeZkQfZ5QpXu03RWuodKysP_EjL-IPBWDOW2Hd27lSC1BwG04YjoOYyL-FJDXtfEGnJ12ZO1auhnbwtupvLNcUm3XN5Wubc/s32/cuore.png);
padding:5px;
}

dove oltre alla icona si può calibrare la distanza della immagine dal testo. Vediamo anche come visualizzare due icone diverse prima e dopo il titolo dell'articolo. Il codice allora invece diventa

.post-title:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiQG8_GFYQU81R4oERmDj6-JrkUJQJgVMKeOXOpq_Z1Jyn7zVuEanI1xArnr_j16N6yFyc5Uq5e8AO2P89YUJpLcwwVRko2WY7m-mM7HZFYSDmryAYzP4Z-U4jKGlNI4AC8w2npv1CvK8/s32/matita32.png);
padding-right:2px;
}
.post-title:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy1u4QNUGppFHNnd7Wev08H4qAzjOOLJf48Ckwr8sJJDzvTeZkQfZ5QpXu03RWuodKysP_EjL-IPBWDOW2Hd27lSC1BwG04YjoOYyL-FJDXtfEGnJ12ZO1auhnbwtupvLNcUm3XN5Wubc/s32/cuore.png);
padding-left:2px;
}

in cui sono da sostituire l'URL della icona da visualizzare a sinistra del titolo e quello della icona da visualizzare alla fine del titolo stesso con le relative distanze

Ovviamente se si vuole solo una icona sulla sinistra del titolo si può inserire solo il primo blocco di codice mentre se si vuole una immagine solo alla fine del titolo si può incollare solo il secondo foglio di stile.