Pubblicato il 21/10/14 - aggiornato il  | 3 commenti :

Come mostrare parte del titolo in corsivo su Blogger.

Come mostrare una parte del titolo in corsivo, in grassetto o di un diverso colore in tutti i post o solo in alcuni.
Ho appena ricevuto una una email in cui mi si chiedeva un aiuto per pubblicare una parte del titolo in corsivo mentre l'altra parte nel modo consueto. Pare che i nomi botanici in latino per convenzione debbano proprio essere postati in corsivo e questo pone appunto il problema di visualizzarli in modo diverso rispetto al resto del titolo. Nel caso in cui si volessero tutti i Titoli di un blog su Blogger in corsivo non si deve fare altro che andare su Modello > Personalizza > Avanzato > Titolo blog e si scegliere tra l'altro la Famiglia dei font e la loro dimensione. Pigiando poi sulla icona I si può settare il titolo in corsivo mentre se si sceglie l'icona B si visualizzerà in grassetto.

Nel caso che mi è stato prospettato nella email si tratta di avere solo una parte del titolo in corsivo. Per essere più chiaro prendo come esempio proprio quello che mi è stato proposto nel messaggio. Dobbiamo creare un titolo come questo 

Camomilla - Camomilla recutita

con una parte normale e una in corsivo. Per questa personalizzazione seguirò la falsariga dell'articolo su come aggiungere il cappello e l'occhiello nel titolo del post. Si va su Modello > Modifica HTML, si cerca il tag  ]]></b:skin> e, subito sopra, si incolla questa semplice riga di codice

.post-title span {font-style: italic;}

Si salva il modello. Adesso quando dobbiamo pubblicare il post basterà inserire tra i tag <span> e </span> la parte del titolo che vogliamo mostrare in corsivo. Nel caso preso in esame dovremo incollare nel campo del titolo questi caratteri 

Camomilla - <span>Camomilla recutita</span>

Va da sé che ci possono essere anche due parti in corsivo e che queste possono stare all'inizio, alla fine o nel mezzo del titolo senza alcun problema. Il risultato sarà il seguente
corsivo-titolo-post-blogger

È evidente che questo metodo che ho usato per il corsivo può essere utilizzato anche per altre personalizzazioni. Incollando per esempio nello stesso punto del template quest'altro codice

.post-title span {
color:#f00;
font-style: italic;
}

la parte del titolo compresa tra <span> e </span> prenderà anche una diversa colorazione.

parte-titolo-colorato-diversamente

Seguendo questa metodologia ci si può sbizzarrire come si vuole per pubblicare i titoli con colori diversi e non solo con stili diversi. Concludo questo "instant post" osservando che nel caso si voglia usare questa tecnica in un solo articolo o nel caso in cui si vogliano modificare le impostazioni da post e post non occorrerà modificare il template. Si dovrà andare nell'Editor di Blogger su HTML che si trova accanto a Scrivi e incollare all'inizio per esempio questo codice

<style>
.post-title span {
color:#f00;
font-style: italic;
}
</style>

per poi postare il titolo come al solito

titolo-corsivo-colorato

per avere lo stesso risultato dello screenshot precedente.


3 commenti :

  1. Ciao Ernesto, volevo chiedere una cosa. Se ad esempio al posto del corsivo volessi cambiare, oltre al colore, anche il font? È possibile una modifica di questo tipo?
    Grazie per i tuoi consigli e buona serata.

    Lucia Alocchi

    RispondiElimina
    Risposte
    1. Certo che è possibile. La sintassi per la pubblicazione del titoloè la stressa mentre il codice da usare nel modello è quest'altro
      .post-title span {
      color:#f00;
      font-family:Arial;
      }
      dove puoi cambiare il codice del colore e al posto di Arial ci metti la famiglia di caratteri che desideri scegliendola tra quelle supportate da Blogger che sono elencate su Modello > Personalizza > Avanzato. Per i font non supportati da Blogger la cosa è più complessa
      @#

      Elimina
    2. Grazie per la risposta Ernesto.

      Lucia Alocchi

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy