Come creare degli stili personalizzati per formattare il post.

Creare delle classi di stile personalizzate per la formattazione del testo su un blog di Blogger.

Scrivo questo breve post a seguito di una richiesta di una lettrice che è migrata a Blogger da Splinder. I lettori più assidui di questo blog si ricorderanno che a seguito della chiusura di Splinder per cessazione di attività, scrissi un tutorial su come esportare tutti i contenuti dei blog che si erano creati con quel servizio per poi importarli su Piattaforme Blogger o Wordpress.

Sembra che su Splinder ci fosse una funzione con cui si poteva selezionare il colore da usare per il grassetto e il corsivo. In verità non ne capisco l'utilità visto che si può sempre usare l'Editor di Blogger o Windows Live Writer per formattare come ci pare qualsiasi testo. Però visto che mi è stato richiesto vediamo come si possano creare delle classi di stile personalizzate per poi usarle in certe parole o porzioni di testo. Non si tratta di una cosa immediata quindi diciamo che questo post ha più una valenza euristica che pratica perché consente ai neofiti di capire come creare delle classi di stile da utilizzare nei post.

Dopo aver scelto i colori per il grassetto, il corsivo e il grassetto corsivo consultando la tabella interattiva dei colori si passa a modificare il template. Si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin> . Subito sopra si incolla un codice come questo

.grassetto {
font-weight:bold;
color:#C200FF !important; /* Fucsia */
}
.corsivo {
font-style:italic;
color:#006000 !important; /* Smeraldo */
}
.gr_cor {
font-weight:bold;
font-style:italic;
color:#002F80 !important;  /* Blu Acciaio */
}

dove i codici dei colori possono essere personalizzati e i commenti colorati di verde sono puramente descrittivi e possono essere tralasciati. Si salva il modello. Se si pensa di usare questa personalizzazione soltanto in un post o in una pagina, basterà incollare il codice all'inizio dell'articolo in Modalità HTML tra i due tag <style> e </style>.

Quando si vorrà scrivere una parola o una frase in grassetto, in corsivo o in grassetto-corsivo con questi parametri sarà sufficiente usare questo codice in modalità HTML

<span class="grassetto">Frase in grassetto</span>

<span class="corsivo">Frase in corsivo</span>

<span class="gr_cor">Frase in grassetto-corsivo</span>

Per esempio il seguente codice HTML

Frase scritta in <span class="grassetto">grassetto fucsia</span>, in <span class="corsivo">corsivo smeraldo</span> e in <span class="gr_cor">grassetto corsivo blu acciaio</span>

produrrebbe questo risultato

Frase scritta in grassetto fucsia, in corsivo smeraldo e in grassetto corsivo blu acciaio

Da notare che questo metodo può essere usato per creare uno stile predeterminato che potrebbe anche includere dimensioni del carattere, famiglia dei font e altri parametri per poi ripresentarlo in una qualsiasi parte di un articolo. Oltre al tag <span> che serve per avere il testo sulla stessa linea possono anche essere usati nello stesso modo i tag <p> e <div> che comportano sempre un salto di riga.