Come personalizzare la citazione o blockquote in Blogger.

Come personalizzare il blockquote o citazione modificando il modello di Blogger.

Nell'Editor di Blogger è presente una icona a forma di virgolette inglesi che serve per dare un diverso aspetto a quelle che vengono definite le citazioni. Per utilizzarlo bisogna selezionare il testo della citazione e cliccare sulla icona. Già nell'Editor si vedrà che tale testo avrà i margini sinistro e destro più ampi del contenuto del resto del post.

Nei modelli ufficiali di Blogger questa è l'unica modifica che viene inserita quando si usa il bottone citazione o blockquote come viene comunemente chiamato. Nella prima introduzione dei commenti nidificati veniva usato proprio il blockquote per la gestione dell'aspetto delle discussioni.

Avrete certamente visto dei siti che utilizzano la grafica delle citazioni per inserire codice, la lista degli ingredienti delle ricette o altri contenuti da mettere ben in evidenza. Se siamo soliti usare molto questa funzionalità è opportuno personalizzarla, per esempio in questo modo

dove la citazione è stata inserita in un rettangolo con sfondo, con angoli arrotondati e bordi punteggiati. Tutti i parametri utilizzati per questo esempio possono essere modificati a piacere. Si può personalizzare il blockquote anche nei vecchi modelli mentre il metodo che avevo presentato per la personalizzazione della citazione nei nuovi modelli presenta dei problemi visto che va a interferire con l'aspetto dei commenti. In questa nuova versione questo fastidio non si dovrebbe presentare.

Si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin>. Subito sopra si incolla

.post-body blockquote {background:#FFEEDD; padding: 9px; width: 82%; height:auto; border: 2px dotted #FB7;text-align:left; font-style:italic; color:#5D5D5D; -moz-box-shadow: 0px 5px 10px #ddd;-webkit-box-shadow: 0px 5px 10px #ddd; box-shadow: 0px 5px 10px #ddd; -moz-border-radius: 15px; border-radius: 15px;}

dove sono stati colorati di rosso i parametri più importanti. Vi ricordo però che il raggio di curvatura degli angoli impostato in 15 pixel non sarà visualizzato con Internet Explorer. Gli altri valori da personalizzare riguardano:

1. Lo sfondo della citazione: #FFEEDD; (leggi il post sui codici dei colori)
2. La larghezza del rettangolo: width: 82%;
3. Lo stile del bordo (in questo caso dello spessore di 2px e punteggiato)
4. Il corsivo font-style:italic;. Se si volesse mettere il grassetto si aggiunge font-weight: bold;
5. Il colore del testo: color:#5D5D5D; 
6. Il colore dell'ombreggiatura: #ddd;

Ricordo che si può creare anche uno stile personalizzato per inserire del codice HTML nei post o qualsiasi altro elemento che vogliamo rendere originale.