Come creare in Blogger una classe di stile per la citazione o blockquote che dir si voglia.

Nel linguaggio HTML esiste il tag <blockquote> e il suo corrispondente tag di chiusura </blockquote>. Se un testo viene inserito in mezzo a questi due tag ne aumenta il rientro a sinistra. Viene di solito utilizzato per inserire una citazione di una fonte in un altro articolo, per esempio se si vuole riportare un estratto di un altro post.

Nell’editor di Blogger è presente con l’aspetto di un bottone con delle virgolette inglesi

Per utilizzarlo in genere si seleziona il testo da mettere in citazione e si clicca sul pulsante indicato dalla freccia.

In molti modelli di Blogger non esiste uno stile personale per questo tag ma in alcuni è già presente. Per vedere se nel nostro blog esiste oppure no la classe della citazione andiamo su Layot > Modifica HTML e clicchiamo su F3 o Ctrl+F cercando questa riga di codice

.post-body blockquote {

infatti nei CSS per creare una classe, questa viene scritta preceduta da un semplice punto. Nel caso in cui non fosse presente si può creare inserendo un codice simile a questo

.post-body blockquote {
normal 10px/19px "Trebuchet MS";
padding: 0px 20px;
margin: 10px 0px;
background: #FFEAE9;
}

dove le parti scritte in rosso si possono ovviamente personalizzare. Con questo codice, oltre al rientro a sinistra, i blocchi di testo che saranno inseriti nel tag blockquote avranno anche un sottofondo molto chiaro di colore #FFEAE9 che ovviamente può essere scelto a piacere. Se non conoscete i codici esadecimali dei colori leggetevi l’articolo sui codici dei colori.

Questo blocco di codice si inserisce (ricordatevi sempre di salvare il modello prima di iniziare) nella parte dei fogli di stile che sta nella parte alta del modello. In questo blog ecco dove l’ho inserito

Per utilizzarlo, come ho già detto, selezionate il testo a cui volete dare questo attributo, e cliccate sul bottone corrispondente. Un bottone simile esiste anche su Windows Live Writer.

 In questo articolo la classe blockquote l’ho utilizzata per inserire il codice HTML e devo dire che dà un tono di maggiore eleganza a tutto il post oltre a dare indicazioni cromatiche precise su dove inizia e dove finisce il codice. Può anche essere utilizzato per evidenziare una parte dell’articolo anche se in questo caso si può utilizzare il metodo descritto in

• Come evidenziare del testo in un articolo in modo personalizzato creando delle classi apposite -