Pubblicato il 11/01/12e aggiornato il

Come aggiungere due colonne sopra o sotto l'area del post su Blogger

Ho già illustrato come dividere l'header in due parti e come dividere in tre o quattro parti l'area sotto l'header. In questo articolo vediamo come sia possibile aggiungere due colonne sopra l'area del post e due colonne sotto l'area del post. Dico subito che le colonne possono anche essere tre e che si possono aggiungere solo quelle sopra, solo quelle sotto o entrambe. Si può inoltre aggiungere per esempio tre colonne sotto l'area del post e due colonne sopra.

Per effettuare questa personalizzazione basta inserire degli elementi Aggiungi un gadget in quella zona del layout. Successivamente sarà facile inserire dei widget che possono essere del tipo HTML/Javascript oppure di altro genere. L'obiettivo è quello di creare un layout di questo tipo

 

layout-due-colonne-sopra-post-due-colonne-sotto

dove sono visibili due Aggiungi un gadget sopra a Post sul blog e due sotto tale area. Cliccandoci sopra si potranno inserire widget che si posizioneranno affiancati su due colonne rispettivamente sopra e sotto l'area del post. E' inutile che faccia esempi su come possa essere utilizzata questa personalizzazione perché ce ne sarebbero a dozzine. Dagli annunci pubblicitari ai widget degli ultimi articoli, dal gadget degli ultimi commenti a uno slideshow.

Bisogna andare su Modello > Backup/Ripristino e salvare il modello completo per un eventuale backup di sicurezza. Quindi si va sempre su Modello > Modifica HTML > Procedi e non si mette la spunta su espandi modelli widget. Si cerca tramite F3 o Ctrl+F questo blocco di codice

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Post sul blog' type='Blog'/>
</b:section>

Per inserire due colonne prima dell'area del post bisogna incollare subito sopra quest'altro codice

<div id='Widget1A' style='width: 47%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='widget-1a' preferred='yes' style='float:left;'/>
</div>
<div id='Widget1B' style='width: 47%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='widget-1b' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Invece per inserire due colonne sotto l'area del post si deve incollare subito sotto questo codice

<div id='Widget2A' style='width: 47%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='widget-2a' preferred='yes' style='float:left;'/>
</div>
<div id='Widget2B' style='width: 47%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='widget-2b' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

La percentuale della larghezza degli elementi pagina può anche essere posta diseguale (per esempio 35% e 63%). Ci si deve ricordare però che la somma deve essere strettamente inferiore a 100%. Nel caso in cui gli elementi non siano affiancati ma uno sotto all'altro occorre diminuire la somma delle percentuali.

Se si vogliono inserire tre colonne i codici precedenti possono essere così modificati

<div id='Widget2A' style='width: 31%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='widget-2a' preferred='yes' style='float:left;'/>
</div>
<div id='Widget2B' style='width: 31%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='widget-2b' preferred='yes' style='float:left;'/>
</div>
<div id='Widget2C' style='width: 31%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='widget-2c' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Avremo un risultato di questo genere

tre-colonne-parte-bassa-blog

Naturalmente si possono modificare i parametri delle percentuali e mettere tre colonne anche nella parte alta.





16 commenti :

  1. Ti volevo fare i miei complimenti, grazie ai tuoi articoli ho personalizzato il mio blog, ho aggiunto un sacco di cose...e se ci riesco io che ero una capra. Dico ero perché grazie alle tue spiegazioni semplici ed intuitive ora riesco a capire di codici Html, di espansione, di Seo, metatag, di aprire e chiudere codici ecc.
    Ho cliccato su "mi piace" di facebook, però non sò se è andato a buon fine perché sono col cellulare.

    RispondiElimina
  2. @francy
    Nel post vedo un 1 sul pulsante del Mi Piace ;)

    RispondiElimina
  3. Allora è il mio, perché prima era a zero :)
    Anzi sono andata a controllare nel mio face e risulta nella mia bacheca ;)

    RispondiElimina
  4. Quando provo a inserire il codice per creare le due colonne sopra all'area post, mi esce il messaggio: "è stata trovata più di una sezione con ID: widget-1a. Gli ID delle sezioni devono essere esclusivi." Ho provato a cambiare il numero e la lettera dopo le parole Widget, ma continua a comparire lo stesso messaggio.. Tra parentesi, avevo già diviso in due l'area sotto il post, magari è questo che crea problemi?
    Posso risolvere in qualche maniera?
    Grazie

    RispondiElimina
  5. Risolto, grazie!
    E' che cambiavo il numero e la lettera solo dopo il primo widget, ma non dopo il secondo. Ci arrivo tardi, ma ci arrivo ;)

    RispondiElimina
  6. Ciao Ernesto, una piccola segnalazione:
    il codice da cercare è"

    "

    Poi, prima di incollare il codice bisogna sostituire "true" con "false"

    Ciao e complimenti!

    RispondiElimina
  7. ciao, mi hanno consigliato di venire a curiosare qui per sistemare un po' di cose sul mio piccolo blog :D
    e appunto volevo provare a fare tre colonne sotto l'area post, per inserire i banner.
    Ho provato a cercare il codice che dici, ma non me lo trova :(
    mi potresti aiutare? ^_^
    grazie
    Sara

    RispondiElimina
    Risposte
    1. Leggiti questo post
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      @#

      Elimina
  8. Ho un problema:
    Nel mio template non esiste il codice "

    "

    ma è questo:






    Quindi non capisco dove inserire i codici per aggiungere due colonne sotto il post! Grazie

    RispondiElimina
    Risposte
    1. Il codice non si vede però immagino che sia quello indicato nel post. Devi andare prima su Layout e guardare che nome ha la Sezione dell'area del post che dovrebbe essere "main" ma potrebbe avere anche un altro nome se il tuo template è stato scaricato da internet. Ora cerca semplicemente il codice

      b:section class='main'

      Ci dovrebbe essere solo un blocco di codice con queste caratteristiche. Aggiungi i nuovi codici sopra e sotto come descritto nell'articolo
      @#

      Elimina
    2. La cosa strana è che sopra riesco a metterle le due colonne, mentre sotto no.

      Elimina
  9. quando lo metto sotto mi esce "Sections may not be nested: section widget-2a is contained within main"

    RispondiElimina
  10. Ciao e complimenti per il Blog, avrei una domanda nell'area dei post volevo poter dividere in due colonne i singoli post nella Home come questo sito facileveloce.blogspot.com ma non so come creare il codice. Puoi aiutarmi? Grazie, Chiara

    RispondiElimina
    Risposte
    1. Il proprietario del sito ha un template Simple e ha usato questo mio tutorial
      http://www.ideepercomputeredinternet.com/2014/02/homepage-blogger-personalizzata.html
      Se vai sul sorgente pagina (Ctrl+U) del sito che mi hai indicato potrai vedere il codice del post che ti ho linkato
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.