Titolo del post con occhiello, sommario e corsivo in Blogger

Come mostrare il titolo dei post di Blogger anche con l'occhiello e il sommario così come accade nella carta stampata e come mostrare parte del titolo in corsivo

La carta stampata utilizza delle consuetudine grafiche che è molto difficile riproporre nella editoria online anche dai grandi quotidiani che hanno una loro versione web.

L'aspetto di un articolo per i navigatori di internet è formato da due soli elementi, il titolo e il corpo dell'articolo che magari può contenere immagini, video o altri oggetti HTML.

Nella carta stampata il Titolo principale è spesso accompagnato dall'Occhiello, dal Sommario e dal Catenaccio. Il Titolo principale ha una dimensione dei caratteri molto più grande di tutti gli altri elementi.

L'Occhiello ha dei font più piccoli di quelli del titolo, ma più grandi di quelli del corpo del post, ed è quel testo che viene mostrato al di sopra del Titolo principale. Il Sommario è un altro testo che si trova sotto il titolo, ma prima del corpo dell'articolo ,ed è un breve sunto del corpo del post.

La dimensione dei caratteri del Sommario è inferiore a quella del Titolo Principale ma maggiore rispetto a quella del corpo dell'articolo, in genere dello stesso ordine di grandezza di quella dell'Occhiello.

Il compito dell'Occhiello è quello di dare dei riferimenti, quello del Titolo principale di "gridare" la notizia mente il Sommario è solitamente più lungo e fornisce un riassunto ai lettori del contenuto dell'articolo.

In alcune scelte tipografiche c'è pure il Catenaccio, che si trova all'interno dell'articolo, con dei riquadri incastrati tra le varie colonne del testo. In questo post vedremo come rendere l'aspetto di un post di Blogger in qualche modo simile a quello di un quotidiano cartaceo mostrando oltre al Titolo anche Occhiello e Sommario. Il Catenaccio invece è molto difficile da aggiungere utilizzando il linguaggio HTML.

I codici che andrò a incollare funzioneranno nei vecchi Temi di Blogger mentre per i Nuovi Temi Responsive dovranno essere testati singolarmente per verificare o meno la loro adeguatezza.

TITOLO OCCHIELLO SOMMARIO IN BLOGGER

Per questa personalizzazione non occorre modificare il Tema di Blogger ma dovrà essere incollato uno stesso codice in Modalità HTML, prima del corpo del post nell'Editor di Blogger. Il codice in oggetto è il seguente:

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

Nel campo in cui si digita il titolo del post dovremo anche usare dei tag HTML per dividere Titolo Principale, da Occhiello e da Sommario. La sintassi di base da usare è la seguente:

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

Dopo aver pubblicato l'articolo ecco quello che sarà il suo aspetto.

con il Titolo Principale che erediterà le impostazioni solite dei titoli del sito mentre Occhiello e Sommario prenderanno l'aspetto dei CSS che abbiamo aggiunto prima del codice del corpo del post. L'Editor di Blogger nella Modalità HTML si mostrerà con il codice prima del corpo del post e con il titolo inserito con dei tag HTML.

L'Occhiello va inserito tra i tag <small> e </small> mentre il Sommario tra i tag <div> e </div> inseriti nel campo del titolo. Il Titolo principale sarà senza tag e il tag <b> è opzionale e usato per aggiungere il grassetto.

Per rendere le cose anche visivamente più chiare ho evidenziato rispettivamente di giallo, verde e grigio l'Occhiello, il Titolo Principale e il Sommario. I codici dei colori e gli altri parametri come la dimensione dei font e lo stile dei bordi possono essere personalizzati a piacere. Con dotted ho scelto uno stile di bordo punteggiato.

Si può inserire nel Tema di Blogger il primo codice, incollandolo senza i tag <style> e </style>, subito sopra alla riga ]]></b:skin> per poi salvare il Tema. La stessa struttura con Occhiello, Titolo Principale e Sommario sarà mostrata anche nella versione mobile di Blogger anche se sono opportune altre personalizzazioni.

IMPORTANTE: Se un titolo di un post sarà pubblicato senza 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

Alcuni blogger hanno creato dei siti di biologia e zoologia in cui trattano di specie vegetali e animali. È pratica comune indicare i nomi latini delle specie in corsivo e questo accade ovunque, da Wikipedia ai Dizionari, dalle Enciclopedie agli articoli scientifici. Vediamo come un blogger che si occupa di tali temi possa risolvere.

Prima del contenuto dell'articolo il blogger biologo o zoologo dovrà incollare questo codice in Modalità HTML

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

mentre dovrà digitare il titolo secondo questa sintassi di esempio

Avvistato un delfino comune a becco lungo - <span>Delphinus capensis</span>

che porterà a questo risultato

La parte del titolo da mostrare in corsivo dovrà essere contenuta tra i due tag <span> e </span>. Ricordo che il primo codice può essere inserito nel Tema sopra alla riga ]]></b:skin> senza i tag <style> e </style>.