28 maggio 2013

Come dividere il testo di una pagina o di un post in 2, 3 o 4 colonne.

I giornali sono abituati da sempre a dividere i propri contenuti in colonne. Questa consuetudine risale ai tempi in cui i quotidiano assomigliavano a dei veri lenzuoli e quindi la suddivisione dei contenuti in colonne rispondeva a una precisa esigenza pratica. Questo tipo di impaginazione è rimasta anche dopo l'avvento del formato tabloid che ha rimpicciolito di molto la larghezza del classico foglio. Solo adesso con le edizioni online si va in qualche modo a ridimensionare l'utilizzo delle colonne.

Ci sono molti modelli anche di Blogger che si rifanno al layout dei giornali e che presentano soprattutto la homepage suddivisa in colonne. Vediamo come sia possibile suddividere tutto il testo di un articolo, di una pagina statica o anche solo una sua parte in due, tre o anche quattro colonne.

COME SUDDIVIDERE IL TESTO IN DUE COLONNE

In questo caso si va nell'Editor di Blogger in Modalità HTML e si incolla il seguente codice

<div style="float: left; text-align: justify; width: 47%;">
Testo da visualizzare nella prima colonna</div>
<div style="float: right; text-align: justify; width: 47%;">
Testo da visualizzare nella seconda colonna</div>
<div style="clear: both;">
</div>

Dove la percentuale del 47% può essere aumentata o diminuita per lasciare più o meno spazio tra le colonne. Il risultato sarà simile a questo

testo-diviso-due-colonne

COME SUDDIVIDERE IL TESTO IN TRE COLONNE

In quest'altro caso dobbiamo fare due divisioni. Poniamo di avere per semplicità un layout di 900 pixel. Nella prima divisione con i CSS creeremo una colonna da 285 pixel e una da 580 pixel. Successivamente divideremo in due quella da 580 pixel usando un codice simile a quello precedente. Avremo tre colonne di circa 285 pixel. Si va come sempre in Modalità HTML e si incolla un codice come il seguente

<style type="text/css">
#col1 {
width: 260px;
float: left;
text-align:justify;
}
#col2 {
width: 600px;
float: right;
text-align:justify;
margin: 0;
padding: 0;
}
</style>
<div id="col1">
Testo da visualizzare nella prima colonna.</div>
<div id="col2">
<div style="float: left; width: 47%;">
Testo da visualizzare nella seconda colonna.</div>
<div style="float: right; width: 47%;">
Testo da visualizzare nella terza colonna.</div>
<div style="clear: both;">
</div>
</div>

dove i valori delle larghezze e le percentuali di suddivisione della seconda e terza colonna devono essere calibrate in funzione del layout della pagina. Si otterrà un risultato come questo

testo-suddiviso-tre-colonne

COME SUDDIVIDERE IL TESTO IN QUATTRO COLONNE

Stavolta divideremo il layout in due parti con i CSS e ciascuna parte sarà a sua volta divisa in due con l'HTML. Nell'Editor di Blogger si dovrà incollare quindi questo codice

<style type="text/css">
#col11 {
width: 430px;
float: left;
text-align:justify;
}
#col21 {
width: 430px;
float: right;
text-align:justify;
margin: 0;
padding: 0;
}
</style>
<<div id="col11">
<div style="float: left; width: 47%;">
Testo della prima colonna.</div>
<div style="float: right; width: 47%;">
Testo della seconda colonna.</div>
<div style="clear: both;">
</div>
</div>
<div id="col21">
<div style="float: left; width: 47%;">
Testo della terza colonna.</div>
<div style="float: right; width: 47%;">
Testo della quarta colonna.</div>
<div style="clear: both;">
</div>
</div>

con le solite raccomandazioni riguardo alla personalizzazione dei parametri in rosso e blu. Il risultato sarà molto simile al seguente screenshot

post-diviso-quattro-colonne
Al posto di Testo della prima, seconda, terza e quarta colonna non è detto che ci debba essere solo semplice testo ma ci può anche essere formattazione che includa parole di diverso colore, famiglia di font, corsivo, grassetto e dimensione di carattere così come la presenza di collegamenti. In questo caso conviene creare prima il testo formattato con un qualsiasi Editor Wysiwyg quindi andare su HTML e copiare ciascuna parte di codice nella colonna in cui vogliamo che venga visualizzato. Concludo osservando che questo hack  funziona in tutte le piattaforme e in qualsiasi pagina web.



19 commenti :

  1. Una personalizzazione davvero utile. L'ho applicata in una pagina statica in cui avevo già tolto la sidebar e allargato l'area del post.

    Grazie per la guida. :)

    RispondiElimina
  2. Ciao Ernesto, ho sentito la voglia di fermarmi, solo per ringraziarti di tutti i consigli che ci dai, e per il prezioso tempo che ci dedichi... non è da tutti...
    Grazie di cuore!

    RispondiElimina
    Risposte
    1. @# Hai avuto un pensiero carino :)
      Grazie a te.

      Elimina
  3. scusa.. esiste un modo per togliere i post espandibili dal blog? (non voglio venga scritto "leggi tutto" ad ogni post...) penso di essermi incasinato.
    Saluti
    Grazie

    RispondiElimina
    Risposte
    1. @# Non sei obbligato a scrivere i post con il Read More. Basta che li pubblichi senza inserire l'intervallo che si mette pigiando sulla icona della pagina strappata. Se poi hai già un modello scaricato da internet in cui in homepage vengono mostrati solo gli incipit dei post per scelta allora il problema è diverso e ha come unica soluzione il cambio del template.

      Elimina
  4. cioa ernesto ti disturbo per sapere come mai da giorni vedo pochi articoli del mio blog tramite ricerca google..premetto che io nn ho cambiato impostazioni

    RispondiElimina
    Risposte
    1. @# Moltissimi webmaster vorrebbero conoscere l'algoritmo di Google ma nessuno sa come funziona. Più che i risultati di Google devi controllare le statistiche. Se mi dici che sono due o tre giorni che sono diminuite le visite forse sei stata colpita dal Penguin 2.0
      http://www.mattcutts.com/blog/penguin-2-0-rolled-out-today/
      http://www.ideepercomputeredinternet.com/2012/05/google-penguin-update-con-altre.html

      Elimina
    2. è in po' di piu' di tre giorni...cmq vedrò di migliorare le chiavi di ricerca

      Elimina
  5. Ciao Ernesto, grazie per i tuoi consigli sempre molto preziosi.
    Ho voluto provarla sul blog.... fantastica.
    Ciao

    RispondiElimina
    Risposte
    1. Sicuramente sono O.T. Non ricordo in quale post Ernesto,parlavi di ridurre i pixel delle foto fino a 500 per allegerire il caricamento,mi metti il link per piacere?Grazie.

      Elimina
    2. @# Non me lo ricordo. Ho scritto tanti di quei post. Per diminuire il peso delle foto ci sono questi tool
      http://www.ideepercomputeredinternet.com/2011/10/come-diminuire-il-peso-delle-immagini.html

      Elimina
    3. Meno male che non lo ricordi.Era proprio questo il post.Grazie mille!Una curiosità :perchè metti la chiocciolina e il cancelletto quando rispondi?Grazie ancora e buona serata!

      Elimina
    4. @# Sono dei segni che servono per una azione automatica innestata da IFTTT che è meglio non illustrare nel dettaglio per evitare abusi :))

      Elimina
  6. Post interessante, ma ho tentato di dividere i miei post in due colonne, come tu hai suggerito, ma non ha funzionato. Forse perché i post non sono in una pagina statica (devo ancora capire la differenza)? O forse perché il mio modello del blog non é "ufficiale" di Blogger? O sará perché non ho inserito il codice nel punto certo? Dov'é che sbaglio?

    RispondiElimina
    Risposte
    1. @# Non c'entra il modello. Deve funzionare. Quello su 3 o 4 colonne magari è più complesso ma quello su 2 colonne dovrebbe andare bene

      Elimina
  7. Secondo te in termini di velocità per mostrare due banner 468x60 sulla stessa riga orizzontale non in un semplice post ma in tutte le pagine del blog conviene usare il metodo che hai suggerito oppure il secondo metodo che stavo utilizzando sino ad ora che consiste nel racchiudere il secondo banner con un div ed associargli il seguente codice css che mi da' lo stesso risultato?:
    { position:absolute;
    left: 490px; top:0px;
    width: 148px; }

    RispondiElimina
    Risposte
    1. In ogni caso il browser li deve caricare quindi credo che non ci sia differenza
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.