Pubblicato il 25/10/15 - aggiornato il  | 6 commenti :

Come creare un menù orizzontale in Blogger senza codice.

Come creare un menù orizzontale in Blogger senza usare nessun codice ma solo il widget Elenco di Link.
Siete utenti di Blogger ma non amate molto operare con i codici? Sicuramente non siete una eccezione. Vi piacerebbe creare un menù orizzontale da mettere al posto di quello delle Pagine Statiche? Oppure volete metterlo insieme a quello magari sopra, oppure sotto?

Su Blogger è possibile operare un piccolo trucco per far diventare un orizzontale un elenco verticale. La ragione di questa modifica sta nei CSS specifici per le sezioni che stanno al di sopra dell'area del post e che vengono definite come Crosscol o Cross-Column. Queste sezioni sono presenti in tutti i modelli ufficiali di Blogger esclusi quelli del tipo a Visualizzazione Dinamica. Se avete un template scaricato da internet può capitare che questa sezione non ci sia.

Ricordo che si può creare il menù delle Pagine Statiche andando su Layout > Aggiungi un gadget > Base > Pagine per poi configurare il menù. Si possono selezionare solo alcune delle pagine che sono state pubblicate, si può modificare il loro ordine con il trascinamento del cursore e si può optare per mostrare il widget in verticale nella sidebar o in orizzontale sotto l'header cioè in una sezione Cross- Column o Crosscol


menù-pagine-statiche

L'ID del menù delle Pagine statiche è PageList1 e tramite i CSS possiamo sotto certi limiti riuscire a personalizzarlo. Nel menù che si viene a creare possiamo anche aggiungere dei link esterni al nostro sito. Andando su Layout > Pagine > Modifica si clicca su +Aggiungi un link esterno

link-esterno-pagine-statiche

per aggiungere una nuova voce digitando titolo e indirizzo poi si salva il link e widget.

CREARE UN NUOVO MENÙ ORIZZONTALE


Si va su Layout > Aggiungi un gadget > Base > Elenco di link e si inizia la configurazione

configurazione-elenco-link

Si sceglie Non eseguire l'ordinamento perché lo faremo noi tramite il cursore, si digita il nome del link e si incolla il suo URL quindi si clicca su Aggiungi link e si passa a un'altra voce del menù. Dopo essere andati su Salva si trascina l'elemento dell'Elenco di link in una sezione Crosscol

elenco-link

Si va quindi in alto su Salva disposizione. Il risultato sarà simile al seguente

wisdget-pagine-elenco-link

Si può scegliere di posizionare l'Elenco di link sopra o sotto al menù delle Pagine.

CASI PARTICOLARI


Se ci sono due sezioni Cross-Column come nello screenshot si può inserire un menù in ciascuna delle sezioni. Si possono anche inserire entrambi i menù nella stessa sezione se il modello lo permette. Per verificarlo cerchiamo su Modello > Modifica HTML la sezione in oggetto

crosscol

In questo caso come vedete è presente l'attributo  maxwidgets='1' che consente l'inserimento di soltanto un widget nella sezione. Basterà togliere 1 e lasciare in bianco in questo modo maxwidgets=' '  quindi si salva il modello e si potranno trascinare con il cursore entrambi i widget per posizionarli nella stessa sezione

menù-pagine-link

in modo da avere i due menù uno sotto l'altro

menù-pagine-elenco-link

Utilizzando gli strumenti Ispeziona Elemento di Chrome o Analizza Elemento di Firefox si possono personalizzare uno o entrambi i menù. Nel test preso in esame per esempio si potrebbe ridurre lo spazio tra i due menù incollando subito sopra alla riga ]]></b:skin> questo codice

#LinkList1 > div > ul {margin-top:-20px;}

che produce questo risultato

menù-pagine-elenco-link[4]
Altre modifiche e personalizzazioni le lascio alla intelligenza e alla creatività dei lettori.


6 commenti :

  1. Ciao, sto inserendo un menù nel mio blog. Ma quale è la differenza tra le varie sezioni? Ad esempio io ho Cross column 2 e Multi-colonne in alto, mentre in basso ho i vari Footer e Piè di pagina. Ma queste sezioni sono tutte uguali per i contenuti che posso inserire o hanno caratteristiche differenti? Grazie in anticipo

    RispondiElimina
    Risposte
    1. Hanno caratteristiche differenti. Se inserisci un elenco in Cros Column viene un menù mentre se lo inserisci in una sidebar diventa verticale. Ci sono diverse caratteristiche anche da Tema a Tema. L'unica è testare
      @#

      Elimina
  2. Ciao facendo in questo modo, utilizzando la versione mobile, il menù dei link non mi compare. Come posso fare? Avevo pensato anche di utilizzare due gadget pagina, ma nel mobile poi vengono due menù ed è molto scomodo, nonchè carino. Solutions? grazie

    RispondiElimina
    Risposte
    1. Per il mobile devi mettere un altro codice
      http://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
      Puoi usare anche un menù responsive cioè valido per il mobile e per il desktop
      http://www.ideepercomputeredinternet.com/2016/08/responsive-menu-blogger.html
      @#

      Elimina
  3. Ernesto buongiorno, ho finito tutto, ti avevo scritto in un altra sezione del tuo blog non so se ti ricordi, riguardava problemi con il modello, anche se ho ancora dei dubbi riguardo alcune impostazioni che dal design non me le cambia, adesso è migliorato anche esteticamente e per il momento mi accontento, però adesso mi lascia una sfumatura grigiastra nello sfondo del menu orizzontale nonostante abbia impostato la trasparenza, forse dipende dall'header che è personalizzato? Secondo te c'è un modo per renderlo uniforme con lo sfondo e centrarlo? Grazie

    RispondiElimina
    Risposte
    1. Come faccio a saperlo? Mi sopravvaluti :). Non conosco l'URL del tuo sito, non conosco come hai installato il menù e quale codice hai usato. Non sono così bravo 🙂
      @#

      Elimina

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