Come personalizzare l'aspetto del titolo dei post di Blogger.

Come personalizzare il titolo dei post di Blogger aggiungendo Occhiello, Cappello, Immagini e modificando dimensione, colore e famiglia di ciascun carattere.

Il titolo del post è uno dei più importanti fattori di ranking per i motori di ricerca ma anche un elemento fondamentale per far preferire agli utenti il nostro articolo, e quindi cliccarci sopra, quando visualizzano risultati di ricerca di Google. Un titolo deve essere breve ma descrittivo e tale compromesso non è sempre facile da trovare.

In questo articolo mi occuperò del titolo da un altro punto di vista cioè del suo aspetto. Le dimensioni dei caratteri e il colore del titolo del blog sono determinati dal modello e possono essere modificati cercando nel template il blocco di codice che inizia con h3.post-title e che tra le parentesi graffe contiene le informazioni per colori, dimensioni, margini e famiglia di font.

In molti modelli di Blogger la classe del titolo del post è associata a quella del titolo dei commenti con l'aggiunta di .comments h4 alla classe precedente dopo la virgola di separazione. In questo modo questi due elementi avranno lo stesso aspetto. Si può naturalmente sostituire quell'unico blocco di codice con due blocchi distinti per titoli e commenti.

COME AGGIUNGERE IMMAGINI AL TITOLO DEL POST

Il campo del titolo del post di Blogger supporta dei tag HTML imprevedibili come quello delle immagini. Si possono quindi aggiungere immagini prima e/o dopo il titolo. Se nell'Editor di Blogger si incolla nel campo del titolo un codice come questo

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy1u4QNUGppFHNnd7Wev08H4qAzjOOLJf48Ckwr8sJJDzvTeZkQfZ5QpXu03RWuodKysP_EjL-IPBWDOW2Hd27lSC1BwG04YjoOYyL-FJDXtfEGnJ12ZO1auhnbwtupvLNcUm3XN5Wubc/s32/cuore.png" /> Post San Valentino <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy1u4QNUGppFHNnd7Wev08H4qAzjOOLJf48Ckwr8sJJDzvTeZkQfZ5QpXu03RWuodKysP_EjL-IPBWDOW2Hd27lSC1BwG04YjoOYyL-FJDXtfEGnJ12ZO1auhnbwtupvLNcUm3XN5Wubc/s32/cuore.png" />

in questo modo



si otterrà un risultato simile al seguente



che può essere una buona idea per articoli di determinate tipologie di blog.

PERSONALIZZARE I SINGOLI CARATTERI DI UN TITOLO

I titoli di Blogger hanno caratteri tutti della stessa dimensione e colore. Si può creare un titolo multicolore e con caratteri diversi utilizzando il tag <font> e i codici dei colori. Questo codice

<font size="5" face = "Arial" color="#000"><em>C</em></font><font size="4" face = "Verdana" color="#0f0"><b>O</b></font><font size="2" face = "Courier" color="#off"><em>L</em></font><font size="4" font="Impact" color="#f0f"><b>0</b></font><font size="5" face = "Arial" color="#036"><em>R</em></font>

se incollato nel campo del Titolo dell'Editor di Blogger porta a questo risultato

Sono stati usate diverse famiglie di font e il tag <em> per il corsivo e <b> per il grassetto. I caratteri del Titolo possono anche essere intervallati da immagini. Per esempio con questo codice

<font size="5" face = "Arial" color="#000"><em>C</em></font> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy1u4QNUGppFHNnd7Wev08H4qAzjOOLJf48Ckwr8sJJDzvTeZkQfZ5QpXu03RWuodKysP_EjL-IPBWDOW2Hd27lSC1BwG04YjoOYyL-FJDXtfEGnJ12ZO1auhnbwtupvLNcUm3XN5Wubc/s18/cuore.png" />  <font size="2" face = "Courier" color="#off"><em>L</em></font> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy1u4QNUGppFHNnd7Wev08H4qAzjOOLJf48Ckwr8sJJDzvTeZkQfZ5QpXu03RWuodKysP_EjL-IPBWDOW2Hd27lSC1BwG04YjoOYyL-FJDXtfEGnJ12ZO1auhnbwtupvLNcUm3XN5Wubc/s18/cuore.png" />  <font size="5" face = "Arial" color="#036"><em>R</em></font>

porterà ad avere un titolo con questo aspetto

COME AGGIUNGERE OCCHIELLO E CAPPELLO AL TITOLO

In tipografia si definisce Occhiello il testo che viene visualizzato sopra al titolo dell'articolo e Cappello il testo che invece viene mostrato sotto il titolo. Volendo avere un risultato come questo

si deve partire da un codice che definisca l'aspetto di Occhiello e Cappello. Tale codice va incollato nell'Editor di Blogger, all'inizio del corpo del post, in Modalità HTML. Questo esempio di 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>

va incollato nell'articolo in questo modo



La struttura del titolo che sarà incollato nel campo apposito invece sarà la seguente

<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 i tag <small> e </small> e il Cappello tra i tag <div> e </div>. Naturalmente in un titolo si può decidere di aggiungere solo il Cappello o solo l'Occhiello.  Nel codice ci sono i parametri per i codici dei colori, per lo stile del bordo, per le dimensioni dei caratteri e per i margini tra Occhiello, Cappello e Titolo del post.

CAPPELLO E OCCHIELLO NEL MODELLO

Se decidiamo di inserire molto spesso Occhiello e/o Cappello insieme al titolo del post allora è consigliabile inserire il codice nel modello invece che in ogni singolo post. Il codice va incollato in Modello > Modifica HTML, subito sopra alla riga </head> per poi salvare il template. Quando si edita un nuovo articolo basterà digitare la struttura del titolo nell'apposito campo senza l'aggiunta di nessun altro codice.

COME MOSTRARE PARTE DEL TITOLO IN CORSIVO

Concludo questo articolo con una piccola chicca a beneficio dei blogger che si occupano di botanica o che comunque hanno a che fare con una nomenclatura scientifica in latino. Per convenzione la denominazione di una pianta o di una specie animale in latino va pubblicata in corsivo. Questo crea difficoltà quando questa denominazione latina va inserita direttamente nel titolo. Il nostro obiettivo sarà quello di pubblicare dei titoli che abbiano questo aspetto

con la denominazione latina della specie in corsivo. Dopo aver salvato il template si va su Modello > Modifica HTML e, subito sopra alla riga   ]]></b:skin>, si incolla questo codice

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

Si salva il modello. Quando si crea un post, nel campo del titolo si digiteranno 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 di posizionamento.