Pubblicato il 13/06/09 - aggiornato il  | 40 commenti :

Come aggiungere tre nuove colonne nella parte bassa del modello di un blog su Blogger.

Nel momento in cui si inizia un blog, specialmente se è il primo, non si sta troppo a considerare il modello tanta è l’eccitazione di cominciare questa avventura. Successivamente ci si rende conto che un avere avuto un modello diverso ci avrebbe facilitato il compito.

I widget aumentano, gli annunci pubblicitari da inserire pure e lo spazio è sempre lo stesso. Cambiare il modello non è poi più tanto semplice perché a parte i problemi con i vari widget quando si varia la larghezza della zona in cui è situato l’articolo questo pone dei problemi con immagini e video che si sono già postati.

Questo tutorial è dedicato a coloro che hanno un modello semplice come il mio e che vogliono aumentare lo spazio di inserimento per i widget ma nello stesso tempo non vogliono cambiare template perché la ritengono un’operazione troppo complessa e dal risultato incerto.

Per aumentare lo spazio del blog vediamo come si possono aggiungere tre nuove colonne nella parte bassa del layout.

Premetto che ci sono due possibilità

  1. Si ha un modello in cui non è prevista la parte bassa del modello (Blogger Footer)
  2. Si ha un modello in cui invece è già presente il Blogger Footer

Per verificare la cosa basta andare su Personalizza > Layout > Elementi pagina e guardare come si presenta graficamente il template. Se è presente Aggiungi un gadget significa che esiste il Blogger Footer, se non è presente vuol dire che non c’è

 BLOGGER FOOTER

 

blogger_footer

Nel modello di questo blog il Blogger Footer non esisteva. Descriverò il procedimento in due passaggi mentre in un prossimo articolo mi occuperò di eventuali personalizzazioni. Prima di iniziare in ogni caso andare su Layout > Modifica HTML e scaricare il modello completo per ragioni di sicurezza.

Primo passoQuesto vale solo per i modelli che non hanno il blogger footer, quelli che ce l’hanno possono passare al Secondo passo.

Andare in Layout > Modifica HTML e cercare la seguente riga di codice (è un commento che indica la fine del modello vero e proprio)

</div></div> <!-- end outer-wrapper -–>

Per cercare la riga pigiare F3 oppure Ctrl+F. Dopo questa riga ci sono solo eventuali script per statistiche come Google Analytics oppure script aggiunti per funzionalità particolari come quello fatto qualche giorno fa per le emoticon animate nei commenti.

Inserire prima della riga il seguente codice

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

come mostrato nello screenshot 

codice

Salvare il modello e andare su Layout > Elementi pagina. Vedrete che nella parte finale sarà comparso un elemento Aggiungi un gadget

 aggiungi_un_gadget

Una colonna l’abbiamo quindi aggiunta Smile, adesso cerchiamo di moltiplicarla per tre!

Secondo passoColoro che non avevano la parte finale del modello e l’hanno aggiunta nel Primo passo ovviamente non hanno nessun widget in quella zona. Quelli che invece quella parte ce l’avevano già e hanno saltato il primo punto devono spostare eventuali widget che si trovano nella parte finale del modello. Basterà inserirli momentaneamente in una sidebar laterale per poi riposizionarli alla fine del processo di modifica del template.

Pigiando F3 o Ctrl+F cercare adesso la seguente riga di codice

]]></b:skin>

e immediatamente sopra inserire il seguente codice

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
.column1 {
padding: 0px 5px 3px 5px;
width: 30%;
float: left;
margin:3px;
text-align: left;
}
.column2 {
padding: 0px 5px 3px 5px;
width: 31%;
float: left;
margin:3px 3px 3px 5px;
text-align: left;
}
.column3 {
padding: 0px 5px 3px 5px;
width: 30%;
float: right;
margin:3px;
text-align: left;
}
.addwidget {
padding: 0 0 0 0;
}
#footer-columns ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
#footer-columns li {
margin:0;
padding-top:0;
padding-left:0;
padding-bottom:.25em;
padding-right:15px;
text-indent:-15px;
line-height:1.5em;
}
body#layout #footer-columns {
width: 100%;
margin-left: auto;
margin-right: auto;
}
body#layout .column1 {
width: 32%;
float: left;
}
body#layout .column2 {
width: 32%;
float: left;
}
body#layout .column3 {
width: 32%;
float: right;
}

come mostrato nel seguente screenshot

fogli_di_stile

Adesso, con lo stesso sistema, cercate quest’altra parte di codice

<b:section class='footer' id='footer'/>

quindi selezionatela, cancellatela e sostituitela con quest’altro codice

<div id='footer-columns'>
<div class='column1'>
<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column2'>
<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column3'>
<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<b:section class='footer' id='footer'/>

come evidenziato in quest’altro screenshot

add_widget

Salvate il modello. In linea di massima dovrebbe andar bene per quasi tutti i template. Occorrerà fare delle personalizzazioni per quanto riguarda la larghezza, i margini e altri particolari. Intanto andate su Layout > Elementi pagina e cominciate a spostare qualche widget nella parte bassa che avete appena creato.  

Per esempio fate un lavoro di questo tipo

image

e salvate nuovamente il modello. Ecco come si presenta la parte finale del mio blog dopo tutte queste operazioni

 blogger_footer

Per oggi basta così! Nei prossimi giorni penseremo alle personalizzazioni. Fonte |

Aggiornamento: Per la personalizzazione consulta questo articolo.



40 commenti :

  1. Ciao, ho appena scoperto il tuo blog. Complimenti, ci sono molte info davvero interessanti. Inserisco subito il tuo banner nella mia pagina scambio link, fammi sapere se 6 d'accordo.A presto.

    RispondiElimina
  2. @Peppe
    Non saprei in che modo aiutarti. Che il codice funziona lo vedi in questo blog. Forse essendo alle prime armi magari ha tralasciato qualche piccolo segno. Talvolta basta un apostrofo perché non funzioni.
    Se sei più specifico guardo cosa posso fare.
    Ciao

    RispondiElimina
  3. Parsifal32 forse il problema che ho con IE della visualizzazione della pagina potrebbe essere dovuto da un widget, come mi dicevi, ma forse anche dall'aggiunta che ho fatto di tre nuove colonne nella parte bassa del modello?
    Vorrei provare a cancellare queste 3 colonne in basso... sai come posso fare in modo che non provochi danni e cosa devo togliere di preciso nel codice html?
    Ciao!
    Grazie
    Francesco

    RispondiElimina
  4. @Striscia Notizia
    Non credo siano le tre colonne in basso. Comunque per inserirle avrai seguito un tutorial! Quindi se vuoi toglierle basta che tu riprenda lo stesso tutorial e faccia il percorso inverso, cioè se come ultima cosa è scritto di inserire un codice lo togli e così via. Prima di iniziare cmq ti consiglio sempre di salvare un modello completo

    RispondiElimina
  5. Ciao.
    Allora: la prima parte è ok... la seconda ho un piccolo problema: il codice che indichi:
    b:section class='footer' id='footer
    non è nel mio template... (non è originale). Dove devo inserire la seconda parte di codice?
    Ciao!!!!

    RispondiElimina
  6. @Benzene
    Per inserire il footer cerca la riga in cui sono presenti queste parole
    -- end outer-wrapper --
    Devi inserire il codice del footer al disopra. Prima di procedere ricordati sempre di salvare il template!!!

    RispondiElimina
  7. @Parsifal32
    Ciao. Non c'è nemmeno quello di codice...

    RispondiElimina
  8. @Benzene
    Nella parte finale del template ci sarà certamente /body. Se non hai aggiunto Analytics ancora sopra ci dovrebbe essere una riga con (/div)(/div) dove al posto dei segni di minore e maggiore ho messo le parentesi. Se quella riga c'è, prova ad aggiunge il codice al di sopra.
    Non hai il profilo disponibile se no davo un'occhiata. Ciao

    RispondiElimina
  9. @Parsifal32
    Ciao.
    Dunque ho provato ed ho inseito dove mi hai detto, ma ci sono dei piccoli problemi. Compare una linea tratteggiata in basso per tutta la lunghezza del template. Se entro nel layout, vedo i 3 nuovi campi, ma se ne forma un quarto lungo...
    Se posso, ti do l'indirizzo del blog e se riesci puoi darci un'occhio?
    Grazie infinite....
    http://benzene4ever.blogspot.com

    RispondiElimina
  10. veramente ottimo, grazie, devo dire che con i suggerimenti di blog come il tuo sto facendo notevoli passi avanti :)

    RispondiElimina
  11. Ciao Parsifal.
    Ho tentato di seguire le istrizioni del tuo tutorial per aggiungere le 3 colonne nel footer del mio blog ma nell'eseguire ultima parte, quando sostituisco il codice originale con quello che trovo nel post, mi trovo davanti a quest'errore: "Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto.
    Messaggio di errore XML: The element type "div" must be terminated by the matching end-tag ""
    Eppure il tag di chiusura "/div" sembra esserci....
    Mi puoi aiutare?!? ;-)

    RispondiElimina
  12. @zio71
    E' difficile dire che cosa c'è che non va. Forse è incompatibile il modello.
    Come tentativo prova ad aggiungere (/div), ovviamente con i segni di minore e maggiore alla fine del codice.
    Ma è solo un tentativo e salva il modello per un eventuale backup.
    Ciao

    RispondiElimina
  13. Ciao Parsifal.
    Ti ringrazio per la tua solerte risposta...
    Samanettando un pò sono riuscito a sistemare la cosa...
    Tutto era dovuto a delle righe di codice con il quale il/i creatore/i del templete aggiungevano un Piè di Pagina nel quale inserivano la loro "firma"...
    Eliminate quelle righe di codice, che ho notato non apparivano nella foto nel tuo post e di conseguenza ho ritenuto superflue, tutto ha funzionato per bene...
    Grazie mille
    ;-)

    RispondiElimina
  14. ciao parsifal32, sono riuscito ad inserire gli elementi come descritto, potresti aiutarmi ad inserire una colonna a sinistra dei post rstringendo le altre?
    Il blog è http://cervelliamo.blogspot.com

    RispondiElimina
  15. @giuseppe
    Non è cosa semplice. Per una personalizzazione di questo tipo forse ti potrebbe convenire di più cambiare modello :-)
    Ci sono comunque in rete un sacco di tutorial
    http://www.blogspottutorial.com/2008/07/tips-to-add-column-on-new-blogger.html
    http://www.bloggerbuster.com/2007/07/create-three-column-blogger-template.html
    http://www.bloggerbuster.com/2008/07/create-extra-columns-in-your-blogger.html
    Ciao e auguri...

    RispondiElimina
  16. Ciao, non riesco a visualizzare lapubblicità.
    Immetto il codice ma poi non si vede nulla.
    Non funziona solo per il codice adsense, mentre per l'HTML degli antipixel, si........
    Hai una soluzione?
    Grazie.

    RispondiElimina
  17. @tipinofino
    Intendi dire che il codice Adsense non si vede in una colonna che hai inserito? Se è così potrebbero volerci anche diverse ore se non giorni per poterlo visualizzare (dipende dal grado di indicizzazione del tuo blog). Adsense deve prima trovare le parole chiave dei tuoi post per associare degli annunci

    RispondiElimina
  18. Si, questo lo avevo intuito, ma gli altri annunci si vedono subito, invece quelli inseriti nel
    footer no.
    Le tre colonne le ho inserite con il tuo tutorial, che abbia sbagliato qualcosa?

    RispondiElimina
  19. @tipinofino
    Una cosa l'hai sbagliata. Dovevi leggere il Regolamento Adsense più attentamente. Non si possono inserire più di te annunci per pagina. Se ce ne sono più di tre non vengono visualizzati. Mi riferisco al secondo blog che si vede nella tua Bacheca.

    RispondiElimina
  20. a proposito...... ho aggiunto il tuo antipixel.
    Ciaoooooo.

    RispondiElimina
  21. @Ernesto T.
    cio ernesto volevo chiederti una cosa sul colore del titolo del widgeg.nella colonna di destra non so perchè ma non riesco a vedere il background nero così come c'è nelle altre colonne.ho anche seguito un tuo articolo dove spiegava di inserire un'ulteriore stringa sotto ogni colonna.ho fatto tutto bene ma è come se non la riconoscesse del tutto,visto che non riesco neanche a modificare il padding.l'unica cosa su cui ho potuto lavorare è stato float,che da right ha cambiato in left per avere un miglior allineamento

    RispondiElimina
  22. @TUTTI GLI SCANDALI DEL VATICANO Purtroppo non sono onnisciente e anche a me ogni tanto capitano delle cose che sembrano non abbiano spiegazioni.

    RispondiElimina
  23. @Ernesto T.

    si infatti!è un mondo complicato,è che alcuni template come il mio sono per wordpress e sono solo adottati per blogger,quindi non tutto funziona così facilmente occorre fare qualche modifica.ora ho una mezza idea,magari devo lavorare su qualche zona,forse ho sbagliato a cambaire float,o qualcos'altro.grazie comunque!

    RispondiElimina
  24. ciao parsifal
    volevo sapere se possibile mettere 3 collone in alto sopra i post nella sidebar
    ad esempio qualcosa in qui puoi mettere 3 cose differenti una dal altra
    grazie mille

    RispondiElimina
  25. @denny
    Non so se ho capito bene. Ti posto due URL, al di fuori di quello che vi è illustrato credo si possa fare poco più
    http://www.ideepercomputeredinternet.com/2011/05/come-dividere-in-tre-parti-l-sotto-l-di.html
    http://www.ideepercomputeredinternet.com/2011/05/dividere-la-sidebar-in-schede-per.html

    RispondiElimina
  26. ciao enresto!ancora una volta ti rinnovo la mia stima e il mio personale ringrazimento per il lavoro da te svolto quotidianamente.oramai sei un mio piccolo grande mito.La mia domanda è questa.Ho inserito le 3 colonne e al di sotto c'è il blogger footer.E' possibile aggiungere altre 3 colonne sotto questo blogger footer come visto in alcuni siti?ed è possibile aggiungere un blogger footer sopra le 3 colonne create?ci sto provando senza successo al momento,spero che tu ne abbia parlato e sarebbe bello se si potesse fare.cordiali saluti e vivi ringraziamenti,Alessio

    RispondiElimina
  27. @Tutti ...
    Se qualcuno lo ha fatto vuol dire che è possibile ma non me ne sono mai occupato. Si tratta di una cosa di una certa difficoltà e bisognerebbe studiarci sopra.

    RispondiElimina
  28. grazie della risposta!insierire uno o più blooger footer è possibile basta cambiare il nome aggiungendo ad es. 1-2 e posizionandolo sopra le tre colonne.magari con qualcosa del genere riesco a creare altre 3 colonne.sarebbe bello :) grazie lo stesso ernesto.ti auguro una buona giornata,massima stiama.sei un mito!

    RispondiElimina
  29. Non mi riusciva proprio sta cosa, ma grazie a te, il mio blog è andato a posto! :)
    Grazie mille! :)

    RispondiElimina
  30. Ciao Ernesto,
    eccomi di nuovo... allora ho seguito le tue indicazioni per il mio blog El Paladar Feliz, ma quando vado in modifica layout non si sono create tre colonne, ma tre spazi gadget lunghi tutta la dimensione del blog, uno sopra l'altro.
    In pratica il Blogger Footer che avevo prima ma quadruplicato!!

    Cosa posso fare??

    Grazie.

    RispondiElimina
  31. @La Fra
    Se guardi la data del post vedi che è più di due anni fa. Da allora ne è passata di acqua sotto i ponti :)
    Se vuoi inerire tre colonne nel footer ti consiglio di pensare a un template del Designer Modelli. Puoi decidere se e quante sidebar inserire, se metterle a destra a sinistra o da entrambe le parti e puoi scegliere il numero delle colonne del footer. Se questo tutorial con il tuo modello non funziona è proprio perché è stato sviluppato per quelli che allora erano i modelli standard di Blogger. Il tuo probabilmente invece è già personalizzato e non prende il codice in modo corretto.
    Ciao

    RispondiElimina
  32. Ciao sto rifacendo il mio template seguendo il tuo consiglio, quello di partire con un modello officiale blogger. il mio problema è che in questo modello non è presente la riga:


    come faccio?

    RispondiElimina
    Risposte
    1. quella del primo passo...

      blog: http://ps3gameita.blogspot.it/

      Elimina
    2. @Manager
      Se usi un modello ufficiale di Blogger ora non hai più bisogno di aggiungere tre colonne nella parte bassa. Si può scegliere il layout. Devi andare su Modello > Personalizza > Layout > Layout piè di pagina e selezionare se in basso vuoi una colonna, due colonne o tre colonne. E' il Designer modelli.

      Elimina
  33. Ottimo tutorial; avevo provato con altre guide ma senza riuscirci, con questo invece ce l'ho fatta!

    Grazie mille della guida :)

    RispondiElimina
  34. @# Forse ti può essere utile questo post
    http://www.ideepercomputeredinternet.com/2009/06/come-aggiungere-tre-nuove-colonne-nella.html
    Credo che tu voglia visualizzare un "Aggiungi un gadget" alla fine del blog largo quanto tutto il layout in modo da inserire un elemento pagina della stessa dimensione. Segui il post fino all'inserimento di quell'elemento. Si tratta di un articolo di circa 4 anni fa quindi da allora il codice è sicuramente cambiato ma il principio dovrebbe essere ancora valido.

    RispondiElimina
  35. Ciao, come posso aggiungere un elemento html sotto il titolo/intestazione se non è previsto dal modello? Grazie.

    RispondiElimina
    Risposte
    1. Prova a leggere questa guida
      http://www.ideepercomputeredinternet.com/2011/05/come-dividere-in-tre-parti-l-sotto-l-di.html
      Naturalmente la puoi modificare e adattare alle tue esigenze
      @#

      Elimina

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