29/12/2010

Come personalizzare i titoli degli articoli

In questo articolo vi mostriamo come personalizzare i titoli dei post, come hanno già fatto alcuni amici di MyBlog.it:

titoli-myblog.jpg


Quello che dovete modificare è l’elemento “.content h3” all’interno del Foglio di stile.
Quindi, andate nella sezione “Presentazione > Opzioni avanzate” e cliccate sul link “Modifica modello” del Foglio di stile.

Nella colonna destra scrivete:

  .content h3 {
}



All’interno delle parentesi graffe dovete inserire i valori da attribuire all’elemento. Come esempio vediamo alcuni dei parametri utili a gestire e personalizzare la grafica dei titoli degli articoli.

margin: 0px 0px 0px 0px;
definisce lo spazio che deve esserci tra l’elemento titolo e gli elementi che lo circondano, rispettivamente sopra, a destra, sotto e a sinistra.

padding: 5px 10px 5px 10px;
definisce lo spazio che deve esserci tra il bordo del titolo e il parametro margin, rispettivamente sopra, a destra, sotto e a sinistra.

font-size: 12px;
definisce la dimensione che deve avere il testo.

font-weight: bold;
associa l’effetto grassetto al testo. E’ possibile sostituire l’effetto bold con altri valori come normal, bolder, lighter, inherit oppure valori da 100 a 900 (es. 100, 200, 300…).

line-height: 150%;
definisce lo spazio che deve esserci tra una riga di testo e l’altra.

color: #FFF;
definisce il colore che deve avere il testo. E’ possibile sostituire i valori esadecimale (es. #FFF = bianco) con i nomi inglesi dei colori. Es. color: red; per avere un testo rosso, oppure blue e così via.

background: #4c4c4c;
definisce il colore di sfondo che devono avere i titoli.

background-image:url("http://indirizzo_immagine.jpg");
background-repeat:no-repeat;

definisce, se lo si desidera, l’immagine da utilizzare come sfondo ai titoli.


Il risultato finale che dovrete avere nella colonna destra del Foglio di stile è il seguente:

  .content h3 {
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
font-size: 12px
font-weight: bold;
line-height: 150%;
color:#FFF;
background-image:url("http://indirizzo_immagine.jpg ");
background-repeat:no-repeat;
}

 

10:49 Scritto da: myblog.it in Blog - Tips and Tricks | Link permanente | Commenti (1) | Trackback (0) | Segnala | Tag: tutorial, titolo, articolo | OKNOtizie | |  del.icio.us | | Digg! Digg |  Facebook

06/05/2007

Il post. Cos'è?

Cos'è un post? Post letteralmente significa 'comunicazione', 'corrispondenza'. Nel gergo dei blogger - e in più in generale di Internet - non è altro che un articolo, un contenuto che tu pubblichi sul tuo blog. Quello che stai leggendo in questo momento è, per esempio, un post. Più semplice del previsto!

20:53 Scritto da: myblog.it in Blog - Tips and Tricks | Link permanente | Commenti (6) | Segnala | Tag: blog, myblog.it, post, articolo, posting | OKNOtizie | |  del.icio.us | | Digg! Digg |  Facebook