Come aggiungere Occhiello e Cappello al Titolo di un Articolo.

Come creare un Occhiello e un Cappello per i Titoli dei Post in Blogger direttamente con l'Editor dell'articolo o modificando il template.

Proprio ieri ho letto un post nella Pagina Facebook di questo blog che ha stimolato la mia curiosità. Mi si chiedeva se fosse possibile creare dei sottotitoli con Blogger. Sul momento sono rimasto un po' interdetto e ho pensato che la lettrice avesse fatto confusione tra un post e un video. Riflettendo però ho realizzato che si riferiva alla impaginazione degli articoli tipica dei quotidiani cartacei. Insieme al titolo principale che prende la maggior parte del riquadro e al corpo dell'articolo spesso ci sono uno e talvolta altri due elementi che illustrano meglio il contenuto e che si trovano sopra o sotto il titolo principale.

In gergo giornalistico il titolo secondario che si trova sopra a quello principale si chiama Occhiello e serve a introdurre il tema del contenuto mentre l'altro elemento che si trova sotto al titolo principale si chiama Cappello e funziona come introduzione all'articolo. Vediamo come sia possibile in Blogger pubblicare un post con questi due elementi di contorno del titolo principale.

CREARE L'OCCHIELLO DIRETTAMENTE NELL'ARTICOLO

Se questa funzione ci serve solo in un determinato articolo non occorre modificare il template. Si apre l'Editor di Blogger e si confeziona il post come al solito. Quando si è terminato si clicca su HTML accanto a Scrivi e nella parte alta dell'Editor si incolla questo codice

<style>
.post-title small {
display:block !important;
margin-bottom:10px;
padding-bottom:15px;
font-size:14px !important;
font-weight:normal !important;
}
</style>

Si passa poi a creare il titolo incollando nel campo apposito un testo con questa sintassi

<small>Questo è l'occhiello dell'articolo che sta sopra al </small>Titolo Principale.

con l'Occhiello compreso tra i tag small. Il risultato è il seguente

I parametri servono per distanziare Occhiello e Titolo Principale, per non avere l'Occhiello in grassetto e per settare una dimensione giusta dei font. Naturalmente si possono aggiungere altre righe. Si può per esempio pensare di aggiungere un bordo tra Occhiello e Titolo Principale

che si crea con questo codice

<style>
.post-title small {
display:block !important;
border-bottom:1px solid #000;
margin-bottom:10px;
padding-bottom:15px;
font-size:14px !important;
font-weight:normal !important;
}
</style>

dove si può operare sullo stile del bordo come si desidera.

CREARE IL CAPPELLO NELL'ARTICOLO

Con le stesse modalità illustrate in precedenza si incolla su HTML questo codice

<style>
.post-title div {
display:block !important;
margin-top:20px;
padding-top:15px;
font-size:14px !important;
font-weight:normal !important;
}
</style>

con i parametri in rosso che servono per distanziare i due elementi, per la dimensione dei font e per eliminare il grassetto. Il titolo va pubblicato con questa sintassi

Titolo principale. <div> e questo è il cappello che si visualizza sotto il titolo</div>



Il risultato è il seguente

Anche in questo caso si può aggiungere un bordo

<style>
.post-title div {
display:block !important;
border-top:1px solid #000;
margin-top:20px;
padding-top:15px;
font-size:14px !important;
font-weight:normal !important;
}
</style>

con questo risultato

 

AGGIUNGERE OCCHIELLO E CAPPELLO AL TITOLO

Se si vuole un titolo molto descrittivo si può decidere di mostrare insieme al titolo principale anche cappello e occhiello. Il codice da incollare su HTML sarà il seguente

<style>
.post-title small {
display:block !important;
margin-bottom:10px;
padding-bottom:15px;
font-size:16px !important;
font-weight:normal !important;
}
.post-title div {
display:block !important;
margin-top:20px;
padding-top:15px;
font-size:16px !important;
font-weight:normal !important;
}
</style>

mentre la sintassi con cui pubblicare il titolo sarà questa

<small>Questo è l'occhiello dell'articolo che sta sopra al </small>Titolo Principale <div> e 
 questo è il cappello che si visualizza sotto il titolo principale</div>

con l'Occhiello compreso tra <small> e </small> e il Cappello tra <div> e </div>.



Il risultato sarà il seguente

Si possono fare molte personalizzazioni. L'unica a cui accenno è quella di un bordo punteggiato sotto l'Occhiello e sopra il Cappello con il testo di colore diverso. Si usa questo codice

<style>
.post-title small {
display:block !important;
color:#aaa;
border-bottom:1px dotted #000;
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 #000;
margin-top:20px;
padding-top:15px;
font-size:18px !important;
font-weight:normal !important;
}
</style>

che produce questo risultato



che è già un risultato apprezzabile dal punto di vista estetico e funzionale.

OCCHIELLO E CAPPELLO NEL MODELLO

Se si preferisce utilizzare questa tecnica per molti articoli del nostro sito allora conviene incollare i fogli di stile nel template e basterà pubblicare il titolo del post con la struttura vista precedentemente per Occhiello,  per il Cappello e per entrambi. Il codice prescelto va incollato sopra la riga </head> andando su Modello > Modifica HTML.  Si salva il template. Concludo ricordando che non si può dire nulla di certo per quello che riguarda la SEO però potrebbero esserci degli aspetti positivi come la possibilità di aggiungere più parole chiave al titolo e degli aspetti negativi quali il titolo troppo lungo.