Pubblicato il 09/10/14e aggiornato il

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 

stile-personalizzato

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

 
stili-blogger

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>

selezionare-testo-personalizzato

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.

stile-personale

Si pubblica il post e si otterrà questo risultato

stile-personalizzato-blogger

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>.




5 commenti :

  1. Utilissimo per me!!! Lo cercavo da molto tempo qst truchetto. Mi serve in alcuni articoli di recensioni di prodotti cosmetici per inquadrare gli INCi dei prodotti. Ovvero gli ingredienti da cui è composto.

    Molto interessante, grazie mille.
    Rosy

    RispondiElimina
    Risposte
    1. Credo che sia stata una battuta. Non riuscitissima :)
      @#

      Elimina
    2. ahahah mi sa di si!!! =) mi sono anche spaventata!!!

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.