BLOG PENNA CALAMAIO®

Tutta colpa di Theo....

Domani, dopo pranzo, vi spiegherò come realizzare anche voi un post con le tabelle.

Per ora, me ne vado a dormire

Aggiornamento del 23/04/2010 (ad un orario decente per scrivere un post!)

Ieri, quel brontolone di Theo, alias albatrho.s, mi ha chiesto se era possibile realizzare nei blog, dei post contenenti box verticali, da utilizzare ad es. per contenere delle didascalie rispetto alle immagini inserite nel post. In piena notte io l'ho accontentato ed ora vi spiego come poter realizzare anche voi qualcosa di simile. Questo post è costruito con la tecnica delle tabelle, ovvero un sistema col quale il linguaggio html racchiude i contenuti, all'interno di contenitori fissi, onde  evitare che essi si allunghino o si allarghino a seconda delle dimensioni della pagina web.
Nello spazio bianco a disposizione per scrivere il post io ho realizzato una tabella, ripartita in due righe. La prima riga a sua volta è divisa in tre colonne (quella del ciao a Theo, quella della mia foto, e quella a destra contenente un messaggio per Theo), mentre la seconda riga comprende solo una colonna e si estende per l'intera larghezza della tabella; è in sostanza la colonna nella quale dico a Theo di cominciare a studiare i codici del post.

Senonchè Theo, oltre ad essere un brontolone, è anche un allievo piuttosto svogliato ed infatti si è limitato a copiare il mio codice ed incollarlo nel suo blog, cambiando il testo all'interno delle colonne.
Potete farlo anche voi, ovviamente, anzi, il codice potete copiarlo da qui
tuttavia io voglio insegnarvi anche come poter modificare la tabella secondo i vostri desideri. Come fare? E' molto semplice, aprite in una finestra la pagina contenente il codice ed in una seconda finestra lasciate aperto questo post nel quale io vi scriverò il significato del codice.

Nella seconda riga la scritta height: 330px indica l'altezza complessiva della tabella. Se volete che essa sia più lunga scriverete ad es. 400 al posto di 330;
la scritta cellspacing="15" indica invece la larghezza dello spazio tra una colonna e l'altra. Potete notare infatti che tra le tre colonne verticali, è presente uno spazio bianco. Quello spazio è largo 15px. Volendo aumentare lo spazio vuoto scriverete dunque al posto di 15 ad es.25.

Osserviamo adesso la quinta riga del codice. 6px è lo spessore del bordo tratteggiato che racchiude la prima colonna. dashed è l'attributo che qualifica il bordo tratteggiato, mentre 3366ff è il colore del bordo. Quindi se volete ridurre il bordo dovrete ad es. scrivere 3 al posto di 6 oppure se volete cambiare il colore del bordo dovrete modificare il codice del colore.

Per quanto riguarda le caratteristiche di colore del testo potete modificarle direttamente nell'editor del blog, altrettanto dicesi per quanto concerne il contenuto del testo. Al posto di "Ciao Theo" potrete scrivere ad es. "brontolone" agendo normalmente nell'editor del blog.

E' invece importante che modifichiate l'indirizzo dell'immagine contenuta nella seconda colonna. Lo trovate nell'ottava riga del codice.

Per cambiare infine il colore di sfondo di ciascuna colonna, dovrete sostituire all'interno del codice la scritta e33475 (ogni volta che essa compare) con il codice del colore da voi desiderato.

Per il momento provate a copiare ed incollare il codice in un vostro post di prova, ricordandovi di inserire l'indirizzo della vostra immagine. Poi con calma provate ad effettuare dei cambiamenti. Ricordatevi inoltre che i codici vanno inseriti sempre visualizzando l'editor del blog in modalità html.
Se avete altre domande da farmi sul codice, scrivetemele nei commenti e pian piano io cercherò di rispondervi.

Come sempre vi ricordo che i codici dei vari colori utilizzabili li trovate qui ma, se avete già installato la Blog Penna Calamaio Toolbar, la pagina con tutti i codici/colore è sempre a vostra disposizione nel sottomenu utility del menu di navigazione dedicato al portale Libero.it

Buon lavoro.