Pubblicato il 13/05/11e aggiornato il

Come dividere in tre parti l'area sotto l'header di Blogger.

Dopo aver visto come dividere l'intestazione dei blog su Blogger in due parti, illustro come personalizzare ulteriormente quella zona del template. Se si va su Design > Elementi pagina si vedrà un layout che è simile a questo


area sotto l'intestazione

In genere in questa zona si inserisce un menù orizzontale ma ci potrebbe essere l'esigenza di aggiungere altri widget. L'idea è quella di dividere il layout in tre parti per poter inserire altri oggetti. Potrebbero essere per esempio uno slideshow, il widget di benvenuto e quello dei Post più popolari. Andiamo su Design > Modifica HTML e salviamo il modello completo per un eventuale backup di ripristino. Non espandiamo i modelli widget. Se avete un nuovo modello cercate questo codice
<div class='region-inner tabs-inner'>
     <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
     <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
   </div>
Se invece avete un vecchio template, che non è stato creato con il Designer Modelli, potete cercare delle righe simili a queste
<div id='crosscol-wrapper' style='text-align:center'>
   . . . . . . . . . . .
</div>
Eliminate tali codici e sostituiteli con quest'altro
<div class='region-inner tabs-inner' id='crosscol-wrapper' style='text-align:center'>
<div id='crosscol0' style='text-align: center; padding: 3px;'>
<b:section class='tabs' id='crosscol-superiore' preferred='yes'/>
</div>
<div id='crosscol1' style='width: 32%; float: left; margin:0; padding: 3px;'>
<b:section class='tabs' id='cross1' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol2' style='width: 32%; float: left; margin:0; padding: 3px;'>
<b:section class='tabs' id='cross2' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol3' style='width: 32%; float: right; margin:0; padding: 3px;'>
<b:section class='tabs' id='cross3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
Salvate il modello.I dati in rosso che rappresentano le percentuali delle singole sezioni che possono essere modificate ricordando che la loro somma deve ovviamente essere strettamente inferiore a 100%. Lo si può fare anche con il padding che rappresenta il margine interno alla sezione nelle quattro direzioni. Se adesso andate in Design > Elementi pagina, vedrete un layout come questo
layout di blogger diviso in tre parti
dove, oltre alle normali aree del post e della sidebar, saranno presenti tre Aggiungi un gadget subito sotto l'intestazione. Si possono aggiungere per esempio un video, e due immagini o qualsiasi altro oggetto HTML
tre oggetti sotto l'intestazione di blogger
come può essere osservato in questo post di demo. Si possono anche inserire quattro sezioni (non ho testato). In questo caso il codice sarebbe
<div class='region-inner tabs-inner' id='crosscol-wrapper' style='text-align:center'>
<div id='crosscol0' style='text-align: center; padding: 3px;'>
<b:section class='tabs' id='crosscol-superiore' preferred='yes'/>
</div>
<div id='crosscol1' style='width: 24%; float: left; margin:0; padding: 3px;'>
<b:section class='tabs' id='cross1' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol2' style='width: 24%; float: left; margin:0; padding: 3px;'>
<b:section class='tabs' id='cross2' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol3' style='width: 24%; float: right; margin:0; padding: 3px;'>
<b:section class='tabs' id='cross3' preferred='yes' style='float:right;'/>
</div>
<div id='crosscol4' style='width: 24%; float: right; margin:0; padding: 3px;'>
<b:section class='tabs' id='cross3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
in cui si possono fare le stesse personalizzazioni viste in precedenza. Se gli oggetti inseriti non si visualizzano tutti alla stessa altezza, si può usare l'attributo margin-top per calibrare il tutto. Per una immagine lo stile da applicare è
<img style="margin-top:-0px;" src="URL IMMAGINE" />
dove margin-top può prendere sia valori positivi che negativi.




41 commenti :

  1. Funziona perfettamente, anche con un menu (io ho il mattblack, installato seguendo la tua guida).
    Però non si vedono i titoli dei gadget. Si può fare qualcosa?

    RispondiElimina
  2. @Christian
    In alcuni modelli, gli ultimi specialmente, i titoli dei widget inseriti nella parte del layout sopra e sotto il post non si vedono. Credo sia una scelta di Blogger, se mi viene in mente qualcosa...

    RispondiElimina
    Risposte
    1. Non so se hai già trovato una soluzione o se il mio sitema è un semplice colpo di fortuna, ma... per visualizzare il titolo del gadget nell'area sotto l'header mi è bastato andare in modello > personalizza > avanzato > css e scrivere

      nome del gadget h2 {display:inline}

      es.

      #HTML1 h2{display:inline; text-align:center} per centrarlo nella pagina.

      Elimina
    2. @BastetLaDeaGatta
      Hai trovato un sistema tutt'altro che banale perché in quell'area i titoli dei widget non si vedono. Potrei farci un post nel caso ovviamente ti citerei.

      Elimina
    3. Oh... figurati! Sono felice di esserti stata utile. :)

      Elimina
  3. Ho risolto in modo "creativo": dai un'occhiata: http://psicologiaxtutti.blogspot.com

    PS. Ho notato che se metto dei gadget testuali (slideshow ultimi post, post più popolari, feed rss etc.) il gadget assume le caratteristiche grafiche delle schede: non si può fare in modo che al di sotto delle schede/del menu il css sia quello del main o della sidebar?

    RispondiElimina
  4. Si può fare tutto. Vedo che hai parlato di main e sidebar quindi il punto è proprio quello di andare nel modello e cambiare i parametri per renderli uguali. Comunque è cosa che va sempre fatta con grande attenzione

    RispondiElimina
  5. Ciao Ernesto,volevo chiederti se era possibile creare l Homepage del mio blog come quello del sito coolclub.it(è meglio che lo vai a vedere perchè non so spiegartelo)per poter avere nella home tutte le categorie...ciao e grazie

    RispondiElimina
  6. Ciao Ernesto,io vorrei dividere l'area in tre parti ma il codice che trovo nell'html è un pò diveso perchè qualche tempo fa l'ho modificato per togliere il testo sotto l'header quando non si è nell'home page...(non ricordo come si chiama il titolo del post in questione)
    come devo fare?

    RispondiElimina
  7. @Petra
    dovrebbe esserci. Forse hai messo la spunta a espandi modelli widget. Se poi c'è qualche differenza con gli yes o i no non fa niente.

    RispondiElimina
  8. Fatto,grazie...
    Dimenticavo...volevo condividere con te la mia felicità nell'aver raggiunto oggi,15 Giugno 2011 le 1366 visualizzazioni di pagina...il merito è anche tuo...Grazie
    (so che per te sono pochissime,ma per me è un bel traguardo,spero di continuare così...Io ,tu e blognotesalento :))))

    RispondiElimina
  9. @Petra
    guarda che è un bel traguardo. Non credere che io ne abbia molte di più.

    RispondiElimina
  10. salve ernesto...ho "attivato" la possibilità di mettere un widget sopra l'header..mi chiedevo se fosse possibile ora dividere l'area sopra l'header in due parti in modo da mettere due widget affiancati sopra l'header...Grazie!

    RispondiElimina
  11. @Mario Alan
    Prova questo
    http://www.ideepercomputeredinternet.com/2011/05/come-dividere-l-di-blogger-in-due-parti.html

    RispondiElimina
  12. quello che mi hai consigliato lo avevo letto, ma seguendo le istruzioni mi divide anche l'intestazione il due parti...e a me serve solo avere praticamente due "aggiungi gadget" uno accanto all'altro sopra l'intestazione (che deve rimanere larga quanto il blog)...spero di essermi spiegato meglio...c'è un modo per farlo?

    ps
    servirebbe una cosa del tipo "Come dividere in due parti l'area sopra l'header di Blogger." per intenderci..

    RispondiElimina
  13. @Mario Alan
    Non ho mai pubblicato nulla del genere anche se si potrebbe provare con il sistema che ti ho indicato nel precedente commento cambiando i nomi.

    RispondiElimina
  14. cambiando i nomi in che senso? mi faresti un esempio per portarmi sulla strada giusta così poi faccio tutte le prove del caso?!...grazie ancora per la disponibilità..

    RispondiElimina
  15. @Mario Alan
    Per esempio
    'crosscol1-wrapper'
    invece di
    'crosscol-wrapper'

    RispondiElimina
  16. nel sistema che mi hai indicato (http://www.ideepercomputeredinternet.com/2011/05/come-dividere-l-di-blogger-in-due-parti.html) non c'è nessun 'crosscol-wrapper'...a quale sistema ti riferisci?

    RispondiElimina
  17. A questo articolo. Nel senso che si potrebbe provare a raddoppiare il codice con un altro nome.

    RispondiElimina
  18. @Mario Alan
    Ho cercato di darti una idea ma non ho detto che avrei realizzato il tutorial. Forse è anche al di sopra delle mie capacità. Intendo che visto che c'è un codice per l'intestazione, se ne può mettere un altro con un nome diverso. Non ho però idea se possa funzionare o meno. OK?

    RispondiElimina
  19. chiedo venia...non pretendevo una soluzione dettagliata...ma solo una qualche idea in più...con la tua risposta posso dedurre che il codice duplicato vada messo sicuramente in un'altra posizione rispetto a quella descritta in questo articolo...è già una cosa...grazie!

    RispondiElimina
  20. ho risolto.
    questa è la soluzione:
    http://alan-ritterm9f.googlecode.com/files/Dividere%20area%20sopra%20header%20in%20due%20parti.pdf
    mi sono servito della tua grafica per spiegare meglio cosa ho fatto...se vuoi puoi pure crearci un post. Magar prima puoi testarlo. buona giornata.

    RispondiElimina
  21. @Mario Alan
    E' stato più semplice del previsto allora :)

    RispondiElimina
  22. Ti seguo da qualche settimana. Hai contribuito a rendere il mio blog migliore. Sono ancora all'età della pietra... :)
    Anche questo tutorial ha funzionato. Adesso vediamo quale widget mettere che stia bene. Grazie!!
    Tamerice
    http://permillecammelli.blogspot.com/

    RispondiElimina
  23. ciao, funziona alla perferzione, però se poi aggiungo il menù orizzontale il risultato è questo:
    http://testpaoloditta.blogspot.com/

    si vedono i lati in alto e in basso del tasto "HOME" etc..

    per evitare che si vedano devo modificare questa parte di codice giusto?

    .basictab{
    padding: 3px 0;
    margin-left: 0;
    font: bold 14px Arial;
    border-bottom: 1px solid gray;
    list-style-type: none;
    text-align: left; /*set to left, center, or right to align the menu as desired*/
    }

    .basictab li{
    display: inline;
    margin: 0;
    }

    .basictab li a{
    text-decoration: none;
    padding: 3px 7px;
    margin-right: 3px;
    border: 1px solid gray;
    border-bottom: none;
    background-color: #ffffff;
    color: #191919;
    }

    così facendo si dovrebbero vedere solo i lati che separano i vari tasti |HOME|Chi siamo| in questa maniera.

    attedno una tua risposta ;)
    grazie come sempre

    RispondiElimina
  24. @Ditta ...
    A me sembra ottimo dal punto di vista estetico. Comunque se non ti piacciono i bordi prova a togliere questa riga
    border-bottom: 1px solid gray;
    o quest'altra
    border: 1px solid gray;
    o tutte e due

    RispondiElimina
  25. Ciao!
    Grazie mille, avevo un problema con il menù delle pagine, e grazie a questo post sono riuscita risolvere in modo creativo, dividendolo in ben 5 parti! :D
    ecco il risultato:
    http://porcellinogiramondo.blogspot.com/

    RispondiElimina
  26. Ernesto buongiorno... è possibile dividere in più parti l'area sotto il post... non il footer... ma quello spazio widget che è sotto i post...

    RispondiElimina
  27. @Soffio di Dea
    Immagino che sia possibile. Ci vuole però parecchia fantasia. Bisognerebbe trovare un nome qualsiasi per la sezione che si va a creare e metterla non alla fine ma prima della sezione del footer. Si può seguire questo post
    http://www.ideepercomputeredinternet.com/2009/06/come-aggiungere-tre-nuove-colonne-nella.html
    però mettendo come id id='footer' prenderebbe l'aspetto del piè di pagina. Insomma un lavorone ...

    RispondiElimina
  28. Ciao Ernesto,
    ho un piccolo problema: all'interno della porzione di codice da sostituire di cui parli all'inizio del post io ho un widget html, nello specifico quello del MattBlack menù; infatti quando cancello il pezzo di codice e inserisco quello nuovo, mi viene chiesto se voglio mantenere il widget in questione, e io rispondo sì. Però credo che questo vada a sfasare un po' la posizione dei tre nuovi spazi creati: infatti, quando salvo e visualizzo trovo la barra menù spostata, e uno dei tre nuovi spazi più in basso rispetto agli altri due; inoltre, se provo a inserire dei gadget nei nuovi spazi creati, risultano appiccicati alla barra menù, mentre sotto c'è un 'infinità di spazio. E anche provando a modificare i padding, non cambia. Sai se c'è modo di far convivere questo pezzo di codice con il MattBlack menù che ci si ritrova dentro?
    P.s. Per modificare i margini tra i tre nuovi spazi creati e quello che c'è sopra/sotto, uso la funzione padding inserendo tutte e 4 le direzioni (super/dx/infer/sx)? Perchè provando a mettere -30px per eliminare lo spazio inferiore tra i tre gadgets e i post sottostanti, non succede nulla..
    Grazie, Giuliana

    RispondiElimina
  29. @Dieta e Dintorni
    Prova a salvare su un file di testo il widget del MattBlack Menu, poi lo rimuovi. Successivamente dividi l'header e incolli nuovamente il codice del MattBlack Menù andando su Aggiungi gadget > HTML/Javascript

    RispondiElimina
  30. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  31. Scusa se ho cancellato il commento sopra, ma avevo riportato un'inesattezza, quindi lo riscrivo in maniera più precisa.
    Innanzitutto volevo dirti sono riuscita a dividere correttamente lo spazio in tre, grazie mille per l'aiuto :)
    Ho dovuto comunque impostare la grandezza dei tre elementi così: 25%, 50%, 20%, perchè se mettevo 25% anche nel terzo spazio, lo trovavo al di sotto degli altri due.
    Mettendo un totale di 95% anzichè di 100% invece, i tre spazi risultano tutti in linea tra loro.
    Lo riporto in caso qualcuno dovesse riscontrare il mio stesso problema.
    Grazie ancora, un saluto
    Giuliana

    RispondiElimina
  32. @Dieta e dintorni
    Grazie ma anche nel post era già scritto che la somma totale di tutte le percentuali doveva essere strettamente inferiore al 100% (in senso matematico)

    RispondiElimina
  33. Ti chiedo scusa, avevo letto male, avevo capito che la somma totale doveva essere pari a 100%, non inferiore. Certo che sono proprio un disastro ;p
    Ne approfitto per dirti che ho deciso di eliminare questa nuova suddivisione in tre parti perchè mi è sembrato di notare che da quando l'avevo inserita il caricamento del mio blog veniva abbastanza rallentato (può essere?)Peccato, perchè era davvero utile e mi dava un po' più di spazio per la barra di ricerca e il traduttore Google; vorrà dire che li lascerò nelle due colonne laterali, ma grazie lo stesso, anche perchè praticamente tutto quello che sono riuscita a inserire nel mio blog (textarea, menù a tendina, google adsense, barra menù, icone per cambio pagina, gadget ultimi articoli, read more, ecc. ecc.) lo devo a te. Penso proprio che creerò un'apposita pagina di ringraziamenti, te la meriti davvero :)
    Alla prossima, Giuliana

    RispondiElimina
  34. @Giuliana
    Ma quali scuse per così poco ;)

    RispondiElimina
  35. ecco qui anche la versione in 6 parti testata!
    http://porcellinogiramondo.blogspot.it/
    non riesco a copiare il codice che ho modificato partendo dal tuo, comunque ecco, si può fare, sia suddiviso in 5 che in 6 ;)
    grazie ancora!

    RispondiElimina
  36. ciao utilissimo come sempre, se invece volessi dividerlo in 2 parti che codice dovrei usare? grazie

    RispondiElimina
    Risposte
    1. @# Prova con questo codice

      <div class='region-inner tabs-inner' id='crosscol-wrapper' style='text-align:center'>
      <div id='crosscol0' style='text-align: center; padding: 3px;'>
      <b:section class='tabs' id='crosscol-superiore' preferred='yes'/>
      </div>
      <div id='crosscol1' style='width: 44%; float: left; margin:0; padding: 3px;'>
      <b:section class='tabs' id='cross1' preferred='yes' style='float:left;'/>
      </div>
      <div id='crosscol2' style='width: 44%; float: left; margin:0; padding: 3px;'>
      <b:section class='tabs' id='cross2' preferred='yes' style='float:right;'/>
      </div>
      <div style='clear:both;'/>
      </div>

      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.