Pubblicato il 15/07/12e aggiornato il

Come diminuire la larghezza del menù delle pagine statiche.

Come personalizzare su Blogger la larghezza del menù orizzontale creato con le pagine statiche e con altri link.
Su Blogger viene automaticamente creato un menù con tutte le pagine statiche che vengono pubblicate. La prima voce del menù è Home quindi a seguire tutte le altre in ordine di pubblicazione.

Questa funzionalità di Blogger è stata estesa ad altri collegamenti. E' quindi possibile creare un menù usando il widget delle pagine statiche con collegamenti a qualsiasi pagina web. Basta andare su Pagine > Nuova pagina > e scegliere Indirizzo web al posto di Pagina vuota.

Il menù delle pagine statiche può essere inserito in una sidebar e allora prenderà una forma di elenco verticale oppure sotto l'intestazione e, in questo caso, si visualizzerà per tutta la larghezza del template. Mi è stato chiesto in un commento se fosse possibile personalizzare questa larghezza.

menù-larghezza-pagine-statiche

Nella parte bassa dello screenshot precedente vedete un menù che si mostra solo fino alla fine delle voci che sono state inserite contrariamente a quello nella parte alta che invece si sviluppa per tutto il layout. Per configurare la larghezza del menù delle pagine statiche, dopo aver salvato il template, si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin> . Subito sopra si incolla il codice

#PageList1 ul{width:300px !important;}

Si va su Anteprima per vedere che aspetto prende e per tentativi si modifica il valore della larghezza in rosso fino a quando non siamo soddisfatti del risultato. Finalmente si salva il modello.

anteprima-blogger

Alternativamente a un valore assoluto possiamo inserire un valore della larghezza in percentuale

#PageList1 ul{width:40% !important;}




9 commenti :

  1. Grazie per avermi ascoltato, ottima guida e funzionante.
    Siccome a me interessava anche inserire una casella di ricerca nello parte del menu che ho tolto (ricerca di blogger oppure di google) per caso sai se sia possibile inserirla in quello spazio?

    RispondiElimina
    Risposte
    1. Se non è possibile inserire questa casella di ricerca,è possibile inserire magari una immagine...

      Elimina
    2. @Andrea
      Per inserire una immagine usa questo metodo
      http://www.ideepercomputeredinternet.com/2011/02/come-aggiungere-link-al-widget-delle.html

      L'immagine la puoi inserire con questo codice
      <li><a href='UEL_LINK'><img src="URL_IMMAGINE"></a></li>
      Per la casella di ricerca è più difficile
      http://www.ideepercomputeredinternet.com/2011/11/motore-ricerca-menu-casella-blogger-una.html

      Elimina
    3. Mi è piaciuta la tua risposta: è un tutorial per quelli che non si accontentano mai :D
      Si era proprio quello che cercavo (il secondo link), se non funziona la casella di ricerca opterò per l'immagine eheh grazias

      Elimina
  2. ciao! ho letto il tuo tutorial e m'è sembrato molto dettagliato e ben articolato! ma nonostante tutto non riesco seguendo tutta la procedura a ridurre la larghezza delle pagine statiche.
    hai consigli?
    Grazie mille in anticipo.
    Serena

    RispondiElimina
    Risposte
    1. @Lifeinpictures
      Per le larghezze delle pagine statiche leggi questo post
      http://www.ideepercomputeredinternet.com/2011/04/come-eliminare-le-sidebar-dalle-pagine.html

      Elimina
  3. Risposte
    1. Mi spiego meglio ,sono riuscito a fare rientrare il menu' in lunghezza solo dal margine destro non dal sinistro .
      Puoi dare un'occhiata. http://infoutili.blogspot.it/

      Gentilissimo come sempre .Grazie mille.

      Elimina
    2. Mi do la risposta da solo : http://www.ideepercomputeredinternet.com/2012/10/blogger-menu-pagine-altezza-larghezza-centrare-personalizzare.html

      Sei un punto di riferimento Ernesto.Grazie

      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.