Come creare una tabella online con HTML e CSS.

Gli Editor WYSIWYG ovvero What You See Is What You Get (ottieni quanto vedi in italiano) che sono disponibili per Blogger e per Wordpress non hanno dei bottoni per aggiungere una tabella ai post. La soluzione di usare Open Live Writer non è più facilmente praticabile perché non viene più mostrata l'anteprima della tabella in tale Editor rendendo difficile la sua realizzazione.

Molte tipologie di siti hanno spesso l'esigenza di pubblicare tabelle. Sono utili per schede tecniche di prodotti tecnologici ma anche per articoli di genere diversissimo. Una soluzione potrebbe essere quella di usare un Editor CSS gratuito come BlueGriffon che però dovrebbe essere installato nel computer.

Un'alternativa interessante è quella di usare strumenti online specifici per creare tabelle. In sostanza si impostano i parametri come il numero di righe, il numero di colonne, lo spazio tra le celle, il padding all'interno delle celle, la presenza o meno del bordo e il suo stile, la larghezza in pixel o in percentuale. Si digita il contenuto per poi ottenere il codice HTML da incollare nella pagina web in cui inserire la tabella.

Come rendere Responsive l'HTML di una tabella per visualizzarla correttamente anche da mobile.

Ho ricevuto un commento sulla personalizzazione nell'aspetto e nei colori di una tabella HTML che mi ha dato lo spunto per trovare una soluzione e rendere Responsive anche questo oggetto HTML. Quando di inseriscono dei valori fissi della larghezza i browser siano essi per il desktop o per il mobile non possono fare altro che mostrare l'oggetto con tale dimensione. Il risultato è che una tabella impostata con larghezza anche di solo 500 pixel uscirà fuori dalla larghezza del post se visualizzata con un cellulare.

Il trucco sarà quindi quello di non impostare mai valori assoluti di larghezza ma eventualmente solo valori percentuali. Possiamo per esempio creare una tabella di tre colonne con la prima che abbia una larghezza del 20%, la seconda del 30% e la terza del 50%. 

Come creare una tabella personalizzata con Open Live Writer.

Le tabelle sono oggetti HTML usati abitualmente nelle pagine web e nei blog. Sono un modo piuttosto semplice per organizzare i contenuti e per mostrarli in modo graficamente accattivante. Nel post precedente abbiamo visto quali siano i codici HTML e CSS da usare per creare e personalizzare una tabella.

In questo articolo invece vedremo come nello specifico si possa creare uno stile personale della tabella attraverso delle regole CSS, come incollare queste regole nel modello e come creare una tabella personalizzata con Open Live Writer senza dover digitare tutto il codice visto che OLW è un Editor WYSIWYG che supporta l'inserimento delle tabelle.

CREARE UNO STILE PERSONALIZZATO

Come creare una tabella personalizzata nei colori con il CSS.

Le tabelle sono uno tra gli oggetti HTML più conosciuti e utilizzati. L'uso di una tabella serve per allineare bottoni o immagini o anche per creare una galleria di foto. Le tabelle inoltre sono importanti per organizzare meglio i contenuti da mostrare nei post. In questo articolo vedremo come creare una tabella con il codice HTML e poi come personalizzarla con quello CSS.

Questo lavoro è importante anche per crearsi uno stile particolare da usare nel sito in modo da avere le tabelle tutte dello stesso aspetto e con gli stessi colori. Per rendere le cose più semplici e per un approccio migliore dal punto di vista didattico inizierò con il codice di base di una tabella per poi via via arricchirlo con nuovi attributi e impostazioni. Per mostrare le risultanze di ciascun codice userò il sito Real Time HTML Editor che mostra nella parte bassa del layout quello che riproduce il browser dal codice incollato nella parte alta.  

CODICE HTML DI UNA TABELLA

Come allineare due o più immagini in un post

Ho appena letto un commento in cui mi si chiede come si possano allineare due immagini in un articolo. Si tratta di una operazione molto semplice che però non mi ricordo di averla mai affrontato in un articolo specifico. Ho quindi ritenuto di fare un instant post su questo tema.

Il sistema più semplice per allineare le foto è quello di utilizzare il codice di una tabella di una riga e due colonne per allineare due immagini e di una riga con tre colonne per allineare tre immagini. Prima di procedere con il codice vanno comunque caricate le immagini su Picasa per poi ricavarne il link diretto. Come è noto le dimensioni delle immagini caricate su Picasa possono essere modificate operando direttamente sul loro indirizzo.

Il codice da usare per l'inserimento di una immagine è il seguente

<img src="URL_IMMAGINE" alt="Testo Alternativo" title="Tooltip immagine" />

Come creare una tabella in Blogger usando Microsoft Word.

L'Editor di Blogger è indubbiamente migliorato nel corso del tempo ma a tutt'oggi non sono ancora stati implementati degli strumenti in grado di creare una tabella. Chi mi segue da tempo sa che ho già pubblicato un tutorial in cui si utilizza Windows Live Writer per creare una tabella per poi pubblicarla in un post di Blogger. Lo stesso procedimento può anche essere usato per la creazione di una griglia di immagini da usare come Galleria di foto.

Con il sia pure eccellente programma per blogger della Microsoft non è però possibile creare una tabella anche solo un po' personalizzata. Nel caso fossimo particolarmente esigenti in quanto a layout o se volessimo confezionare un post di livello professionale possiamo usare Word di Office per creare la tabella per poi ricavarne il codice da incollare in un post o in una pagina statica di Blogger.

Tabella delle miniature degli Ultimi Articoli per Blogger.

Ho presentato moltissimi widget che mostrano gli Ultimi post pubblicati nel nostro sito su Blogger. Oltre a quello classico dell'elenco verticale ricordo il widget degli Ultimi Articoli con le Miniature, lo slideshow verticale e lo slideshow con Easy Slider.

Su questa stessa falsariga vado a illustrare un widget che presenta le miniature degli Ultimi post in una tabella. Ciascuna immagine è collegata all'articolo di riferimento e, passandoci sopra con il mouse, si visualizza un tooltip che mostra il titolo del post e la sua descrizione o il suo incipit.

Ci sono molte possibilità di personalizzazione riguardo al numero di miniature visualizzate e ai colori da usare. Visto che si tratta di un gadget piuttosto largo più che in una sidebar può essere inserito nel footer, sotto l'header o in una pagina statica.

Come inserire nel blog una tabella di testo, di immagini o di bottoni con l'HTML.

L'inserimento di una tabella in un post, in un widget o in una pagina statica risolve molti più problemi di quanto non si pensi. Se per esempio abbiamo installato due o più bottoni di condivisione alla fine del post è proprio attraverso l'utilizzo di una tabella che possiamo allinearli perfettamente.

Un discorso analogo si può fare per esempio se si vogliono allineare orizzontalmente o verticalmente due o più annunci pubblicitari. L'uso delle tabelle è particolarmente indicato quando si vogliono creare delle gallerie fotografiche in modo da mostrare le miniature delle immagini in modo geometrico. L'Editor di Blogger, anche nella sua versione più recente, non ha l'icona per l'inserimento e per la configurazione delle tabelle. Il metodo che consiglio è quello di usare Windows Live Writer per costruire la tabella, di andare quindi su Origine per copiare il codice per poi incollarlo in un widget o in una pagina statica.

La finestra di dialogo di Windows Live Writer per l'inserimento delle tabelle consente di configurare il numero delle righe, quello delle colonne, la larghezza della stessa tabella, lo spazio tra le singole celle e lo spazio all'interno delle stesse

Come inserire in Blogger un bottone di condivisione su FriendFeed.

FriendFeed è un servizio per la acquisizione di feed da blog o altra origine e per ripubblicarli su Twitter tramite dei tweet automatici. Qualche tempo fa fu acquistato da Facebook ma il suo sviluppo si è arrestato. Forse erano interessati più alla loro tecnologia che al loro modello di business. Sono iscritto su FriendFeed da diverso tempo ma confesso di aprirlo veramente poco. Oltre alla ripubblicazione automatica dei feed, su FriendFeed si sviluppano delle conversazioni tal volta molto interessanti che sono spesso riprese in molti post.
Specialmente in Italia la comunità di FriendFeed è molto attiva e ci sono diversi autori che si occupano di informatica, web design, web marketing o di internet in generale che lo usano come strumento di elezione per coltivare i propri contatti. Vediamo come fare, attraverso le API e i Tool messici a disposizione, a implementare un bottone di condivisione su FriendFeed all'interno di un blog sulla piattaforma Blogger. Ho preso in esame tre possibili opzioni.

Come installare i menù anche nei template del Designer Modelli.

Il Designer Modelli ha certamente introdotto delle funzionalità interessantissime per tutti gli utenti di Blogger. Ci sono state però anche alcune difficoltà soprattutto riguardo all'inserimento di menù che tuttora permangono. Il fatto è che molti di quei menù che funzionavano perfettamente con i vecchi modelli adesso non funzionano più con i nuovi template. Il malfunzionamento riguarda soprattutto l'apertura delle sotto-tabelle o delle voci secondarie se si vogliono chiamare così. La ragione è che questi template hanno stili predefiniti in grado di disabilitare qualsiasi menù che si aggiunga sotto l'intestazione del blog.

Vediamo come sia possibile risolvere questo problema in modo da rendere installabile la maggior parte dei vecchi menù che siamo abituati a utilizzare da molti mesi se non da anni. Prima di procedere con questa modifica è opportuno salvare il modello completo per un eventuale backup. Si va su Design > Modifica HTML e si cerca la riga seguente con F3 o con Ctrl+F (CMD+F per Mac)

Come pubblicare una pagina web con Google Documenti.

Ho già trattato l'eccellente servizio di Google Documenti per creare tutti i tipi di documenti online. Può essere un ottimo metodo per scrivere degli ebook lavorando online senza utilizzare Office di Microsoft o il gratuito OpenOffice. Tutti coloro che hanno un account GMail automaticamente possono accedere a Google Docs. Per avere ulteriori informazioni su questo servizio può essere utile leggere

1. Tutorial Google Docs -
2. Come caricare dei documenti su Google Documenti -
3. Visualizzare i documenti in una griglia su Google Docs -
4. Come inserire nel blog dei PDF con Google Docs -
5. Come estrarre del testo da un'immagine con Google Docs -
6. Come scrivere una lettera d'amore con Google Documenti -

Tabella interattiva in italiano dei codici dei colori per trovare più facilmente quello giusto.

Se avete un blog sarete certamente a conoscenza che ad ogni colore vengono associati dei numeri o delle lettere secondo quello che sono i codici dei colori. Si può trattare di una terna ordinata di numeri da 0 a 255 oppure di una serie di sei caratteri esadecimali. In quest'ultimo caso, il più usato, si può utilizzare anche solo una terna e i caratteri sono precedenti dal simbolo del cancelletto (#), quando vengono inseriti in un codice HTML, Javascript, ecc. Si usa la terna quando i caratteri sono ripetuti a coppie, per esempio #FF00FF si può anche scrivere #F0F.

Se siamo abituati a ragionare in termini di nomi di colori in italiano (ceruleo, rosa confetto, rosso papavero, indaco, terra d'ombra bruciata, verde bottiglia, ecc) ci troviamo certamente in difficoltà a trovarne il relativo codice RGB o HEX in esadecimali.

Ci viene in soccorso un sito molto interessante messo in rete da Libero che accosta la definizione italiana del colore al suo codice. Nella Tabella interattiva dei colori, oltre a acquisire il codice dei colori più comuni, cliccando sul pulsante relativo possiamo realmente visualizzarlo in tutto lo sfondo della pagina

I colori presenti sono 240 quindi sono rappresentati quelli più comuni. Nella parte bassa c'è anche un'interessante scala di grigi ordinati secondo la percentuale del nero presente. Nello screenshot ho cliccato sul colore senape. E' un tool interessante che sono sicuro in molti metteranno nei Preferiti.

Come rendere più difficile la copia delle immagini del blog.

In linea di massima non c’è cosa più facile che copiare un’immagine da un sito. Si clicca con il destro del mouse e si sceglie Copia Immagine o Salva immagine con nome a seconda se si vuole inserire negli Appunti o salvarla come file.

Le immagini che inseriamo nel nostro sito hanno in genere un codice HTML simile a questo

<a href=”http://parsifal32.blogspot.com”><img src="URL_immagine"/></a>

Per rendere più difficile la copia da parte dei lettori si possono utilizzare una moltitudine di metodi che sono indicati in questo interessante tutorial in lingua inglese.

Vengono elencati ben 10 metodi su come proteggersi dai furti di foto. Si va dalla protezione con un watermark a quello di disabilitare il tasto destro del mouse.

Si può anche scegliere di non farle indicizzare dai motori di ricerca o di inserirle come sfondo in una tabella.

 

L’immagine precedente l’ho inserita utilizzando questo codice

<table style="background-image: url(http://is.gd/2wlAz)" border="0" cellspacing="0" cellpadding="0" width="400" height="320"><tbody>
    <tr>
      <td valign="top" width="400"></td>
    </tr>
  </tbody></table>

dove l’URL scritto in rosso è l’indirizzo dell’immagine, mentre i numeri sono le sue dimensioni. Questo metodo è un po’ complicato e richiede del tempo e può essere usato solo per immagini cui si voglia dare una protezione particolare. Provate a cliccarci sopra, non succederà nulla! Provate adesso a cliccarci con il destro del mouse. Nel menù contestuale non sarà presente la voce Copia Immagine e neppure quella Salva Immagine con nome.

Fermo restando il fatto che potrebbe essere comunque copiata andando su Visualizza > Sorgente Pagina (con Firefox) e analizzando l’HTML. Credo però che la maggior parte di coloro che volessero farlo sarebbero dissuasi dalla non immediatezza dell’operazione.

La tavola periodica degli elementi di Mendeleev in versione web per gli studenti di Chimica.

La tavola periodica degli elementi che si deve all’intuizione del chimico russo Mendeleev è stata presentata nel 1869 e presentava parecchi spazi vuoti che sarebbero stati riempiti nel secolo successivo. Adesso siamo anche riusciti a produrre elementi non presenti in natura. Per la cronaca siamo già al numero 118 con l’Ununoctio scoperto da fisici russi in collaborazione con i laboratori americani di Livermore nel 2002.

Webelements presenta la classica tabella tabella in forma interattiva. Basta cliccare su un elemento per avere tutte le informazioni riguardo a numero atomico, peso atomico, nome del gruppo cui appartiene, colore, stato a temperatura ambiente, cenni storici e molto altro

Nella parte alta sono presenti dei bottoni che rimandano a dati specifici che riguardano tra l’altro i dati orbitali, la struttura cristallina, gli ioni, gli isotopi, l’entalpia, ecc.

Un sito veramente ben fatto che consiglio vivamente a tutti gli studenti delle superiori ma anche a livello universitario per quanto riguarda la chimica inorganica.

Ptable è un sito simile al precedente con alcune differenze in positivo ed in negativo

• Da meno notizie riguardo a ciascun elemento
• Però ha un’interfaccia in italiano
• E ha dei collegamenti con Wikipedia per approfondire le notizie su ogni singolo elemento

Come inserire due o tre annunci Adsense affiancati sotto il titolo dell’articolo in Blogger.

Nelle mie solite sperimentazioni sul posizionamento degli annunci Adsense avevo provato la soluzione di un insieme di annunci sotto l’header del blog. Non ho neppure aspettato il risultato di questo test che ne inizio già un altro che mi pare decisamente più promettente.

L’idea è quella di creare una tabella e di inserirci gli annunci di Adsense per visualizzarli affiancati. Questo sistema va decisamente bene per i blog con il Layout largo come questo ma può essere usato, con qualche accorgimento, da tutti i blog, ovviamente su Blogger.

Mettiamo dei punti fermi e dei riferimenti prima di iniziare la trattazione

1. Il modello di Blogger è in formato XML quindi il codice che si ottiene da Adsense deve essere modificato con lo strumento Parse
2. Si possono inserire un massimo di tre annunci per pagina quindi se ne inserite due o tre subito sotto il post è chiaro che eventualmente dovete toglierne altri che sono posizionati altrove
3. Il metodo per inserire la pubblicità di Adsense all’interno del post è trattato nell’articolo linkato e implica la differenziazione tra Homepage e singolo articolo
4. Considererò solo il caso del singolo post in quanto in Homepage si può anche fare a meno di inserire la pubblicità perché poco redditizia
5. Farò riferimento per i formati di unità pubblicitarie alle seguenti misure rettangolo grande 336x280, rettangolo medio 300x250, quadrato 250x250
6. Tratterò solo dell’inserimento degli annunci affiancati sotto il titolo del post. Per quanto riguarda l’annuncio alla fine del post oppure quello posizionato in un punto qualsiasi dell’articolo vi rimando ai precedenti link.
7. Oltre a questa tabella di due annunci in questo blog ho inserito anche un insieme di link - 

Andate su Layout > Modifica HTML e dopo aver salvato il modello completo cercate la seguente riga di codice pigiando su F3 o Ctrl+F

<div class='post-body entry-content'>

oppure la seguente se avete inserito gli articoli sintetici

<div class='post-body entry-content' expr:id='&quot;post-&quot; + data:post.id'>

In alcuni modelli non si riesce a trovare quella riga allora provate con questa

<div class='post-body'>

ed immediatamente sopra una di quelle righe inserite questo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
<table border="0" cellspacing="4" cellpadding="2" width="700"><tbody>
    <tr>
      <td valign="top" width="350">Codice Rettangolo 336x280 n°1 convertito con Parse</td>
      <td valign="top" width="350">Codice Rettangolo 336x280 n°2 convertito con Parse</td>
    </tr>
  </tbody></table>
</center>
</b:if>

Adesso è il momento di fare le consuete precisazioni e personalizzazioni

1. Occorre acquisire due codici di Adsense e darli due nomi diversi mediante quelli che si chiamano canali (ex criteri di monitoraggio) in modo da conoscere esattamente il rendimento di ciascuno
2. In sostanza è stata creata una tabella di una riga e due colonne
3. Le due righe in verde rappresentano la condizione che la pubblicità sia vista solo negli articoli e non in Homepage. Possono ovviamente essere tralasciate
4. I due tag “center” di colore viola servono per centrare la tabella dentro il post
5. Cellspacing è lo spazio tra le due colonne e può essere naturalmente modificato. Il numero 4 indica il numero di pixel
6. Cellpadding è invece lo spazio in pixel che si lascia all’interno di una singola cella
7. Width=”700” e Width=”350” sono rispettivamente la larghezza della tabella e quella di ogni singola cella.
8. Con le misure sono stato abbastanza largo ma volendo si possono azzerare tutti gli spazi e avere un codice di questo tipo

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
<table border="0" cellspacing="0" cellpadding="0" width="672"><tbody>
    <tr>
      <td valign="top" width="336">Rettangolo 336x280 n°1 convertito con Parse</td>
      <td valign="top" width="336">Rettangolo 336x280 n°2 convertito con Parse</td>
    </tr>
  </tbody></table>
</center>
</b:if>

che produce due annunci affiancati per un totale di 672 pixel quindi che possono entrare in molti modelli. Se si hanno blog con Layout più stretti possiamo comunque sfruttare ugualmente questo posizionamento della pubblicità che secondo la mappa termica di Adsense è la più redditizia

Basta scegliere due rettangoli medi invece che due rettangoli grandi ed allora il codice diventa

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
<table border="0" cellspacing="0" cellpadding="0" width="600"><tbody>
    <tr>
      <td valign="top" width="300">Rettangolo medio 300x250 n°1 convertito con Parse</td>
      <td valign="top" width="300">Rettangolo medio 300x250 n°2 convertito con Parse</td>
    </tr>
  </tbody></table>
</center>
</b:if>

con una larghezza di 600 pixel. Possiamo rimpicciolire ulteriormente la tabella selezionando due quadrati da 250 pixel ed inserire al di sopra della solita riga di codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
<table border="0" cellspacing="0" cellpadding="0" width="500"><tbody>
    <tr>
      <td valign="top" width="250">Quadrato 250x250 n°1 convertito con Parse</td>
      <td valign="top" width="250">Quadrato 250x250 n°2 convertito con Parse</td>
    </tr>
  </tbody></table>
</center>
</b:if>

Volendo possiamo anche andare oltre e inserire tutti e tre gli annunci di Adsense sotto il titolo del post in una tabella di una riga e tre colonne.

In questo caso il codice da inserire sarebbe il seguente

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
<table border="0" cellspacing="0" cellpadding="0" width="750"><tbody>
    <tr>
      <td valign="top" width="250">Codice Adsense 1</td>
      <td valign="top" width="250">Codice Adsense 2</td>
      <td valign="top" width="250">Codice Adsense 3</td>
    </tr>
  </tbody></table>
</center>
</b:if>

Si tratta di tre quadrati di 250 pixel ciascuno per una larghezza totale di 750 pixel. E’ chiaro che se si sceglie questa soluzione questi devono essere gli unici annunci Adsense presenti nel post.

Se si ha un layout più largo dei minimi 750 pixel richiesti possiamo allargare sia la tabella che le singole celle ed inserire spazi tra celle (cellspacing) e all’interno delle celle (cellpadding).

Share Tabs per mostrare una tabella di link dei nostri articoli.

Ho già parlato di servizi simili come LinkBunh e MultiURL forse Share Tabs ha qualcosa in più. Il sistema è più o meno lo stesso

1. Si inseriscono una serie di link nel modulo sottostante
2. Si inserisce una parola chiave aggiuntiva come personalizzazione (opzionale)
3. Si clicca su Tabify’em!

ed ecco che vengono forniti i due link (il normale ed il personalizzato) per la tabella di collegamenti generata

Se inserite quel collegamento nel blog, ci clicca sopra ecco quello che vede

• Alcuni articoli sull’iPhone di Idee per computer ed Internet - 

Le miniature delle anteprime delle pagine sono però un po’ lente ad essere visualizzate. Ci sono però i collegamenti a tutti i link immessi, la possibilità di aprirli tutti contemporaneamente e quella di copiarli negli appunti.

Google Squared permette di creare delle tabelle con i risultati delle ricerche.

Google Squared è l’ultimo ritrovato dei Labs di Google e consente di generare automaticamente delle tabelle a partire da delle parole chiave che lo consentano. Le parole devono essere almeno due per avere dei risultati soddisfacenti e se sono in inglese è anche meglio. Con le parole “scrittori italiani” non ho ottenuto nessun risultato. Ecco invece quello che ha prodotto italian writers

 

Nella prima pagina vengono mostrati sette risultati, andando in basso se si clicca su Add next 10 items si possono visualizzare i successivi.

Una cosa interessante è la ricerca di “Google Services” che genera un’interessante tabella di tutti i servizi di Google

Ne ho trovati sessanta. E’ una cosa carina non so quanto sia utile.

Inserire un blocco di testo in un rettangolo colorato con l'HTML.

In questo articolo ho dato dei consigli su come inserire un blocco di testo in un rettangolo sfruttando la funzionalità della Tabella in Windows Live Writer o, in subordine digitando il codice HTML direttamente. Mentre in quest'altro articolo ho parlato della rappresentazione dei colori "true colours" in esadecimali e come utilizzarla. Adesso cerchiamo di unire queste due conoscenze cercando di creare un riquadro all'esterno di un blocco di testo che si vuole evidenziare.

Se si ha WLW si inserisce la tabella con una sola riga ed una sola colonna quindi si passa alla visione HTML. Se invece non si ha si può scrivere in modalità HTML questo codice

<table width="542" align="center" bgcolor="#00ff00" border="0"><tbody>
<tr>
<td width="540" bgcolor="#ffffff">Inserimento del testo del riquadro</td>
</tr>
</tbody></table>

Dove i valori scritti in rosso possono essere modificati

• 542 è la larghezza del riquadro
• center è l'allineamento al centro ma possiamo mettere anche "left", "right", "justify" per sinistra, destra giustificato.
• 540 è la larghezza in pixel che si vuole utilizzare per scrivere il testo, ovviamente questo valore deve essere uguale o inferiore al primo



• bgcolor attributo di table è il colore del riquadro, si può impostare come abbiamo visto in questo post che ho già citato
• bgcolor attributo di td è il colore di sfondo del riquadro e può essere scelto come sopra
• In Inserimento del testo del riquadro si scrive quello che si vuole inserire all'interno

A titolo di esempio ho inserito nel codice precedente i seguenti attributi

<table width="600" align="center" bgcolor="#00ff00" border="0"><tbody>
<tr>
<td width="600" bgcolor="#ffff00">INSERIMENTO DEL TESTO</td>
</tr>
</tbody></table>

I colori sono il verde ed il giallo, decisamente brutti ma semplici, per far capire come fare questa operazione. Ecco il risultato finale

QUESTI TIPI DI RIQUADRI POSSONO ESSERE INSERITI IN ALCUNI POST NEI QUALI SI VUOLE PORRE PARTICOLARE ATTENZIONE SU UNA COSA SPECIFICA. POSSONO' ANCHE ESSERE ASSOCIATI AD UN LINK BASTA METTERE PRIMA DEL CODICE DEL RIQUADRO <a href="indirizzo del collegamento> E </a> ALLA FINE. IN QUESTO CASO HO MESSO UN COLLEGAMENTO AD UN ALTRO MIO BLOG DI VIDEO DAL TITOLO PHOTOS AND VIDEOS. IL TESTO PUO' ESSERE MODIFICATO ANCHE DOPO CHE SI E' INSERITO IL RIQUADRO E AUTOMATICAMENTE LE SUE DIMENSIONI IN ALTEZZA SI ADATTERANNO ALLA LUNGHEZZA DEL TESTO. NON PREOCCUPATEVI TROPPO DELLE DIMENSIONI PERCHE' CON IL MOUSE POSSONO ESSERE VARIATE COME E QUANDO SI VUOLE ANCHE IN UN SECONDO TEMPO.