Pubblicato il 15/05/13e aggiornato il

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://lh6.googleusercontent.com/-1LqWtxPT6Ec/UZNAMRWB_TI/AAAAAAAAhto/ZYBKEwHNAHo/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

icona-sinistra-articolo

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://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/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

icona-sopra-titolo-post

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

.post-outer:before {
content: url(https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/s32/cuore.png);
display: block;
width: 32px;
margin: 0 auto;
}

icona-sopra-titolo-post[4]

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://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/s32/cuore.png);
padding:5px;
}

icona-prima-dopo-titolo-post-blogger


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://lh3.googleusercontent.com/-v5JjkCkEU-g/UZNHYen24sI/AAAAAAAAht8/RI_tAWmTtMk/s32/matita32.png);
padding-right:2px;
}
.post-title:after {
content: url(https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/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

icona-prima-dopo-titolo-post

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.




7 commenti :

  1. Uso il css anche per inserire un'immagine nel titolo dei gadget. Così non vado a incasinarmi con la modifica del modello. ;)

    RispondiElimina
    Risposte
    1. @# Certo si può fare. E' piuttosto semplice che provo a farci un instant post :D

      Elimina
  2. Nelle dinamiche? No vero? Grazie

    RispondiElimina
    Risposte
    1. @# Nelle Dinamiche non ho neppure testato ma credo che i CSS siano completamente diversi

      Elimina
  3. Ciao Ernesto, io invece ho un altro problema: vorrei centrare le icone social sopra l'header, ma inserendo il codice CSS
    #HTML4 img{
    display:block; margin:auto;
    }
    le icone mi compaiono in verticale anzichè in orizzonatale...
    se non inserisco alcun codice nel CSS mi ritrovo le icone tutte spostate sulla sinistra...
    pensi ci possa essere modo per risolvere?
    Se vuoi dare un occhio al mio sito è www.lepassionidiantonella.com (è tutto stato fatto da me seguendo i tuoi consigli!)
    Grazie anticipatamente
    Antonella

    RispondiElimina
    Risposte
    1. Mi pare che le icone siano centrate. In ogni caso dovresti provare con
      display: block; margin: 0 auto;
      perché senza il primo 0 viene centrato in verticale
      @#

      Elimina
    2. Ciao Ernesto, grazie infinite per il riscontro...girovagando su vari siti ho trovato un codice che mi ha permesso di sistemare il problema. Man mi faccio un appunto sulla “dritta” che mi hai dato, perchè potrebbe sempre tornarmi utile in futuro. Grazie infinitamente per la collaborazione.
      A presto
      Antonella

      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.