Aggiungere occhiello, sommario e corsivo al titolo del post in Blogger.

Come aggiungere l'Occhiello e il Sommario al Titolo di un post su Blogger e come mostrarne parte in corsivo.

Le consuetudini grafiche della carta stampata non sono semplici da riproporre così come sono anche nella editoria online. Nei quotidiani cartacei il titolo di un articolo oltre che dal corpo dell'articolo stesso è accompagnato da altri elementi grafici che servono per una introduzione e per il sunto di quello che sarà la stesura del pezzo.

Il Titolo principale con caratteri molto più grandi degli altri elementi ha spesso un testo al di sopra e uno al di sotto. La parte che sta sopra al titolo viene chiamata Occhiello e quella che sta al di sotto si chiama Sommario. Talvolta all'articolo viene aggiunto anche quello che si chiama Catenaccio.

L'Occhiello è la breve frase che si trova sopra il titolo. Introduce il lettore alla notizia e ne cattura l'interesse facendo spesso ricorso a frasi ad effetto. Solitamente nell'occhiello vengono fornite informazioni sul luogo e su data e ora dell'avvenimento di cui si parla nell'articolo.

Il Titolo vero e proprio è facilmente riconoscibile dal carattere grafico più evidente e il suo compito è quello di dare o di "gridare" la notizia in modo stringato ma descrittivo.

Sotto il titolo qualche volta c'è dell'altro testo prima dell'articolo vero e proprio che viene chiamato Sommario. Occhiello e Sommario sono abbastanza simili nei caratteri grafici ma quest'ultimo in genere è più lungo e serve a dare qualche chiarimento in più sulla notizia fornendone un breve riassunto.

In alcuni articoli è presente anche il Catenaccio che si trova all'interno del corpo dell'articolo con dei riquadri incastrati tra le varie colonne del testo. In questo articolo vedremo come mostrare il Titolo del post in Blogger corredato da Occhiello e Sommario. Per il Catenaccio l'operazione è diversa e non riguarda specificatamente i CSS del titolo dell'articolo.  Il codice che andrò a mostrare non funzionerà nei Nuovi Temi di Blogger o meglio funzionerà nel post ma non funzionerà nella homepage almeno del Tema Contempo.

Quando si vuole pubblicare un Post con Titolo, Occhiello e Sommario, per avere un risultato simile a questo,

si può incollare questo codice in HTML nell'Editor del Post prima del resto del contenuto

<style>
.post-title small{
display:block !important;
color:#bbb;
border-bottom:1px dotted #111;
margin-bottom:10px;
padding-bottom:15px;
font-size:18px !important;
font-weight:normal !important;
}
.post-title div{
display:block !important;
color:#aaa;
border-top:1px dotted #111;
margin-top:20px;
padding-top:15px;
font-size:18px !important;
font-weight:normal !important;
}
</style>

dove i codici dei colori, lo stile del bordo  e gli altri parametri possono essere personalizzati a piacere. I valori del margin e del padding servono per posizionare Occhiello e Sommario in funzione del Titolo del post.

Quando si pubblica un post nel campo del titolo dovremo inserire un testo con questa struttura di base

<small>Questo è l'<b>Occhiello</b> dell'articolo che sta sopra al </small>Titolo Principale del post<div> e  questo è il <b>Sommario</b> che si visualizza sotto il titolo principale</div>

dove il tag <b> serve per aggiungere il grassetto.

Se si vuole usare questo tipo di Titolo per tutto il blog dovremo andare su Tema -> Modifica HTML e subito sopra alla riga ]]></b:skin> si incolla il primo codice senza le righe <style> e </style> quindi si salva il Tema.

Il titolo dovrà essere inserito con la stessa sintassi del secondo codice.

OSSERVZIONI IMPORTANTI: Anche nella Homepage e nelle pagine delle etichette il titolo del post mostrerà Occhiello e Sommario. Se un titolo di articolo non avrà al suo interno il tag <small> non mostrerà l'Occhiello mentre se non avrà il tag <div> non mostrerà il Sommario. Se non avesse entrambi i tag il titolo verrà visualizzato come prima della modifica e questo varrà anche per i post già pubblicati.

COME MOSTRARE PARTE DEL TITOLO IN CORSIVO

In taluni casi può essere utile mostrare una parte del titolo in corsivo p.e. per il nome in latino di una specie animale o vegetale in botanica o biologia o per evidenziare una dichiarazione.

Prima del contenuto del post si incolla questo codice

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

quindi si digita il titolo del post con questa struttura di base

Leone Africano - <span>Panthera leo</span>

dove quello che va mostrato in corsivo si inserisce tra i tag <span> e </span>. Si può incollare il codice nel Template subito sopra alla riga ]]></b:skin> per poi salvare il Tema per non doverlo incollare tutte le volte nell'Editor. Il primo codice di questo capitolo va incollato senza le righe <style> e </style>.