Pubblicato il 17/02/11 - aggiornato il  | 41 commenti :

Menù orizzontale personalizzabile da inserire sopra l'header di un blog su Blogger.

Menù orizzontale da mostrare sopra l'Intestazione del blog sbloccando Aggiungi un gadget sopra l'header.
Questo menù credo che sia l'ideale per siti con una grafica semplice e pulita ma potrebbe anche essere usato insieme a un altro menù basato su javascript. Il solo script che viene utilizzato per la sua installazione è open source e serve unicamente per visualizzare il menù in modo accettabile anche con Internet Explorer. Prima di procedere all'installazione vera e propria è opportuno inserire un elemento Aggiungi un gadget nella parte alta del template.
Nella fattispecie si va su Design > Modifica HTML e si espandono i modelli widget. Dopo aver salvato il modello completo, si cerca la riga

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

Ce ne potrebbe essere una leggermente diversa. Per individuarla si può pigiare su F3 e cercare showaddelement. La riga va modificata in questo modo

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

Questo ci consentirà di visualizzare Aggiungi un gadget anche nella parte alta e si potrà inserire anche un altro widget nell'header. Invece che 2 può essere messo anche un numero maggiore. Adesso cercate questa riga
<b:include data='blog' name='all-head-content'/>
e, immediatamente sotto, incollate questo codice
<!--[if IE]>
<script type="text/javascript" src="https://sites.google.com/site/scriptperilblog/javascript-2/blogger-IE.js"></script>
<![endif]-->
che serve appunto per Internet Explorer. Nel caso non lo incolliate, il menù funzionerà comunque lo stesso con gli altri browser. Salvate il modello. Andate su Design > Aggiungi un gadget > Elenco di link
elenco di link blogger
Inserite nel widget tutti i link del vostro menù con gli URL e i nomi da visualizzare
menù orizontale elenco di link
Non dobbiamo inserire il titolo del widget, si anche può tralasciare di inserire il numero di link da mostrare e l'ordinamento da seguire. E' sufficiente incollare l'URL delle pagine che vogliamo linkare nel menù insieme al testo da visualizzare. Per ogni voce inserita ci sono delle freccette per modificarne l'ordine. Quest'ultimo adesso appare in verticale ma sarà identico a quello che poi vedremo in orizzontale. Quando abbiamo inserito tutte le voci, clicchiamo su Salva. Ricordo che si potrà sempre modificare il widget in un secondo momento, aggiungendo altre voci con altri link o cambiando il testo degli elementi del menù.
Con il mouse si trascina questo elemento pagina nella zona dell'header e andiamo ancora su Salva. Se adesso date uno sguardo al blog rimarrete delusi perché l'aspetto del menù è quello di un semplice elenco verticale. Per renderlo adatto alle nostre esigenze, dobbiamo creare delle classi apposite. Il widget che avete inserito sarà denotato da LinkList1. Sarebbe LinkList2 solo nel caso in cui non fosse il primo widget Elenco di link che inserite nel template. Nella prima ipotesi, tornate in Design > Modifica HTML e cercate la riga  ]]></b:skin>. Immediatamente sopra incollate queste nuove classi
/* Menù Header Inizio */
#LinkList1 li {border-right:1px solid #FFFFFF; float:left; font-size: 13px; font-family:Arial,Helvetica,sans-serif, Trebuchet MS; font-weight:bold; height:22px;letter-spacing:0; list-style:none outside none; padding-left:8px; padding-right:8px; padding-top:8px; text-align:center;}
#LinkList1 li:hover {background: #FDBCB7;
color:#000000;}
#LinkList1 a{color: white;} #LinkList1 a:hover{
color: white; text-decoration: none;}
#LinkList1 {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-goog-ms-border-radius:7px;
border-radius: 7px; background:#940F04; height:32px; margin-bottom:12px;
}
/* Menù Header Fine - www.ideepercomputeredinternet.com */
Salvate il modello e visualizzate il menù.
menù orizzontale nell'header di blogger
I bordi del menù saranno arrotondati alle estremità. L'ampiezza della rotondità viene determinata dal numero indicato accanto a border-radius. Si possono configurare le dimensioni del menù e le sue distanze esterne (margin) e interne (padding). Le modifiche più importanti riguardano i colori del menù secondo questo schema
  • #FFFFFF; è il colore del bordo che divide gli elementi
  • #940F04; è il colore di sfondo del menù in condizioni normali
  • #FDBCB7; è il colore di sfondo che prende un singolo elemento se viene puntato con il mouse. Per modificarli, se non sapete come fare, vi consiglio di dare uno sguardo all'articolo che ho pubblicato sui codici dei colori.
Il menù occuperà automaticamente tutto lo spazio dell'header quindi si potranno aggiungere voci o calibrare la lunghezza del testo per occupare tutto lo spazio a disposizione in modo ottimale. I bordi arrotondati potrebbero non essere visibili in alcuni modelli di Blogger se si utilizza Internet Explorer mentre non sussistono problemi di sorta con gli altri browser.



41 commenti :

  1. è possibile mettere un'immagine al posto della scritta?

    RispondiElimina
  2. @Soffio di Dea
    No, è un widget Elenco di link e quindi ci sono solo collegamenti con relativo anchor text

    RispondiElimina
  3. ok grazie magari lo sostituisco al dock menu perché rallenta molto

    RispondiElimina
  4. nel mio modello non trovo questa riga: ]]>.
    come mai?

    RispondiElimina
  5. @Dony
    Ho visto il tuo codice e ho trovato questo
    #layout .region-inner {
    min-width: 0;
    width: auto;
    }

    Inserisci il codice subito sotto. Mi raccomando di salvare il template prima di procedere e di incollarlo dopo la parentesi graffa e prima di tutto il resto. Ciao

    RispondiElimina
  6. E lo sapevo che scrivevi questo articolo proprio ora che mi sto trasferendo su wp. Uffa. :D
    L'hai fatto apposta, ammettilo Ernesto! ahah
    A parte gli scherzi, ottima cosa, ricordo quando te lo chiesi a proposito del menu multilivello, purtroppo mi ha sempre dato "errore" e anche la guida di google non mi ha saputo dire che tipo di errore fosse.

    RispondiElimina
  7. @Marguerite N.
    Questo è un menù semplicissimo, forse un po' troppo semplice per te :D
    Ha un solo livello ma potrebbe essere usato come menù di appoggio a un altro più dettagliato. Voi beauty blogger amate i menù con centinaia di voci ^^

    RispondiElimina
  8. E anche tu hai ragione ahah! Comunque testarda come sono avrei poi riprovato a ficcarci un menu multilivello (con vani risultati).
    Comunque giustizia fu, almeno sulla versione 3.0 di wp sto per mettere il famoso megamenu che mi dava problemi di conflitto su blogger!;D

    RispondiElimina
  9. @Margue
    Auguri per la nuova avventura. Ti offro supporto morale :)

    @Dony
    Togli il codice che hai inserito e incolla quello che puoi trovare in questo documento
    https://docs.google.com/document/pub?id=1gc56zI1fb6dIXUCvlnLTDDQUFWdA-C4gtj03-PwitLU
    subito sopra al tag < /head > che è sotto qualche riga di quello tolto. Fammi sapere. Ciao

    NB ho inserito degli spazi dopo i segni di minore e maggiore intorno al tag /head perché altrimenti non mi prendeva il commento.

    RispondiElimina
  10. fatto...mi rimane uguale...ma sono imbranata io o è il mio modello che fa i capricci??? Uff scusami!

    RispondiElimina
  11. @Dony
    Ho dato uno sguardo al codice del tuo modello e in effetti è un po' strano. Può darsi che sia per quello che non funziona. Il menù l'ho testato anche sugli ultimi template del Designer Modelli e non dà problemi

    RispondiElimina
  12. ci credo, immaginavo che fosse il mio modello a fare i capricci!!! Grazie lo stesso ^_^

    RispondiElimina
  13. ciao! ho un problema con il mio blog e questa modifica...a livello di guida ho applicato tutto e il menu c'è e funziona...il problema è alla base, ho diviso l'header in tre parti e al di sopra non posso aggiungere gadget, infatti l'elenco di link l'ho messo nella parte sinistra.
    Quindi se aggiungo più link la barra si schiaccia a sinistra invece di proseguire verso destra...ho cercato di aggiungere il comando clear, ma non ci sono riuscito...qualche suggerimento??

    RispondiElimina
    Risposte
    1. @Forza Venite Gente
      Se hai diviso l'header in tre parti già mi sembra notevole il fatto che il menù ti funzioni ;)
      Come consiglio ti posso dire di sostituire
      maxwidgets='2' con maxwidgets='5' in modo da poter aggiungere altri elementi pagina sopra l'header

      Elimina
    2. Ciao!!
      Grazie per la tempestiva risposta...hai visto il mio blog per caso??
      http://fvg12.blogspot.com
      Non saprei cosa fare, perchè alla fine 2 widget son sufficienti, anche se per il fatto che l'header è diviso il widget dei link arriva solo fin dove c'è la parte sinistra del mio header...
      Non hai un'idea di come possa separare le tre parti di header dalla parte alta (ottenere una parte unita sopra) o permettere al widget dei link di occupare il tutto in orizzontale??

      Elimina
    3. Francamente mi sembra una cosa che dovrebbe essere studiata sul modello e non è detto che si possa fare. Il widget delle pagine forse potresti metterlo sotto ai tre header e in questo modo forse potrebbe prendere tutto lo spazio.

      Elimina
  14. Questo menù lo posso mettere tranquillamente anche accanto l'immagine dell'header, giusto?

    RispondiElimina
    Risposte
    1. @Manager
      Se c'è lo spazio e hai un Aggiungi gadget in quella zona o perché l'header è diviso in due, certamente.

      Elimina
  15. ciao, ho notato una cosa, che sul mio blog non c'è l'header come lo metto ?!

    RispondiElimina
    Risposte
    1. @Manager
      SE non c'è l'header lo metti in un gadget qualsiasi posizionato nella parte alta

      Elimina
  16. Merci!!!!
    I miei amici saranno contenti:
    http://grillon-anosyros.blogspot.com/

    RispondiElimina
  17. carino, però a me succede che il mneu non si sovrappone sull'immagine dell'intestazione, ma rimane sopra

    RispondiElimina
    Risposte
    1. @...
      Questi tutorial vengono testati solo in alcuni modelli ufficiali di Blogger. Se si hanno dei template scaricati da internet ogni caso fa storia a sé.

      Elimina
  18. Ciao e grazie dell'articolo, nella prova che ho fatto mi funziona benissimo, ma se cerco di mettere il menu sotto l'header, non mi si visualizza. Intendo sotto all'immagine di intestazione del blog. Devo modificare qualcosa? Perchè in realtà volevo proprio metterlo al posto del widjet "schede". Grazie!

    RispondiElimina
    Risposte
    1. @EmergencyRoom
      Questo menù è studiato apposta per sopra all'header ciò non toglie che in alcuni modelli possa essere messo anche da altre parti

      Elimina
  19. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  20. salve uso chrome, ho scritto nel codice yes, ho salvato ho anche aggiornato ma proprio non mi fa mettere il menu o qualsiasi altra cosa sopra l'header

    RispondiElimina
  21. salve uso chrome, ho scritto nel codice yes, ho salvato ho anche aggiornato ma proprio non mi fa mettere il menu o qualsiasi altra cosa sopra l'header

    RispondiElimina
    Risposte
    1. Forse hai un modello scaricato da internet con questa parte del layout bloccato
      @#

      Elimina
  22. Buongiorno, è possibile spostare le pagine statiche sopra l'header?
    Grazie
    Lisa

    RispondiElimina
  23. mi ero scordata di spuntare inviami notifiche ;)

    RispondiElimina
    Risposte
    1. Si può provare cercando di sbloccare l'header per aggiungere un altro elemento
      http://www.ideepercomputeredinternet.com/2012/08/blogger-menu-header-pagine.html
      @#

      Elimina
    2. Spostando il menù con trascinamento del mouse da Layout dopo lo sblocco
      @#

      Elimina
  24. Grazie al tuo post sono riuscita, dopo giorni, a mettere un gadget sopra l'intestazione.

    RispondiElimina
  25. Il menu è visibile in verticale e solo in modalità testo, senza sfondo (con firefox). Perchè? Grazie.......

    RispondiElimina
    Risposte
    1. Presumo perché il codice è del 2011 e da allora il codice di Blogger è cambiato un sacco di volte
      @#

      Elimina
  26. Io nel mio blog ho un template semplice di blogger ma non trovo questa riga

    RispondiElimina
  27. Inserisci il codice sopra alla riga < header > .La devi cercare senza spazi dopo e prima dei segni di minore e maggiore. Salva il template prima di procedere
    @#

    RispondiElimina

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