Che cos'è il blockquote?

E' un particolare codice che ci permette di racchiudere una citazione, o una qualsiasi frase, in uno spazio, un blocco appunto, in modo da staccarlo dal resto del testo.
Puoi attivarlo cliccando le virgolette a destra delle liste, nella barra della formattazione del testo:


Personalmente utilizzo il blockquote quando voglio dare enfasi ad una frase per me rilevante.

Ecco come si presenta il codice del blockquote:
<blockquote>Ecco come appare il mio blockquote</blockquote>
e come lo vedi tu...

Ecco come appare il mio blockquote

Per personalizzare il blockquote ti basterà intervenire, come al solito, nel tuo CSS.
Di sicuro, se utilizzi un tema di terzi (ovvero scaricato e installato su Blogger) nel tuo CSS esiste già una voce 'blockquote'; ma se non dovesse esserci allora significa che gli stili sono quelli prelevati di default da Blogger. E non è che sia sempre bellissima la 'citazione' proposta da Blogger. Quindi ti mostrerò come puoi renderlo più carino e quali comandi dargli per personalizzarlo a tuo piacimento.
Ovviamente per rendere più bella e gradevole la lettura, inserirò delle citazioni tratte da uno dei miei romanzi preferiti: Jane Eyre.

Attenzione!
Considera gli stili SENZA i selettori ".stile1, .stile2, ecc...", ma SOLO blockquote. Io ho dovuto inserirli perché altrimenti li avresti visualizzati con lo stile presente nel mio codice.
Cosa significano quelle parole all'interno delle parentesi graffe? (non i dolci anche se non sarebbero male a quest'ora...)
Ti dirò quelli più importanti:

1. width = larghezza
2. border = bordo
3. padding = spazio all'interno dell'elemento
4. margin = spazio all'esterno dell'elemento
5. background = sfondo

Ricorda, inoltre che per cambiare il colore devi andare a modificare il codice HEX, facilmente riconoscibile perché preceduto dal simbolo dell'hashtag #.
(in fondo al post ti lascerò qualche link di siti nei quali puoi trovare i codici hex)

Ok, cominciamo!

Stile #1

Partiamo da uno stile semplice per un blockquote minimal e pulito.
Questo stile è veramente basilare; ha infatti, come unica decorazione, il bordo sinistro.

Non c'è felicità come quella di essere amati dai tuoi simili e sentire che la tua presenza è un'aggiunta al loro conforto.

Vediamo il codice:
blockquote.stile1 {
width:90%;
border-left: 3px solid #bbb;
padding: 20px;
font-style: italic;
}

Stile #2

Semplice come il primo, ma con i bordi superiori e inferiori.

Ti chiedo di percorrere la vita al mio fianco, per essere il mio secondo io, e il miglior compagno terreno

blockquote.stile2 {
width:90%;
border-top: 2px solid #bbb;
border-bottom: 2px solid #bbb;
padding: 20px;
font-style: italic;
color:#777;
}

Stile #3

Praticamente uguale al secondo stile, ma qui entra in campo la pseduo class, ovvero :before.
La pseudo class (anche in questo caso non so se sei maschile o femminile il termine) è per me un po' complicato da spiegare, ma cercherò di farlo nella maniera più semplice possibile, perché a noi non interessano i paroloni tecnici, ma capire come funzionano.
Le pseudo class :before e :after non fanno altro che aggiungere un elemento che nell'HTML è invisibile, perché viene costruito attraverso il CSS; :before riguarda un elemento che verrà visualizzato prima, o dietro, dell'elemento nel quale è inserito, :after dopo.
Lo so cosa stai pensando 'Dammi sto codice e basta!' e hai ragione, ma come ogni cosa in questo blog, è più facile a farsi che a dirsi.
In questo caso la pseudo class :before mi è servita a far visualizzare le virgolette della citazione.

La sua venuta era la mia speranza ogni giorno, la sua separazione era il mio dolore; la possibilità che i suoi passi ritardassero era ghiaccio in ogni vena.

Ecco il codice degli stili.
blockquote.stile3 {
width:90%;
border: 0;
padding: 20px;
font-style: italic;
border-width: 2px 0;
border-style: solid;
border-color: #bbb;
z-index:0;
position: relative; }
blockquote.stile3:before {
content: '\201C';
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
width: 40px;
height: 30px;
line-height:30px;
font-family: Georgia, serif;
font-size: 3em;
color:#bbb;
text-align: center;
}

Stile #4

Questo stile è più allegro, gioioso, e non poter non inserire una delle frasi più belle di Jane Eyre... Ah, ma quanto bello e intenso è l'amore fra Jane e il signor Rochester?

Sono orribile, Jane? Molto, signore: lo siete sempre stato.

In questo caso ho inserito una sfumatura di colori partendo da destra, 'to right', e finendo a sinistra.
Io ho inserito solo due colori, ma se ne possono inserire di più creando la sfumatura che più tipiace, o che più si addice al tuo tema.
blockquote.stile4 {
width:90%;
border-left: 2px solid #f9e8de;
background: linear-gradient(to right, #efcdb4 0%, #ed9775 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 20px;
font-size: 26px;
font-weight:bold !important;
font-style: none !important;
}


Qualche link per recuperare i codici Hex color:

1. direttamente da Google cercando le parole hex color
2. Color Hex Color Codes 
3. Hex Color Tool 
4. Questo è fatto anche molto bene Html Color Codes

Spero che questo tutorial ti sia utile per abbellire almeno un po' il tuo blog.
Se hai domande, o richieste, scrivile pure nei commenti.

potrebbe interessarti:

• Come inserire i codici CSS nell'HTML di Blogger
• Personalizzare l'icona dell'autore del blog nei commenti
• Creare e personalizzare la pagine 404 su Blogger

   Aiutami a crescere, condividi il mio post!
Grazie!