Pubblicato il 10/05/11e aggiornato il

Come dividere l'header di Blogger in due parti.

In alcuni modelli di Blogger, l'Intestazione si visualizza solo nella parte sinistra del layout mentre la parte destra è occupata da annunci pubblicitari, bottoni di navigazione o altri widget. L'operazione da compiere è quella di dividere appunto l'intestazione in due diverse sezioni. In teoria, utilizzando lo stesso procedimento si può suddividere l'header anche in tre parti o anche di più. La procedura è alquanto diversa se si ha un vecchio modello o un nuovo template realizzato con il Designer Modelli.
Dividere l'intestazione in due parti con i nuovi modelli di Blogger
Si va su Design > Modifica HTML e non si espandono i modelli widget. Dopo aver salvato il modello completo per un eventuale backup di ripristino, si cerca il blocco di codice del CSS che determina l'aspetto della intestazione. Nei nuovi modelli siamo facilitati dalla presenza di questo commento


/* Header
----------------------------------------------- */





Subito sotto si incolla questo codice
.header {width:46%; float: left; margin:0 auto 1%;}
.header-destro {width:46%; float: right; margin:0 auto 1%;}
Le percentuali, come vedremo possono essere variate e non è detto che dobbiamo fare le due sezioni della stessa larghezza. Il totale è del 94%, si può aumentare o anche diminuire, dipende dalle altre variabili presenti nel modello. Si cerca adesso quest'altro blocco di codice e si inseriscono le righe evidenziate di rosso
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Titolo del blog (Intestazione)' type='Header'/>
</b:section>
<b:section class='header-destro' id='header-destro' showaddelement='yes'/>
<div style='clear: both;'/>
</div>
Si salva il modello. Se adesso andiamo su Design > Elementi pagina vediamo una cosa simile a questa
intestazione header blogger
con l'Intestazione divisa in due parti. Per questioni di simmetria è opportuno inserire Aggiungi un gadget anche nella parte sinistra dell'header. Nello stesso blocco di codice di prima operiamo queste modifiche
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Titolo del blog (Intestazione)' type='Header'/>
</b:section>
Dove le modifiche sono state colorate di rosso rispetto al colore blu del codice precedente. Salviamo nuovamente il modello. In Design > Elementi pagina avremo adesso questa area di lavoro
aggiungi un gadget su blogger[4]
A questo punto non resta che inserire nella parte destra un qualsiasi widget. Facciamo l'esempio di una immagine. Dopo averla caricata su Picasa e averne ottenuto l'URL si va su Aggiungi un gadget > HTML/Javascript e si incolla questo codice
<img style="margin-top:-10px;" src="URL DELLA IMMAGINE" /> 
Si salva e si visualizza il risultato. Potete vedere l'esempio dal vivo nel Blog Ricerca
immagine inserita nella parte destra dell'header 
in cui ho inserito come immagine una semplice scritta. La zona è utilizzata da molti blogger per inserire una unità pubblicitaria. Nella fattispecie un banner di 468x60 pixel. Per prima cosa dovete fare i calcoli se tale banner sia compatibile con la larghezza della parte destra dell'header, nel caso non lo fosse, si può agire sulle percentuali e aumentare quella dell'header-destro dal 46% al 48% o anche di più. L'attributo margin-top:-10px;"  l'ho inserito per visualizzare i due elementi dell'header alla stessa altezza. Si tratta di un dato relativo al modello utilizzato come test e il valore di -10px può essere modificato fino a trovare la giusta posizione. Si mettono valori negativi se l'oggetto sta in basso, positivi se è più alto della intestazione di sinistra.
Se si inserisce un annuncio pubblicitario si va sempre su Aggiungi un gadget > HTML/Javascript e si incolla un codice si questo tipo
<div style="margin-top:-10px;">
Codice annuncio del formato 468x60
</div>
in cui si sostituisce il codice dell'unità pubblicitaria e si personalizza il dato in rosso.
Come dividere l'header di Blogger in due sezioni con i vecchi modelli
Come al solito si va su Design > Modifica HTML e non si espandono i modelli widget. Si salva il modello e si cerca un blocco di codice simile a questo
#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

Si elimina e si sostituisce con quest'altro
#header {
width: 47%;
float: left;
margin:0 auto 1%;
text-align: center;
color:$pagetitlecolor;
}
#header-destro {
width: 47%;
float: right;
margin:0 auto 1%;
text-align: center;
color:$pagetitlecolor;
}
dove le percentuali possono essere modificate e il colore è quello scelto dall'utente che però può essere cambiato sostituendo color:$pagetitlecolor; per esempio con color:#000000;  ricordandoci dei codici dei colori. Successivamente si cerca quest'altro blocco di codice
<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Titolo del blog (Intestazione)' type='Header'/>
</b:section>
    </div>

e si modifica in questo modo
<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Titolo del blog (Intestazione)' type='Header'/>
</b:section>
<b:section class='header-destro' id='header-destro' showaddelement='yes'/>
<div style='clear: both;'/>
    </div>
dove le modifiche sono state colorate di rosso. Si salva il template. Su Design > Elementi pagina si vedrà l'Intestazione suddivisa in due parti e si potrà aggiungere sulla destra una immagine, un annuncio o qualsiasi altro oggetto HTML




32 commenti :

  1. un articolo del genere lo sapettavo da un pezzo....grazie mille

    RispondiElimina
  2. è stato difficile ma alla fine ce l'ho fatta.io ho un template costruito su wordpress per questo è più complicato seguirti :) però con le tue lezioni ci sto riuscendo pian piano.grazie!

    RispondiElimina
  3. Ciao Ernesto,
    ho provato la divisione in due dell'header ma quando vado a verificare gli elementi di pagina mi fa vedere sempre l'intestazione intera. Ho verificato le istruzioni più volte ma non trovo errori(tra l'altro sono molto semplici).Ho un nuovo modello semplice di blogger.Grazie in anticipo.

    RispondiElimina
  4. @Luis Biker
    Forse hai sbagliato qualcosa, magari hai messo la spunta a espandi i modelli widget. La procedura è quella e l'ho verificata, non è che posso dirti molto di più ...

    RispondiElimina
  5. Sei sempre genitilissimo, i tuoi tutorial mi servono tantissimo.
    Avrei una domanda: potrei fare il contrario? Cioè rinuire un header che è stata suddivisa in 2 parti?
    Grazie
    Vj

    RispondiElimina
  6. @Viwoosh
    Tutto si può fare però non può esserci una guida in tal senso perché dipende dal modello che si ha. A priori non si può sapere quale codice è stato aggiunto. Onestamente mi starebbe fatica a fare una operazione del genere anche per il mio template ;)

    RispondiElimina
  7. Ciao scusa io ho seguito quello che hai scritto ma con il mio blog il widget si visualizza si a destra ma sotto rispetto header no a canto. come posso far? sito: http://my-coloryourlife.blogspot.com/

    RispondiElimina
  8. @Manager
    Prova a diminuire progressivamente le percentuali fino a che non li vedi affiancati. Prova con 45% e 45% poi con 44% o anche di meno.

    RispondiElimina
  9. ho procvato a diminuire ma niente da fare. come posso risolvere?

    RispondiElimina
  10. @Manager
    Se è così, non c'è nulla da fare

    RispondiElimina
  11. Ho provato anche io ma mi sfasa le due immagini. Forse il problema è dato da altre modifiche precedenti sull'html? Lascio il mio indirizzo: http://spreadingwaterpolo.blogspot.it/
    In alto a destra vorrei inserire un banner pubblicitario. Convoene utilizzare il gadget foto?

    RispondiElimina
  12. @edoardoosti
    Se ti sfasa le due immagini prova a inserire al posto della riga
    margin:0 auto 1%;
    quest'altra
    margin: 20px auto 1%;
    oppure quest'altra
    margin:-20px auto 1%;
    a seconda se la parte destra va in alto o in basso. Al posto di 20 puoi mettere un altro valore. Per inserire un banner è sempre meglio usare un widget HTML/Javascript.

    RispondiElimina
  13. me lo sfasa ugualmente. ecco il link http://spreadingwaterpolo.blogspot.it/

    RispondiElimina
  14. ora ci sono, ho modificato questo codice, da
    .header-inner .section {
    margin: 0 35px;

    a

    .header-inner .section {
    margin: 0 1px;

    Ora devo farmi dare un banner più grande, così lo ridimensiono al 24% per mantenere la somma 70%+24%=94%.

    ora devo renderlo linkabile

    RispondiElimina
  15. Mi ha funzionato in parte. A sinistra ho inserito l'intestazione ed a destra la casella di ricerca di blogger. E' questo si vedono bene.
    Con Chrome ed IE tutto ok ma con Mozilla il menu delle pagina situato appena sotto, creato con la tua guida dei bottoni ad HTML questo menu si accartoccia tutto su se stesso.
    Da precisare che aumentando le percentuali si restringe e diventa a colonna mentre diminuendo le percentuali sembra aggiustarsi, ma non posso diminuirlo oltre perché scompaiono pure i due header.
    Si può rimediare a questo inconveniente?

    RispondiElimina
    Risposte
    1. @AndreaSapuppo
      Quando ci sono problemi con un singolo browser non si sa che fare. Se sono comuni a tutti si può intervenire ma se non funziona in uno soltanto si può fare poco.

      Elimina
    2. Ma tralasciando questo sai dirmi come mai, ad esempio il post del blog che in Css è chiamato #Main se lo posiziono vicino al menu per ridurre gli spazi bianchi questo si vede prima tagliato e poi bene?
      All'inizio la parte bianca si sovrappone sulla scritta.
      Ma questo mi succede con molte cose non solo con questo, mentre vedo altri blog su blogspot che tutti questi problemi non li hanno, sono tutti ordinati e poi non hanno eccessivi spazi bianchi.

      Elimina
    3. @andreasapuppo
      Se prendi un modello ufficiale e non tocchi nulla tutto va perfettamente e più veloce

      Elimina
  16. ahia...
    "Sections may not be nested: section header-destro is contained within header"
    al ptimo salvataggio mi rende questo errore. emmoh?

    RispondiElimina
    Risposte
    1. @ EdoardoOsti
      Significa che nel tuo modello questo sistema non è applicabile perché non si può creare una seconda sezione dentro l'header. Potresti provare a sostituire locked="true" con locked="false" ma non so se funzionerà

      Elimina
  17. è possibile inserire un codice al posto del titolo del blog, per far sparire la scritta?. Non mi interessa inserire una immagine al posto del titolo... grazie.

    RispondiElimina
    Risposte
    1. @# Ho inserito l'immagine come esempio. Puoi metterci qualsiasi codice che possa essere inserito in un gadget HTML/Javascript

      Elimina
  18. Salve non capisco perchè nel mio modello non appare ma , quindi non riesco ad apportare le opportune modifiche...
    Grazie come al solito per i consigli e le risposte alle informazioni :)

    RispondiElimina
  19. *non appare section, ma include main

    RispondiElimina
    Risposte
    1. Si tratta di un post vecchio. Da allora sono cambiati i codici e queste cose sono diventate più difficili
      @#

      Elimina
  20. Vorrei aggiungere sopra l'header (ho già provveduto a rendere possibile l'azione) un widget html per mostrare un'immagine, e vorrei fosse più larga della larghezza complessiva del blog, è possibile?

    (grazie)

    RispondiElimina
    Risposte
    1. Un immagine più larga del layout del blog? Potrebbero avere difficoltà i visitatori con uno schermo a bassa risoluzione però in teoria penso sia possibile, dipende ovviamente dal modello ma puoi testare
      @#

      Elimina
  21. e se sopra l'header diviso vorrei portare il widget del menù su uno spazio non diviso?

    RispondiElimina
  22. Nel senso che tu vorresti avere contemporaneamente l'header diviso e non diviso? Ti conviene dividere invece che l'header la parte che sta subito sotto in due colonne
    http://www.ideepercomputeredinternet.com/2012/01/come-aggiungere-due-colonne-sopra-o.html
    oppure in tre o quattro parti
    http://www.ideepercomputeredinternet.com/2011/05/come-dividere-in-tre-parti-l-sotto-l-di.html
    @#

    RispondiElimina

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.