Mettere uno sfondo colorato al tag Quote/Citazione nel blog

Sicuramente se avete il blog su piattaforma Blogger, dopo aver scritto un post ed aver cliccato sul tasto Quote/Citazione(simboleggiato dalle due virgolette) per evidenziare una parte di testo, avrete sicuramente notato quanto Il tag stesso (Quote/Citazione) risulti essere molto anonimo e antiestetico. Fortunatamente la piattaforma stessa ci dà la possibilità di modificare a piacimento tale opzione, inserendo un codice CSS(Cascading Style Sheets o Fogli di stile), con lo strumento apposito nel codice HTML del blog
In questa guida vedremo come inserire un colore di sfondo, nel suddetto tag:

Il pulsante preso in considerazione è questo:

Di base, selezionando una porzione di testo o quello che vogliamo evidenziare e premendo sul bottone indicato sopra, l'unica cosa che otterremo è lo spostamento di qualche centimetro del testo verso il centro del post. Veramente anonimo.
Per modificare il tag, dando un colore allo sfondo, andiamo in Aggiungi CSS Personalizzati come spiegato in questo post, ed inseriamo questo codice:

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

Clicchiamo su Applica al blog.
Il risultato che otterremo è uguale a quello che utilizzo io in questo blog. Possiamo sbizzarrirci ulteriormente nella  personalizzazione per uniformare la modifica con i colori del blog, modificando i valori in rosso:

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

Dove:

• margin: 15px 25px 15px 25px; = sono le distanze della citazione. 
• padding: 8px; = è la distanza tra testo e il bordo del riquadro. 
• line-height: 1.4em; = è l'altezza della riga del testo. 
• color: #191919; = è il colore del testo interno della citazione. 
• font-style:italic; = in questo modo il testo diventa in corsivo. 
• font-size: 95%; = significa che è il 5% in meno rispetto al testo normale del post. 
• background: #faf0df; = è il colore dello sfondo interno della citazione. 
• border: 1px solid #008250; = indica lo spessore e il colore del bordo della citazione.

Una modifica semplice ma che avrà un buon effetto nel blog. Buona personalizzazione.

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Se non sai come utilizzare i Feed, clicca qui!
Oppure prendi in considerazione di diventare Lettore Fisso del blog