Come personalizzare le citazioni o blockquote in Blogger.

Nei nuovi modelli di Blogger è stato eliminato il CSS che determinava l'aspetto della citazione questo a discapito di una personalizzazione della stessa. Nell'Editor di Blogger però esiste sempre il bottone per creare la citazione o blockquote. Per utilizzarlo bisogna selezionare il testo da mettere come citazione quindi cliccare sulla stessa icona a forma di virgolette.

Si creerà automaticamente un codice con la struttura <blockquote>Testo della citazione</blockquote> che potrà essere visto andando in Modalità HTML

 

Il testo sottoposto a citazione sarà visualizzato nell'articolo semplicemente con un maggiore rientro a destra e a sinistra oltre a essere più distanziato dal resto del layout nella parte alta e bassa

Vediamo come personalizzare il codice in modo tale da avere delle citazioni più originali. Si va su Modello > Modifica HTML > Procedi e si cerca la riga

]]></b:skin>

Bisogna fare attenzione perché spesso Blogger aggiunge a questa riga anche la parentesi graffa di chiusura del CSS precedente, in questo caso va inserito il cursore dopo tale parentesi e poi premere Invio per procedere alla separazione dal resto della riga

Subito sopra a tale riga va incollato un codice di questo tipo

blockquote {
  margin: 15px 25px 15px 25px;
  padding: 8px;
  line-height: 1.4em;
  color: #191919; 
  font-style:italic;
  font-size: 95%; 
  background: #eeffff;
  border: 1px solid #008250;
}

in modo da avere delle citazioni con questo aspetto

Ovviamente si possono personalizzare i parametri e si possono eliminare delle linee che non interessano. Ricordo che

1. margin: 15px 25px 15px 25px; rappresentano le distanze della citazione dalla parte alta (15px) e poi a seguire nelle altre tre direzioni in senso orario
2. padding: 8px; è la distanza interna tra il testo e il bordo del rettangolo della citazione
3. line-height: 1.4em; è l'altezza della riga del testo in funzione della dimensioni del carattere di default
4. color: #191919; è il colore del testo della citazione
5. font-style:italic; se si vuole la citazione in corsivo
6. font-size: 95%; è la dimensione dei caratteri della citazione rispetto a quella di default
7. background: #eeffff; è lo sfondo del rettangolo della citazione
8. border: 1px solid #008250; è lo stile del bordo della citazione.

Nel caso si addotti una personalizzazione per il blockquote in presenza della nuova funzione dei commenti nidificati, anche questi ultimi prenderanno lo stesso aspetto della citazione, è quindi un codice che si può usare anche per quello scopo.