DIY - Personalizzare gli articoli

Buon pomeriggio!

Avete un blog e volete scrivere articoli graficamente più accattivanti? Oggi vi darò qualche piccolo consiglio per personalizzare i vostri articoli.

Non è mia intenzione entrare nello specifico del codice che vi mostrerò, vi illustrerò solo le parti più importanti.

Iniziamo subito con un esempio di articolo un pò particolare... CLICCATE QUI PER VEDERLO... ve lo ricordate?

Essenzialmente vedremo come dare un colore di sfondo diverso, un'immagine di sfondo e delle dimensioni specifiche all'articolo.

Iniziamo subito con il codice che poi vi spiegherò riga per riga:

<div style="width:350px; heght: 200px; margin:auto; background: #dd1e3e url() no-repeat top right; padding: 5px;">

...CONTENUTO DEL VOSTRO ARTICOLO...

</div>

Ed ora vediamo di capire quello che abbiamo scritto:

- <div>  </div> questi due TAG aprono e chiudono rispettivamente un div, ossia un contenitore che racchiuderà tutto il contenuto del vostro articolo. Il contenuto dell'articolo va scritto all'interno di questi due tag;

- style=" " questo TAG serve a dare uno stile al vostro contenitore. Con stile si intende un determinato aspetto grafico; all'interno di questo tag vengono dichiarati tutti i vari attributi che caratterizzeranno lo stile del div. Gli attributi vanno scritti come nome_attributo: valore;

- width:350px; height:200px; questi due TAG sono piuttosto intuitivi, indicano rispettivamente la larghezza e la lunghezza del vostro contenitore;

- margin:auto indica i margini del vostro div rispetto al suo contenitore. Impostando il valore auto il div verrà posizionato esattamente al centro rispetto al suo contenitore;

- background:#dd1e3e url(nome-immagine.jpg) no-repeat top right indica lo sfondo del vostro contenitore. In particolare il codice #dd1e3e indica il valore esadecimale del colore mentre url(...) indica la posizione dell'immagine che si vuole mettere come sfondo; no-repeat significa che l'immagine non va ripetuta nè in orizzontale nè verticale, top e left indicano che deve essere posta nella parte alta sinistra del contenitore;

- padding:5px indica che il contenuto del vostro div si distanzierà da tutti i bordi (alto, destro, basso, sinistro) del contenitore di 5px.

Se tutto è andato per il megio dovremmo avere una cosa simile:

Nel mio villaggio, dietro la Madonna
dell'acqua, presso a molti pii bisbigli,
sorgono sopra l'esile colonna verde
i miei gigli...