Come personalizzare le citazioni o blockquote di Blogger


Alcuni non sanno neanche cosa sono, altri sanno cosa sono ma non sanno esattamente a cosa servono. Sto parlando delle citazioni o in inglese blockquote presenti su Blogger. In sostanza sono dei modi per evidenziare un testo, ad esempio per riportare una frase celebre di un poeta o un personaggio famoso oppure per riportare un testo breve di altri siti nel web.
Questo bottone che è costituito da due virgolette lo si può trovare quando si sta per scrivere un post su Blogger. Se scrivete un testo, poi lo selezionate e cliccate sul bottone delle citazioni, nella parte HTML il codice si presenterà nel modo seguente:

<blockquote>Testo della citazione</blockquote>

Se usate i temi classici che vi sono stati messi a disposizione su Blogger le citazioni non sono molto evidenti e la parte di testo inserita come citazione sarà più accentrata rispetto al testo scritto normalmente nel post. A me questa cosa non piace e credo anche a molti altri e così ho cercato sul web come risolvere questo inconveniente ed ho trovato un metodo semplice per personalizzare il formato delle citazioni.

Ecco come si presenta la citazione una volta eseguito questo passaggio:

Andate su Modello > Modifica HTML e cercate questa stringa di codice ]]></b:skin> ed appena prima della parentesi quadra inserite questo codice CSS.

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;
}

La tabella che vedrete sarà di colore verde scuro nei bordi e verde chiaro nello sfondo interno. Ovviamente come ogni CSS potrà essere modificato a proprio piacimento, anche perché questi colori non sono il massimo del design e potrebbero essere molto discordi con il resto della grafica del vostro blog. Eccovi la spiegazione di come personalizzare il CSS:

margin: 15px 25px 15px 25px; = sono le distanze della citazione.
padding: 8px; = è la distanza tra testo è 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: #eeffff; = è il colore dello sfondo interno della citazione.
border: 1px solid #008250; = indica lo spessore e il colore del bordo della citazione.


Nessun commento :

Scrivi un commento

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".