Pubblicato il 24/11/11e aggiornato il

Come inserire due widget da entrambi i lati dell'header di un blog su Blogger.

Mi sono già occupato di come dividere l'Intestazione o Header del blog in due parti e di come inserire sotto l'header tre widget separati. Questo articolo introduce una personalizzazione ulteriore per permettere di inserire nell'header nel blog due nuovi widget, uno sulla sinistra e uno sulla destra. Si può trattare di testo, immagini, video o qualsiasi altro gadget che possa essere inserito in Blogger.

Se si va su Layout si vede che non è possibile inserire dei gadget nella Intestazione di un blog su Blogger perché l'elemento è bloccato

intestazione-gadget

 

Se si clicca su Aggiungi un gadget non sarà possibile trascinarlo sopra all'intestazione. L'obiettivo finale di questa guida sarà quello di creare un header che abbia un aspetto simile al seguente che ho realizzato in un mio blog di prova

titolo-blog-tra-due-gadget

dove come widget aggiuntivi ho inserito due semplici immagini. Come detto bisogna per prima cosa sbloccare l'header. Si va su Modello > Backup/Ripristino e si Salva il modello completo per un backup di sicurezza. Quindi sempre su Modello > Modifica HTML si cerca la riga

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> e si sostituisce con quest'altra

<b:section class='header' id='header' maxwidgets='' showaddelement='yes'> 

come mostrato nel seguente screenshot

sostituzione-riga-nelò-modello-blogger

Adesso si possono aggiungere i widget anche nella intestazione. Ne inseriamo uno prima del Titolo del blog e uno subito sotto

intestazione-blog-gadget

Non occorre mettere subito i contenuti, basta andare su Aggiungi gadget > HTML/Javascript e digitare un po' di testo. Si potranno sempre personalizzare successivamente. Ciascun gadget ha il suo ID che rappresenta il suo codice indicativo. Per i widget inseriti con l'opzione HTML/Javascript questo ID avrà la forma HTMLX dove X sarà un numero d'ordine che individua il widget. Per poter inserire dei fogli di stile che determinano l'aspetto del gadget dobbiamo ricavarne il suo ID. Si può andare su Modello > Modifica HTML > Procedi, cliccare su F3 e digitare il titolo del widget. Il suo ID sarà visibile nella riga del suo codice

id widget blogger  

Gli ID dei due gadget che ho inserito per prova, come si può vedere dal precedente screenshot, sono rispettivamente HTML3 e HTML4. Quando si sono acquisiti questi due dati si va su Modello > Modifica HTML > Procedi, si cerca la riga ]]></b:skin> e, subito sopra, si incolla un codice come questo

/* PERSONALIZZAZIONE HEADER */
.header .widget  {
display:inline-block;
*float: left;
height:85px;
overflow: auto;
margin: 5px 6px !important;
vertical-align: top;
}
.header #Header1 {
width: 55%;
}
.header #HTML3, .header #HTML4 {
width: 18%;
}

Si salva il modello. Le personalizzazioni da effettuare sono le seguenti:

  1. Si può configurare l'altezza dei widget (85px) ponendola uguale a quella della intestazione se abbiamo una immagine come header
  2. E' possibile inserire dei margini verticali (5px) e orizzontali (6px) per distanziare i due widget dal resto del layout
  3. Occorre inserire gli ID dei widget che abbiamo aggiunto al posto di quelli colorati di viola HTML3 e HTML4
  4. Si può configurare la larghezza in percentuale dei due widget (18%) e la larghezza della intestazione (55%) ricordandosi di restare sempre ben al di sotto del 100% totale. In questo caso si è dato ai widget la stessa larghezza ma si possono dare anche misure differenti. Le ultime righe del widget potrebbero in questo caso diventare simili a queste

.header #Header1 {
width: 50%;
}
.header #HTML3 {
width: 20%;
}
.header #HTML4 {
width: 25%;
}

Dopo che si è fatto questa configurazione, possiamo aprire ciascun widget andando su Layout > Modifica e inserire tutto quello che vogliamo. Ricordo anche che si può ricavare l'ID di un gadget anche aprendolo su Layout

id-widget-blogger

Il suo ID non sarà altro che la parte finale dell'URL visualizzato nella barra degli indirizzi del browser. Concludo osservando che volendo si può anche inserire un bordo, che si vedrà nell'intestazione e nei widget, aggiungendo per esempio la riga border: 1px solid #003366; subito sotto al codice .header .widget { e ricordando che i parametri in rosso possono essere personalizzati consultando il post che ho scritto sullo stile dei bordi.





12 commenti :

  1. Scusa se ti disturbo e se ti chiedo una cosa diversa da quella di cui parli in questo post.
    Ho notato che alcuni blogger quando mi lasciano un commento scrivono il nome del loro blog e lo linkano. Come si fa?
    Scusa ancora e grazie dei bei consigli che dai sempre.
    Buona serata.
    Erika

    RispondiElimina
  2. @Erika
    Si può fare solo nei blog che consentono tutti i tipi di commenti. Può servire per aumentare il Page Rank. Segui questo post
    http://www.ideepercomputeredinternet.com/2009/09/come-migliorare-il-page-rank-con-i.html

    RispondiElimina
  3. ciao Ernesto, sono sempre io, quella che rispolvera i vecchi post....! vorrei dividere il mio header in 3 parti, un'immagine al centro e due menù ai lati (elenco di link), ho effettuato una prova con il tuo tutorial ma i due widget non si allineano con l'immagine, al contrario rimangono uno in alto, uno in basso. potrebbe dipendere dalla dimensione dell'immagine centrale? come sempre, grazie! F

    RispondiElimina
    Risposte
    1. anzi, già che ci sono esagero... è possibile impostare l'header (e relativi menù laterali) in modo che allo scorrere della pagina sia sempre visualizzato in alto? ri-grazie! :D

      Elimina
    2. @ Federica
      Potrebbe essere ma è più probabile che come sempre ogni modello fa storia a sé. Forse ti potrebbe essere utile anche questo post
      http://www.ideepercomputeredinternet.com/2011/05/come-dividere-in-tre-parti-l-sotto-l-di.html

      Elimina
    3. ti ringrazio, ora mi studio il post che mi hai linkato e ti faccio sapere! per quella cosa dell'header fisso.... ho qualche speranza? :)

      Elimina
    4. @ Federica
      Per header fisso intendi flottante? Vale a dire che rimane fermo allo scorrere della pagina? Non so se si può fare ...

      Elimina
    5. Bravissimo, non conoscevo il termine corretto! Peccato perchè mi sarebbe puaciuto che i due menù laterali restassero fissi... E se anzichè rendere fisso tutto l'header volessi solo i menù... si puó fare...? Graxieeeeeeeeeeeeeeee

      Elimina
    6. @ Federica
      Prova questo
      http://www.ideepercomputeredinternet.com/2009/07/come-inserire-un-menu-laterale-tendina.html
      o questi
      http://www.ideepercomputeredinternet.com/2009/07/come-inserire-tre-menu-scorrevoli.html

      Elimina
    7. grazie Ernesto, dedico la serata alle prove e ti aggiorno! :D

      Elimina
  4. ci è voluto parecchio lavoro ma alla fine sono riuscita ad ottenere quello che volevo grazie ad un altro dei tuoi post:

    http://www.ideepercomputeredinternet.com/2012/06/come-diminuire-lo-spazio-tra-titolo-e.html

    usando il codice che hai suggerito ad un altro lettore sono riuscita a spostare i due elenchi di link accanto all'immagine/header centrale! Grazie!!!

    RispondiElimina
    Risposte
    1. @ Federica
      L'importante è il risultato :D

      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.