Come creare uno stile personale con i CSS su Blogger.

Come creare uno o più stili personalizzati con il CSS per evidenziare paragrafi o diversificare contenuti dei post senza bisogno di usare il codice di volta in volta ma incollandolo una volta per tutte nel modello.

Usando il Designer Modelli gli utenti di Blogger possono configurare diversi aspetti del loro blog come il colore del testo, le dimensioni dei caratteri, la famiglia di font di quello che sarà il corpo del post. Allo stesso modo si può anche intervenire sui parametri del Titolo, della Data e dello sfondo. 

Nel confezionamento degli articoli però ci potrebbero essere delle esigenze specifiche per evidenziare delle sezioni particolari. Penso per esempio all'elenco degli ingredienti nei blog di cucina o alla scheda tecnica di prodotti nei blog di tecnologia. In effetti anche su Blogger si può usare la citazione per diversificare determinati paragrafi. Si possono anche personalizzare le citazioni (o blockquote) e addirittura adattarle ai blog con contenuti letterari.

 

In questo articolo partiamo da un punto di vista generale di chi voglia crearsi uno o più stili personali. Si può usare BlueGriffon per crearsi gli stili ma gli utenti meno esperti possono anche procedere in un modo più semplice. Innanzitutto ci vuole almeno una infarinatura di linguaggio HTML e CSS e a tale scopo si può scaricare il mio ebook gratuito Guida all'HTML e al CSS.

Come base per la creazione del vostro stile personalizzato considerate questo codice

<style type="text/css">
.miostile1 { 
  width: 520px;
  text-align: justify; 
  color: #600;
  line-height:1.3;
  margin:auto;
  font-family:georgia;
  border-style: solid;
  border-width:1px;
  border-color:#000;
  font-size: 14px;
  padding: 6px;
  color:#206724;
  background-color:#f4f9bf;
}
</style>  
<div class="miostile1">Testo dello stile personalizzato.</div>

dove al posto di Testo dello stile personalizzato potete usare il Lorem Ipsum. Incollate il codice così com'è nella parte alta della pagina Real-Time HTML Editor. Ne visualizzerete il risultato 

Potete modificare i parametri o aggiungere altre righe per creare lo stile che più vi aggrada. Tra le altre cose si può aggiungere il grassetto o il corsivo o entrambi. Si può anche optare per uno sfondo formato da una immagine come nel caso della personalizzazione dei codici postati nel blog. Vi consiglio di dare uno sguardo anche al post sui codici dei colori e a quello sullo stile dei bordi. I parametri riguardano:

1. Larghezza del contenitore (width: 520px;)
2. Giustificazione del testo (text-align: justify;)
3. Colore del testo (color: #600;)
4. Altezza della riga (line-height:1.3;)
5. Elemento centrato nel layout (margin:auto;)
6. Famiglia dei caratteri (font-family:georgia;)
7. Stile del bordo (  border-style: solid;)
8. Spessore del bordo (border-width:1px;)
9. Colore del bordo (border-color:#000;)
10. Dimensione dei caratteri (font-size: 14px;)
11. Distanza del testo dal bordo (padding: 6px;)
12. Colore del testo (color:#206724;)
13. Colore di sfondo (background-color:#f4f9bf;)

Usando lo strumento online Real Time Editor potete modificare i parametri e visualizzarne contestualmente il risultato. Dopo che avrete creato il vostro stile è necessario inserirlo nel modello. Prendendo a esempio il codice che ho appena postato, dopo aver salvato il template, andate su Modello > Modifica HTML e intorno alla 14-esima riga sarà visibile l'inizio degli stili

 

Si clicca sulla freccetta nera a sinistra di <b:skin> per visualizzare tutto il codice. Si scorre tutto fino a trovare la riga finale ]]></b:skin> eventualmente aiutandoci anche con Ctrl+F. Subito sopra a tale riga si incolla lo stile che abbiamo creato simile cioè il codice seguente 

.miostile1 { 
  width: 520px;
  text-align: justify; 
  color: #600;
  line-height:1.3;
  margin:auto;
  font-family:georgia;  border-style: solid;  border-width:1px;
  border-color:#000;
  font-size: 14px;
  padding: 6px;  color:#206724;  background-color:#f4f9bf;
}

che è quello che si trova tra <style type="text/css"> e </style> . Si salva il modello. 

Quando si vuole applicare questo stile personalizzato a un paragrafo dovremo andare nell'Editor di Blogger. Si clicca su HTML e bisognerà inserire all'inizio e alla fine i due tag <p> e </p>

Per applicare lo stile personale dovremo adesso sostituire il primo tag <p> con
<p class="miostile1">
o miostile2, miostile3 a seconda di quale stile scegliete se ne avete creati più di uno.



Si pubblica il post e si otterrà questo risultato

Con uno stile personalizzato non occorrerà incollare i tag per colori, sfondi, font e altri parametri ma basterà aggiungere class="miostile1" al tag <p> o al tag <div>. Se abbiamo creato uno stile personalizzato per le Intestazioni allora la classe sarà aggiunta ai tag <h2> o <h3> o <h4>.