Come personalizzare, font, colori e dimensioni dei titoli di Blogger e inserirvi immagini.

Come creare dei titoli di Blogger assolutamente originali modificando famiglia di font, dimensione, colore e stile anche di ciascun carattere e come inserire anche immagini all'inizio, alla fine o anche nel mezzo del titolo al posto dei caratteri stessi.

Alla luce di una conversazione avuta nei commenti su un vecchio post che riguardava la sottolineatura dei titoli di Blogger è forse opportuno integrare l'articolo in cui mostravo come si potesse mostrare solo una parte del titolo in corsivo (o in grassetto) con un nuovo post più approfondito.

Cominciamo col dire che forse non tutti sano che si possono aggiungere una o più immagini al titolo di Blogger. Si possono mettere all'inizio, alla fine oppure nel mezzo del titolo stesso. La piattaforma Blogger infatti supporta l'inserimento del tag <img> nel campo del titolo.

Quindi noi possiamo per esempio aggiungere manualmente una immagine o una icona al nostro titolo semplicemente aggiungendo il tag <img> con l'URL della immagine che vogliamo mostrare. Per esempio se apriamo l'Editor di Post di Blogger e incolliamo nel Titolo questo codice

<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



quando pubblicheremo otterremo questo risultato



Questa funzione non conosciuta da molti si presta a una infinità di utilizzi in tipologie di blog le più disparate. Visto che si opera solo nell'Editor non viene minimamente modificato il modello.

PERSONALIZZARE CARATTERI DIMENSIONI GRASSETTO CORSIVO E COLORI

Usando il tag <font> che come il tag <img> è supportato dal campo del titolo di Blogger possiamo anche realizzare un titolo multicolore, e multifont di questo genere 

in cui praticamente ciascun carattere ha una sua dimensione, un suo colore, un suo stile e una sua famiglia di font. Il codice incollato sempre nel campo del Titolo dell'Editor per questo test è stato

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

e si tratta chiaramente di un divertissement esplicativo di quello che si può realizzare con il tag <font> applicato al Titolo di Blogger. Questa tecnica può essere integrata anche con quella presedente per l'inserimento di immagini nel titolo per avere un risultato veramente originale

per il quale ho usato 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>

Non mi resta che ricordare alcuni attributi che si possono usare con il tag <font>.

1. Per la famiglia di caratteri aggiungete nel campo di font l'attributo face = "NomeFamiglia". Per evitare problemi è consigliabile usare font supportati da tutti i browser. 
2. Per la dimensione aggiungete nel campo di font l'attributo size="X"  con X che può variare da 1 per la dimensione più piccola a 7 per quella più grande
3. Per il colore si aggiunge l'attributo color="#codice-esadecimale" dove al posto di codice-esadecimale si incolla uno qualsiasi dei codici dei colori  
4. Per il corsivo e il grassetto non occorre neppure scomodare il tag <font> visto che basta inserire i rispettivi tag subito prima e subito dopo il carattere o la parola da mostrare in questo modo. Per il grassetto si usa il tag <b> con la sua chiusura </b> mentre per il corsivo il tag <em> con la sua chiusura </em>.  Al posto di <em> può essere usato anche <i> e la sua chiusura </i>

Coloro che pur essendo interessati al tema non avessero ben compreso tutto il discorso possono scaricare e consultare il mio ebook gratuito Guida all'HTML e al CSS.