Pubblicato il 14/10/12 - aggiornato il  | 101 commenti :

Come personalizzare il Menù delle Pagine Statiche su Blogger.

Come personalizzare il menù delle pagine statiche di Blogger. Si possono settare i colori, determinarne altezza e larghezza e centrarlo nel layout del blog.
Da diverso tempo su Blogger è possibile creare un menù in modo molto semplice utilizzando le pagine che sono state pubblicate. Si va su Pagine > Nuova pagina > Pagina vuota e si pubblica la pagina statica utilizzando l'Editor che è lo stesso di quello dei post.

Le pagine così create possono essere inserite in un elenco verticale nella sidebar oppure visualizzate come Schede a formare un vero e proprio menù. Per utilizzare questa opzione occorre andare su Pagine > Mostra pagine come e selezionare Schede in alto.

E' possibile aggiungere altre voci al menù anche di pagine web non appartenenti al blog. Pensiamo per esempio alla pagina fan su Facebook, all'account su Twitter o al Profilo su Google Plus. In questo caso si va su Pagine > Nuova Pagina > Indirizzo web e si incolla l'URL della pagina insieme al suo titolo. Si clicca su Salva per completare l'operazione. Ecco un tipico aspetto di un menù di questo genere

men-pagine-blogger

Quando si passa con il cursore sopra a un titolo la scheda cambia colore. Per personalizzare questi sfondi si va su Modello > Personalizza > Avanzato > Sfondo schede e si settano i due codici

sfondo-men-blogger

per il colore di sfondo e per il colore selezionato. Bisogna ricordarsi di cliccare su Applica al blog in alto a destra per rendere effettive queste modifiche di cui se ne vedrà l'anteprima in basso.

COME MODIFICARE L'ALTEZZA DEL MENU'

Se il menù è troppo alto o troppo basso ne possiamo settare l'altezza inserendo una piccola modifica al template. Si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin>. Subito sopra si incolla questo nuovo CSS

#PageList1 ul {height:25px;}

Si salva il modello e si vedrà che il menù ha diminuito il suo spessore 

modificare-spessore-menu-pagine-blogger
Nel test che ho fatto in realtà non c'era assolutamente l'esigenza di diminuire l'altezza del menù ma l'ho fatto per mostrare il funzionamento del codice. Ovviamente si può modificare il valore 25px.






COME DIMINUIRE LA LARGHEZZA DEL MENU'

Di default il menù delle Pagine statiche prende tutto lo spazio del blog. Questo può essere esteticamente fastidioso se si hanno poche voci e si ha molto spazio non utilizzato. Basta incollare sopra la riga ]]></b:skin> un codice come questo

#PageList1 ul {width:600px;}

dove naturalmente occorrerà settare la larghezza del menù fino ad avere questo risultato

accorciare-men-pagine-statiche

COME CENTRARE IL MENU NEL LAYOUT

Non si può utilizzare il tag text-align:center; ma dobbiamo usare la stessa tecnica illustrata per centrare l'Header del blog. Sempre sopra alla riga ]]></b:skin> si incolla questo codice

#PageList1 ul {
margin-left:auto;
margin-right:auto;
}

che, dopo aver salvato il template, produce questo risultato

menu-pagine-blogger-centrato

Ovviamente questi codici possono anche essere unificati in uno soltanto

#PageList1 ul {
width:452px;
height:40px;
margin-left:auto;
margin-right:auto;

}

che rende il menù delle pagine statiche alto di 40 pixel, largo di 452 pixel e perfettamente centrato.

Aggiornamento: Ho pubblicato su questo stesso tema un post più recente


101 commenti :

  1. ottimo..grazie! quello che cercavo...

    RispondiElimina
    Risposte
    1. come mai nell'anteprima non si vede centrato?

      Elimina
    2. @Francesca+-+-+-
      L'importante è che sia centrato come risultato finale. Se non lo fosse togli il codice. L'anteprima di Blogger non sempre è corretta, io praticamente non la uso mai ma per sicurezza salvo sempre il template.

      Elimina
  2. appena ho tempo ci provo, grazie!! buona domenica :)

    RispondiElimina
    Risposte
    1. Ma come faccio a modificare la grandezza-layout di una pagina statica (la vorrei senza colonne, quindi non uguale alla home page)?

      Elimina
    2. Leggi qui per una sola pagina statica
      http://www.ideepercomputeredinternet.com/2012/01/come-eliminare-le-sidebar-e.html
      invece qui per tutte le pagine statiche
      http://www.ideepercomputeredinternet.com/2011/04/come-eliminare-le-sidebar-dalle-pagine.html
      @#

      Elimina
    3. Grazie Ernesto, Miglior Blog di argomento Blogger-Blogspot!

      Elimina
  3. Io invece ho un problema con il menu delle pagine, vorrei tenerlo, perchè mi piace sia per la grandezza sia per lo stile impostato. Solo che vorrei modificarlo inserendo un gadget con un menu a tendina. Il problema è che inserendolo in quella posizione, la "striscia" del menu non permette di aprire correttamente le sottosezioni o di cliccarci sopra.
    Qui l'esempio pratico di quanto detto: http://backstagencanthe.blogspot.it/
    Preciso con il dire che il menu a tendina funziona correttamente in qualsiasi altro punto del layout. é possibile, secondo te, risolvere questo problema?
    Come sempre, grazie! ^_^

    RispondiElimina
    Risposte
    1. @ Tiziana
      I menù inseriti con i gadget HTML/Javascript nella zona dell'header in genere non funzionano per delle impostazioni native di Blogger. Si può ovviare al problema inserendo il secondo menù nel modello invece che in un elemento pagina
      http://www.ideepercomputeredinternet.com/2012/09/blogger-menu-header.html
      Il menù che vedi attualmente in questo blog è stato incollato nel modello perché negli elementi pagina non era possibile. Nell'articolo è illustrato come inserire il menù sopra l'header ma modificando il punto di inserimento del codice potresti metterlo anche sotto al menù delle pagine statiche (non ho testato quindi non te lo so dire con certezza).

      Elimina
    2. Come sempre grazie per l'aiuto, gentilissimo!
      Ieri ho provato le possibili soluzioni, per il risultato che volevo.
      Alla fine ho optato per un elemento html inserito subito sotto l'area header e subito prima l'area adibita per il menu-pagine.
      Se a qualcuno può esser utile...
      Così funziona tutto, e bene.
      Mentre il post che mi suggerisci ho preferito non seguirlo. Perchè ho un dominio personalizzato e per non appesantire il blog con codice java esterno, con ciò che comporta per google e il SEO...
      alla prossima
      Tiziana ;)

      Elimina
  4. Ciao, io ho un blog di cucina e vorrei inserire sotto al titolo del blog stesso l'elenco etichette. Mi spiego meglio : vorrei creare una sorta di menù riepilogativo sfruttando la funzioe etichette. Solo che mi sono accorto che riesco a farlo ma graficamente è davvero un disastro. La funzione è molto comoda e semplice ma si perde nella veste grafica. Potresti darmi una mano?grazie
    sergio

    RispondiElimina
    Risposte
    1. @ilviaggiatore
      Ti posso linkare un post su come personalizzare il menù delle pagine con cui creare anche quelle delle etichette
      http://www.ideepercomputeredinternet.com/2012/10/blogger-menu-pagine-altezza-larghezza-centrare-personalizzare.html
      Se invece hai un modello personalizzato allora devi rivolgerti all'autore del template.

      Elimina
  5. Ciao grazie mille, utilissimo! Mi succede una cosa stranissima: vedo il risultato che vorrei nella miniatura del modello nel pannello di controllo di Blogger ma non nell'anteprima né nella hp del blog vera e propria! Ho già provato a fare il refresh e svuotare la cache... Possibile????

    RispondiElimina
    Risposte
    1. @ Suze.
      È una capitato anche a me un paio di di volte. Prova con un altro browser

      Elimina
    2. Ciao Ernesto, grazie per la risposta immediata! Avevo già provato con IE (io uso Firefox) ma senza risultato. Ora ho riprovato e IE visualizza correttamente, Firefox no. E' un problema solo del mio browser secondo te o chiunque abbia firefox lo vede "sbagliato"?
      Grazie ancora, preziosissimo

      Elimina
    3. @Suze
      Quello che vedono gli altri lo puoi constatare dalla miniatura del blog visibile nella Bacheca di Blogger.

      Elimina
  6. ...sempre io... :)
    Avrei un'altra domanda... Vorrei inserire un'immagine DIETRO al menu pagine. Ossia, con lo sfondo schede trasparente, avere una specie di nastro sottostante personalizzato colorato (un'immagine).
    E' possibile?

    Ho provato a cercare e non mi sembra che tu ne abbia già parlato, in tal caso scusami!

    RispondiElimina
    Risposte
    1. @ Suze
      Tutto è possibile in linea teorica, si tratta però di un grosso lavoro che è molto in funzione del template usato. Io non ho mai tempo in generale e in questo periodo ne ho ancora di meno quindi non posso certo aiutarti :)

      Elimina
    2. Uuuuh, no se è un mega-lavoro non mi ci metto neanche, almeno per questa volta... GRAZIE ANCORA

      Elimina
  7. Ciao, è possibile cambiare il link della pagina HomePage? Mi spiego meglio, ho seguito la tua guida su come creare un network di blog, però vorrei che nel sottodominio la pagina HomePage del gadget Pagine, riporti sempre a www.miodominio.com
    Riesci a capire? E' possibile? :D

    RispondiElimina
    Risposte
    1. @ Esse
      Anche se non ho capito ti linko il post per effettuare il redirect 302 con Blogger
      http://www.ideepercomputeredinternet.com/2012/03/come-fare-un-redirect-302-con-blogger.html
      e ti puoi sbizzarrire come ti pare.

      Elimina
  8. Ciao Ernesto, ho inserito il codice per centrare il menù...ma non funziona!! nè in anteprima, nè nel piccolo riquadro, nè nel blog!
    Avevo precedente aggiunto un tuo codice (per rimuovere gli aloni attorno alle immagini) e ha funzionato alla perfezione, ma questo non ne vuole proprio sapere!!! Come posso fare?

    RispondiElimina
    Risposte
    1. @ Se non funziona allora usa Firebug per conoscere l'ID o la classe del widget
      http://www.ideepercomputeredinternet.com/2011/05/firebug-e-una-estensione-di-firefox-per.html
      http://www.ideepercomputeredinternet.com/2012/07/firebug-chrome-blogger-css-html.html

      Elimina
  9. Ciao! Il tuo sito mi è sempre molto utile!!
    Però avrei una domanda riguardo a questo menu orizzontale. Vorrei inserirgli un menu a tendina, non su tutta la barra ma solo per un elemento! E' possibile?
    Grazie in anticipo!

    RispondiElimina
    Risposte
    1. @ No. Il menù delle pagine statiche di Blogger non prevede sottomenù

      Elimina
  10. Ciao! Il tutorial, come tutto il resto è fantastico, ma ti vorrei chiedere come è possibile fare un elenco pagine con delle immagini e riuscire a centrarle nel blog: mi spiego meglio, vorrei fare una barra delle pagine non con scritte, ma con una serie di immagini che indirizzino a pagine (tipo un'immagine con scritto iChef e indirizza alla pagine di ricette). Adesso vorrei sapere come fare a centrare tutte le immagini e a non distanziarle (1px mi rimane sempre di spazio). Grazie mille per l'attenzione :)

    RispondiElimina
    Risposte
    1. @# Per fare una cosa del genere devi sostituire il testo visibile con una immagine con questo codice < img src="URL IMMAGINE" > in cui ho inserito gli spazi dopo i tag altrimenti non mi postava il codice. Per poi centrare tutte le immagini può esserti utile questo
      http://www.ideepercomputeredinternet.com/2011/10/come-allineare-alla-stessa-distanza-le.html

      Elimina
    2. Va bene, ci proverò! :) e per collegarci un link? Grazie millissime

      Elimina
    3. @# Per mettere una immagine con link devi usare questo codice
      <a href="URL DEL LINK"><img src="URL IMMAGINE"></a>

      Elimina
  11. ciao, bel post e devo farti davvero i complimenti perchè sei un grande!!!
    la mia domanda è: qualora volessi personalizzare il mio menu disegnandolo in photoshop come posso poi importarlo nel blog?
    mi spiego meglio, vorrei creare dei bottoni con un caratter particolare quindi dovrei inserire queste jpeg a mò di menu orizzontale e poi ogni bottone avrà il suo link... come si può fare? per capirci ho visto questa cosa su questo blog e vorrei riproporla sul mio:
    http://shabbychicinteriors.blogspot.it/

    grazie mille!

    RispondiElimina
    Risposte
    1. ah caspita francesca qui sopra ha chiesto la stessa cosa sorry non avevo letto :)

      Elimina
  12. Ciao!! io provo ad inserire il codice prima di ]]> ma evidentemente sbaglio qualcosa, perchè non funziona. Esattamente prima della riga vuol dire prima del codice stesso?
    grazie!

    RispondiElimina
    Risposte
    1. Ho analizzato il tuo modello nel blog
      http://lostilediartemide.blogspot.it/
      e il codice di questo articolo dovrebbe funzionare. Forse non lo incolli bene. Leggiti questo post
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      e guarda anche il video specialmente nella parte finale
      @#

      Elimina
    2. Ho seguito bene alla lettera, il video mi è stato utile per la questione della parentesi graffa. Però purtroppo già un'altra volta mi è capitato che i codici non funzionassero. Insieme ad una ragazza più esperta di me abbiamo appurato che il problema sta nell'ossatura del mio template: prima di arrivare a quello attuale, l'ho modificato una volta con il programma per template "artisteer" che probabilmente ha lasciato delle "tracce" e da allora capita che qualche codice non mi funzioni (ad esempio il bottone pin it che non si aggiunge). sai come posso individuare queste tracce ed eventualmente cancellarle?
      ti ringrazio :)

      Elimina
    3. Artisteer è usato molto per creare template soprattutto in una sua versione piratata con cui non si può salvare il lavoro svolto. Non l'ho mai neppure aperto quindi non ti posso dire nulla al riguardo.
      Secondo la mia modesta esperienza la cosa migliore è partire da un modello ufficiale di Blogger per poi aggiungere via via personalizzazioni e widget. Se in futuro pensi di cambiare template, pensaci :)
      @#

      Elimina
    4. Grazie per aver risposto. Soltanto una volta ho modificato il template con artisteer, poi sono tornata subito a blogger, modello semplice, ma spesso mi ritrovo a dover affrontare questi "blocchi" forse proprio a causa di codici precedenti che forse vanno in conflitto con i nuovi. Non so proprio che fare....intanto non si centrano le pagine del menu nemmeno con i codici CSS

      Elimina
  13. ti ringrazio per questo post!...se voglio inserire una linea superiore ed inferiore in questo menu come per esempio qui.... http://www.domainehome.com/..... come devo fare?
    grazie Francesca

    RispondiElimina
    Risposte
    1. Il link si riferisce a un sito su Wordpress che quindi non fa testo. Ho salvato il commento e magari posso vedere se trovo qualcosa (senza impegno)
      @#

      Elimina
    2. Ecco l'instanst post
      http://www.ideepercomputeredinternet.com/2013/08/blogger-menu-pagine-statiche-bordi.html
      @#

      Elimina
  14. ciao, grazie per i tuoi preziosi consigli. Una domanda: è possibile eliminare la griglia tra le varie pagine? vorrei che ci fosse il titolo delle pagine e basta. Grazie ancora!

    RispondiElimina
    Risposte
    1. Il sistema ci dovrebbe essere ma non mi viene nulla in mente e anche analizando con Ispeziona elmento non ho trovato nulla di utile
      @#

      Elimina
  15. E' possibile creare un menu "a tenda"?

    RispondiElimina
    Risposte
    1. Con le pagine statiche no. Poi di menù multilivello ce ne sono a bizzeffe
      http://www.ideepercomputeredinternet.com/2011/03/i-migliori-menu-per-blogger.html
      http://www.ideepercomputeredinternet.com/search/label/menu
      @#

      Elimina
  16. Ciao, io vorrei rimuovere i trattini grigi che ci sono tra una pagina e l'altra... sai come si fa?
    Grazie per i tuoi post sempre utili ed interessanti :)

    RispondiElimina
    Risposte
    1. Ho provato a analizzare il codice del tuo blog ma hai il destro del mouse disabilitato e quindi non l'ho potuto fare. Comunque si tratta di una modifica molto complicata che credo vada oltre le mie capacità
      @#

      Elimina
    2. Grazie comunque per la disponibilità! :)

      Elimina
  17. E' tutta la sera che provo ma nulla da fare...
    Potresti dare uno sguardo al codice per cortesia?

    http://incucinaconfilosofia.blogspot.it/

    RispondiElimina
    Risposte
    1. Prova con questo selettore

      .tabs-inner { ....}

      o con quest'altro

      div.region-inner.tabs-inner {...}

      poi tra le parentesi graffe ci metti le righe che credi più opportune seguendo le istruzioni del post
      @#

      Elimina
    2. Il tuo non è un modello ufficiale quindi ha un codice che conosce solo il suo autore.
      @#

      Elimina
    3. Purtroppo nulla...
      Grazie lo stesso per l'estrema gentilezza e disponibilità.

      Elimina
  18. Ciao, una domanda, ho una barra orizzontale di pagine e vorrei trasformarle in due menù a tendina, è possibile?

    RispondiElimina
    Risposte
    1. Il widget del menu delle pagine statiche ufficiale di Blogger può essere personalizzato ma non reso a due livelli, con tendina per intende
      @#

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

    RispondiElimina
  20. Ciao ho provato a incollare questo codice

    #PageList1 ul {
    margin-left:auto;
    margin-right:auto;
    }

    sopra alla riga

    ]]>


    ma il menu resta sempre allineato a sinistra

    grazie

    RispondiElimina
    Risposte
    1. Ho aperto il tuo blog che credo sia questo
      http://mylovelylittlerabbit.blogspot.it/
      Non puoi centrare una cosa che prende già tutto lo spazio e che anzi sta su più di due righe. Se per esempio tu avessi solo tre pagine statiche il menù si centrerebbe. Prova con questo codice
      #PageList1 ul, #PageList1 ul li {
      margin-left:auto;
      margin-right:auto;
      text-align:justify;
      }
      per vedere se si migliora
      @#

      Elimina
  21. Ciao Ernesto!

    Fammi una grande cortesia, questo è il mio blog www.thelooklover.blogspot.it
    Vedrai il menù, Home, About, My Looks, ecc
    E' da tempo che non mi piace più il carattere che ho usato e vorrei cambiarlo, ma andando su Personalizza, Avanzato, ecc ecc anche se modifico qualcosa non si modifica più nulla, nemmeno se clicco applica al blog...perchè??? Sto imapzzendo!

    Grazie infinite

    Paolo

    RispondiElimina
    Risposte
    1. La tua richiesta potrebbe interessare anche altri lettori. Salvo il tuo commento per poi vedere se ci posso fare un post (senza impegno). Seguimi nei prossimi giorni.
      @#

      Elimina
  22. Ciao, Ernesto... vorrei cambiare il colore di una solo pagina.... Cioè vorrei che la HOME fosse sempre rossa e che il resto delle pagine di un altro colore e che al passaggio le altre pagine si evidenziassero di rosso.
    Per capire guarda il menù di questo sito... http://allyssapermatalestari.blogspot.in/
    Questo è il mio blog http://www.plettrando.com/... che dici si può fare qualcosa?

    RispondiElimina
  23. Anche se clicco su un post la home deve rimanere rossa... invece al momento se vado su un post non è cosi...

    RispondiElimina
    Risposte
    1. Il blog che mi hai indicato ha un menù che non è quello delle pagine statiche ma di un altro genere, sul tipo di quello che ho io che infatti cambia colore quando si passa sopra agli elementi con il mouse. Guarda queste due raccolte per vedere se trovi qualcosa che ti piace
      http://www.ideepercomputeredinternet.com/2011/03/i-migliori-menu-per-blogger.html
      http://www.ideepercomputeredinternet.com/search/label/menu
      Altrimenti scarica quel modello se ti piace
      @#

      Elimina
    2. Vorrei utilizzare quel modello.. ma non riesco a capire come accedere alle pagine sinceramente....

      Elimina
    3. @# Puoi scaricarlo da qui
      http://arlinadesign.blogspot.it/2015/06/phantom-free-responsive-blogger-template.html
      andando su Download anche se si è obbligati a installare pure un installer e bisogna stare attenti a non a caricare anche programmi sponsor. Il menù non sono le pagine devi modificare il menù dal modello voce per voce e mettere i collegamenti al posto dei cancelletti #

      Elimina
  24. Ciao Ernesto... avrei da chiederti due cose su quest'articolo
    1) Come faccio a far aderire il menu con i bordi della pagina? (vd: http://blogsperimentale1334.blogspot.it/) qui non sono aderiti come vedi
    2) Si può inserire una sottolineatura tipo http://www.hdblog.it/?refresh_ce ???

    Grazie in anticipo...

    RispondiElimina
    Risposte
    1. non per forza di colori diversi la sottolineatura... anche di un solo colore va bene... basta che però sia distante dal testo...

      Elimina
    2. @# Prova con questo codice
      #PageList1 > div > ul > li a:hover {
      border-bottom:5px #036 solid !important;
      }
      ti avverto però che non ho testato

      Elimina
  25. Ciao, ho seguito i passaggi per centrare e dare una lunghezza definita al menù delle pagine, ma purtroppo come puoi vedere avanza sempre una microcasella che non riesco a eliminare (se diminuisco ancora la lunghezza l'ultima pagina va nella riga a capo). Si può eliminare in qualche modo la griglia per ovviare il problema? Grazie

    RispondiElimina
    Risposte
    1. @# Puoi aumentare la larghezza oppure diminuire il numero dei caratteri (es: Collabora invece di Collabora con noi) o ancora diminuire la dimensione dei caratteri dei titoli delle pagine tipo
      #PageList1 > div > ul {font-size:12px !important;}
      da incollare sopra alla riga con /b:skin

      Elimina
  26. ciao, io ho creato il menù come hai spiegato tu, e fin qui tutto bene. solo che adesso non riesco a modificarne la grandezza e a centrarlo.
    io cerco la riga ]]>, ma non me la trova...c'è solo .
    E' la stessa cosa? perchè anche se incollo il codice che mi hai dato non succede nulla.
    ciao e grazie
    Miriam

    RispondiElimina
    Risposte
    1. La riga c'è. Devi procedere in questo modo per trovarla. Vai intorno alla 15-20esima riga. Trova una sezione colorata di verde < b:skin > (senza spazi). Clicca sulla freccetta nera posta alla sua sinistra per visualizzare tutto il codice della sezione. La riga che cerchi è proprio l'ultima del codice che hai aperto. Comunque per trovarla clicca prima sull'area del codice poi digita Ctrl+F e incolla /b:skin nella casella di ricerca quindi pigia su Invio. Vedrai che verrà evidenziata la riga in oggetto. Se non hai capito come fare leggiti questo post e guardati il video
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      @#

      Elimina
    2. grazie mille!!!! mettevo tutto il codice anche con le parentesi quadre e non me lo trovava!!!

      Elimina
  27. Ciao Ernesto, altra domanda, il centramento vale anche per le visualizzazioni dinamiche?

    RispondiElimina
    Risposte
    1. No. I CSS dei modelli "normali" di Blogger sono completamente diversi da quelli per le Visualizzazioni Dinamiche che dipendono da molti fattori non ultimo quello che il lettore può decidere con quale dei modelli (Classic, Magazine, ecc)
      @#

      Elimina
  28. uff... a me non funziona..mi dice Errore di analisi XML, riga 678, colonna 7: The element type "b:skin" must be terminated by the matching end-tag "". come posso fare?

    RispondiElimina
    Risposte
    1. Non sei riuscita a cercare bene la riga. Leggi questo post
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      e guardati anche il video. Nella fattispecie devi cliccare sulla freccetta nera accanto a < b: skin > per visualizzare tutto il codice della sezione quindi scendere verso il basso fino a cercare la riga oppure usare Ctrl+F
      @#

      Elimina
  29. Ciao e grazie mille per il tuo Blog, avrei una domanda:vorrei che il menu del mio Blog fosse tutto nero senza quella orribile sfumatura ma quando vado a cambiare il colore nelle impostazioni c'è sempre. Come posso eliminarla e fare "tinta unita?" . Grazie, Chiara

    RispondiElimina
    Risposte
    1. Il tuo blog è questo?
      http://lericettedichiaralu.blogspot.it/
      Io non vedo menù di colore nero :(
      @#

      Elimina
  30. Salve Ernesto e grazie per la risposta,  si il mio Blog é quello...  Adesso come infatti vedi è arancione ma essendo il tema Semplice volevo modificarlo prima di inserire tutti i contenuti e modificarne il colore.  Il menù adesso è arancione sfumato di bianco ma se cambio il colore in nero rimane quella brutta sfumatura.
    Come posso modificarlo?
    Grazie,  Chiara

    RispondiElimina
    Risposte
    1. La sfumatura dipende dal modello che hai scelto. Si chiama anche gradiente. Nel modello dovrebbe esserci questo codice

      .tabs-inner .widget ul {
      background: #f8ddb6 url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;

      dove il colore è #f8ddb6 è il gradiente è dato dalla immagine ...gradients_light.png

      Dopo aver salvato il template prova a sostituire

      background: #f8ddb6 url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;

      con

      background: #f8ddb6;
      oppure
      background-color: #f8ddb6;

      per vedere quello che succede. Non ti posso assicurare nulla :)
      @#

      Elimina
  31. Salve Ernesto e grazie per la risposta,  si il mio Blog é quello...  Adesso come infatti vedi è arancione ma essendo il tema Semplice volevo modificarlo prima di inserire tutti i contenuti e modificarne il colore.  Il menù adesso è arancione sfumato di bianco ma se cambio il colore in nero rimane quella brutta sfumatura.
    Come posso modificarlo?
    Grazie,  Chiara

    RispondiElimina
  32. Fantastico funziona!!! Grazie mille gentilissimo

    RispondiElimina
  33. Buongiorno Ernesto, il tuo sito è sempre interessante e molto utile per apportare interessanti modifiche. Ti chiedo un aiuto aggiuntivo perchè è da tempo che cerco di apportare una modifica al mio blog senza risultati. Non riesco a trovare nessun post o articolo che possa aiutarmi ... spero che tu possa farlo.
    Il problema in sostanza è questo:
    per il mio blog ho utilizzato un modello preesistente di blogger (fantastico spa - il quinto modello da sinistra); la barra del menù, così come lo sfondo della barra laterale sono color grigio scuro trasparente. Quando cerco di personalizzare il colore, pur modificandolo la trasparenza scura altera la tinta che io scelgo e così non riesco a trovare la giusta combinazione che mi piaccia. sarebbe possibile in qualche modo eliminare la trasparenza grigio scuro ad impostare solo il colore da me scelto?
    Ti ringrazio molto

    RispondiElimina
    Risposte
    1. Il tuo profilo non è disponibile quindi non posso dare uno sguardo al tuo blog. Il sistema è quello di cercare il selettore univoco per apportare le modifiche usando uno di questi due tool
      http://www.ideepercomputeredinternet.com/2015/07/ispeziona-elemento-chrome-selettore-univoco-css-html.html
      http://www.ideepercomputeredinternet.com/2014/12/analizza-elemento-firefox.html
      @#

      Elimina
    2. Ciao Ernesto, il mio blog è www.lapoltronadellopsicologo.it, non so se da qui puoi vedere quello che intendo e aiutarmi. Io no ho capito bene cosa devo fare seguendo i tool di cui mi parli ...

      Elimina
    3. In tutta onestà non ho capito cosa intendi :)
      Il colore del tuo menù e della colonna laterale sinistra sono gli stessi e hanno codice #562764. Prova anche a leggere questo post
      http://www.ideepercomputeredinternet.com/2016/05/blogger-modello-gradiente-menu.html
      che non riguarda proprio quello che intendi tu (che non ho capito) ma che comunque ha a che fare con il colore del menù delle pagine statiche e in cui si spiega non come eliminare la trasparenza ma come eliminare la sfumatura
      @#

      Elimina
    4. :-D provo a spiegarti meglio. Il codice che inserisco per il colore della barra menù e barra laterale è #bf06f8 che in realtà è molto più chiaro di quello che appare. Questo è dovuto al fatto che la barra menù e laterale in originale sono grigio scuro trasparenti,e sommate al colore da me scelto risultano un viola scuro. Io vorrei togliere la trasparenza scura di default e poter impostare un colore a mia scelta.
      Cercando di fare qualcosa di simile a quanto scritto nel post che mi hai indicato ho trovato qs codice:
      body {
      font: normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
      color: #323232;
      Penso che sia quel colore lì da eliminare, ma non so proprio come fare perchè poi nell'html non lo ritrovo.

      Elimina
    5. Questa veramente non la avevo mai sentita :)
      Ho investigato il tuo codice. Hai un colore di sfondo di tutto il blog che è questo #bad4c0.
      Si trova in questa riga
      background: #bad4c0 none no-repeat scroll center center;
      Forse è questo colore che mischiandosi insieme all'altro modifica il risultato.
      La mia è solo una ipotesi. Se tenti delle modifiche prima ricordati di salvare il template.
      @#

      Elimina
    6. Puoi però risolvere anche in modo empirico. Apri questa pagina
      http://www.0to255.com/bf06f8
      Poi eventualmente leggiti questo post
      http://www.ideepercomputeredinternet.com/2012/03/come-trovare-tutte-le-tonalita-di-un.html
      Ci sono tutti i toni più chiari del colore che hai scelto. Magari inserendo questo colore #e18afc ti viene la colorazione giusta. Eventualmente puoi provare quelli di un tono più scuro o più chiaro per trovare quello giusto
      @#

      Elimina
  34. Ciao Ernesto, alla fine dopo vari tentativi ho optato per cambiare radicalmente il template del mio sito e con questo riesco a gestire ciò che voglio. Ti ringrazio comunque molto per l'aiuto

    RispondiElimina
  35. Ciao! :) Grazie del tutorial, mi ha aiutato a regolare quello che mi interessava, ma purtroppo non riesco a centrare il menu..in pratica sta tutto a destra e non capisco perchè. Avevo già letto questo tuo post per il mio primo blog e aveva funzionato, ma adesso sono in difficoltà.
    Il link è questo, magari riesci a capire se ho sbagliato qualcosa.. ><''

    http://mypersonaljourneytogetfit.blogspot.it/

    Grazie per la tua guida sempre affidabile ed efficace! ;) Franci

    RispondiElimina
    Risposte
    1. Nel tuo blog il menù non è quello delle pagine statiche. Per questo non funziona il codice. Si tratta di un menù che hai inserito in altro modo con un widget HTML con questo ID Scuolimenu

      Prova con questo codice

      #Scuolimenu ul {
      margin-left:auto;
      margin-right:auto;
      }

      oppure con quest'altro
      #Scuolimenu {margin-left:-100px;}
      per spostarlo sulla sinistra
      @#

      Elimina
    2. Ti ringrazio per la risposta velocissima, ha funzionato perfettamente e ora ho l'effetto che volevo..grazie! :D

      Elimina
  36. Ciao Ernesto, innanzitutto complimenti per i tuoi consigli che sono preziosissimi nella creazione, che sto facendo da solo, del mio blog e te ne sono infinitamente grato. il blog è http://romanzo-thriller-ilchiodonelpupazzo.blogspot.it. Ho il memu che oltre la prima riga non va nel senso che se aggiungo altre pagine statiche non si vedono sulla seconda riga o si scorgono appena. Come posso fare?

    RispondiElimina
    Risposte
    1. La seconda riga non è prevista anche se in alcuni siti viene utilizzata per aggiungere altre voci. Potresti modificare le voci e renderle più corte. P.e. 4° di copertina, Articoli invece di Miei Articoli online, ecc.
      Poi potresti diminuire la dimensione dei caratteri con questo codice
      #PageList1 > div > ul {font-size:12px !important;}
      da incollare con le modalità e nella posizionne illustrate nel post
      Potresti anche aggiungere questo codice
      #PageList1 ul {width:1300px !important;}
      inserendo un vincolo per la larghezza per vedere se le altre voci sono più visibili nella seconda riga
      @#

      Elimina
    2. Ok. Grazie. Provo ad incollare i codici

      Elimina
    3. Ho appena pubblicato un altro post su questo stesso tema
      http://www.ideepercomputeredinternet.com/2017/03/blogger-menu-pagine-statiche-personalizzazione.html
      che è più aggiornato
      @#

      Elimina
  37. Salve, non riesco ad utilizzare il codice per centrare il menù. Probabilmente anche io sbaglio ad incollare, ma non ho ben capito come fare e come risolvere il problema. Spero nel tuo aiuto. Grazie anticipatamente

    RispondiElimina
  38. Sei la seconda che in pochi giorni mi dice che non riesce a far funzionare questo codice. Comincio a pensare che sia cambiato qualcosa nel modello da quando ho pubblicato il post.
    Seguimi i prossimi giorni che riprenderò l'argomento facendo altri test
    @#

    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