Pubblicato il 23/11/17 - aggiornato il  | 7 commenti :

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,

occhiello-sommario-blogger






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.

titolo-corsivo

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>.


7 commenti :

  1. Questa è funzione che sto cercando da secoli. Ho un modello Emporio ma ho voluto provare lo stesso. Nei post funziona, pari pari all'esempio che hai riportato nell'immagine. Nella homepage, però, si vede occhiello, titolo e sommario tutto insieme (e tutto nello spazio del titolo). Non ho capito dove togliere il tag per non farlo apparire in home. E poi, domanda: come apparirà il titolo quando dobbiamo condividerlo sui vari social?

    Domanda ancora più interessata: hai intenzione, prima o poi, di dedicarti a qualche modifica sui nuovi modelli? (So che è un lavoraccio ma nessuno se n'è ancora occupato per bene, tranne qualche sito americano ma niente di approfondito)

    RispondiElimina
    Risposte
    1. Ho provato nei nuovi modelli a eliminare occhiello e sommario dalla home ma non ci sono riuscito. Il problema dei nuovi modelli è che non sono tutti uguali. Per ogni personalizzazione dovremmo fare un post per Contempo, uno per Soho, uno per Emporio, ecc
      @#

      Elimina
  2. Ciao, scusa per modificare il tipo di carattere, ho come titolo il callagrafiti, mentre forrei inserire il New Times Romes per il sommario, ho aggiunto font-family ma non funzione. Suggerimenti. Grazie. Ciao.

    RispondiElimina
    Risposte
    1. Devi inserire questa riga di codice nel CSS

      font-family:Times New Roman !important;

      P.S. Credo che tu ti riferisca a quello perché il New Times Romes non mi risulta che esista
      @#

      Elimina
    2. Ciao scusa se ti disturbo se inserisco il codice nel CSS con la riga che mi hai suggerito l'occhiello e titolo principale vengono visualizzati nella stessa riga, attaccati senza spazio e con la stessa font, mentre il sottotitolo cambia. Se inserisco lo stesso codice nel post Occhiello viene inserito nella prima riga con Times New Roman, il Titolo nella seconda riga con un altra font, e nella terza riga il sottotitolo. Cosa Sbaglio? Ciao e grazie.

      Elimina
    3. scusa come non detto ho trovato l'errore. grazie e scusa per il disturbo.

      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