Come personalizzare le citazioni nei nuovi modelli di Blogger.

Come personalizzare la citazione o blockquote nei nuovi modelli di Blogger per renderla diversa dai commenti.

Dopo l'introduzione dei commenti nidificati di Blogger, nei vecchi template lo stile dei commenti è stato ereditato da quello del blockquote o citazione che dir si voglia. In tali modelli se si cerca di modificare i CSS della citazione viene automaticamente modificato anche l'aspetto dei commenti.

Le personalizzazioni che avevo presentato per il blockquote non sono quindi applicabili nei vecchi modelli a meno che non si voglia visualizzarle anche nei commenti. Se invece si ha un template ufficiale di Blogger presentato successivamente all'introduzione del Designer Modelli, si può personalizzare l'aspetto della citazione indipendentemente da quella dei commenti.

Ricordo che per creare una citazione bisogna selezionare il testo o comunque il contenuto citato e andare sull'icona del blockquote

 

La classe che sovrintende alla citazione è blockquote e ci si può sbizzarrire come crediamo. Ecco un esempio di codice che può essere incollato subito sopra alla riga ]]></b:skin>

blockquote {
margin: 10px 15px 3px 35px;
padding: 5px 15px 10px 15px;
border-left: 5px solid #D84938;
}

in Modello > Modifica HTML > Procedi. Si avrà questo risultato

con un bordo sinistro colorato molto di moda nei nuovi template. Si possono modificare i parametri relativi a margin (distanze esterne) e al padding (distanze interne). Ricordo che il primo numero si riferisce alla distanza dalla parte alta e a seguire in senso orario. Il rientro sulla sinistra è in questo caso di 35 pixel. Si può anche modificare il colore del bordo (D84938) così come la sua dimensione (5 pixel).

E' anche possibile aggiungere anche altre righe. Per esempio

font-style: italic; // Per visualizzare il testo in corsivofont-size: 90%;  // Per personalizzare le dimensioni del testo
background-color:#eeeeee;  // Per inserire un colore di sfondo
text-align:justify;  // Per giustificare il testo

dove possono essere modificati i parametri colorati di rosso. I più esperti di voi possono sbizzarrirsi ulteriormente e inserire altre modifiche. E' anche possibile inserire una immagine all'inizio e una alla fine della citazione in questo modo inserendo sopra alla stessa riga questo codice

.post-body blockquote:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNKAE0mrPKf-MyWoAtcZnIwhY54KC9KVzgIhwYfhaJl-aGqQMjfFVAEkiPOjkfSsnOPLhAARgpi8ub8f0TPlzxjNELNgx3CKVa7u9hZ9DGuMUHpYzErgiS1P8AUVO0u44dEMvIxKWQ030/s32/citazione1.png);
}
.post-body blockquote:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTV8uXMSL6X0UWM3NFWSZM2VRwuOw0W6_LE8Ad9MoseFYmCC6I5YKSx-NYrxoANfsOdUnOXVMe336UXMJn40WRxRJv8UdVHU-eVVRNfognGFJY5SjNknXhVPHOHzGBHaovlSPtc9HPB2I/s32/citazione2.png);
}

dove possono essere modificate le immagini di inizio e fine citazione sostituendone gli URL. Si può anche fare a meno di inserire immagini e usare i tag after e before con questa struttura

.post-body blockquote {
background:#eeeeee; /* Colore di sfondo */
margin: 10px 20px 10px 40px;
padding:10px;
}
.post-body blockquote:before {
content: "\201C"; // Icona inizio citazionefont-family: Trebuchet MS;
color:#003366; // Colore della icona
font-size: 40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D"; // Icona fine citazionefont-family: Trebuchet MS;
color:#003366; // Colore della icona
font-size: 40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}

che porterà a questo aspetto della citazione



La controindicazione di questo metodo è che le virgolette iniziali e finali saranno viste solo con Internet Explorer 10 mentre non si visualizzeranno con le altri versioni di IE. Non ci sono ovviamente problemi con browser quali Chrome, Safari, Opera e Firefox.