Pubblicato il 13/04/12e aggiornato il

Come creare un menù con Blogger senza usare codice HTML.

Come creare un menù per Blogger senza usare codice HTML, CSS o javascript.
In questo blog mi sono spesso occupato di menù per Blogger presentandone di tutti i tipi. Ho anche fatto una raccolta dei post con i migliori menù. Le esigenze in questo campo sono molto diverse. Ci sono coloro che preferiscono la semplicità e altri che invece amano menù molto sofisticati. Anche dal punto di vista grafico c'è chi preferisce un aspetto asciutto e chi invece ama effetti slide e personalizzazioni.

Con questo articolo voglio andare incontro a chi vuole creare un menù per il suo blog su Blogger ma che sia completamente digiuno di codice HTML. Fra i vari gadget ufficiali di Blogger c'è quello chiamato Elenco di link che ha la particolarità di configurarsi in verticale se inserito nelle sidebar e di mostrarsi invece in orizzontale se posizionato nella parte alta del layout subito sotto l'header.

Occorre quindi andare su Layout > Aggiungi un gadget > Elenco di link

elenco-di-link-blogger

Nella finestra successiva createvi il vostro menù incollando la voce che volete visualizzare insieme all'URL corrispondente. Potete scegliere delle pagine interne del blog come per esempio About o Privacy che riportano a post in cui illustrate le caratteristiche del sito e le norme sulla privacy. Si possono  anche usare pagine statiche dello stesso sito che potrebbero essere delle gallerie di foto o di video. E' però anche possibile inserire dei collegamenti esterni al sito come per esempio la Pagina Fan su Facebook, la Pagina Business su Google Plus, il nostro account Twitter o altro ancora.

Le voci così inserite possono essere ordinate in ordine alfabetico, in ordine alfabetico inverso oppure manualmente andando in basso e spostandole mediante le apposite frecce 
 
menù-blogger 

Il titolo del menù può essere lasciato vuoto così come il numero dei link da mostrare nell'elenco per visualizzarli tutti. Per inserire un nuovo elemento si va su URL nuovo sito e si incolla l'indirizzo, In Nome nuovo sito si digita la parola che si vuole visualizzare nel menù. Si va su Aggiungi link per terminare l'inserimento. In basso a sinistra saranno visibili i link che sono stati inseriti e che possono essere ordinati andando sulle frecce poste alla destra di ciascuno. Si clicca su Salva e si posiziona l'Elenco di link subito sotto l'Header del blog

menu-posizionamento-blogger

Se adesso aprite il blog avrete il vostro menù perfettamente funzionante. Se poi non siete ancora soddisfatti e volete procedere alla personalizzazione dell'aspetto utilizzando un po' di CSS procedete nel modo seguente. Anzitutto dovete acquisire l'ID del widget che dovrebbe essere LinkLIst1 ma potrebbe anche essere LinkList2 se si tratta del secondo elenco di link che avete inserito nel blog. Per verificarlo aprite il widget e visualizzatene l'indirizzo. L'ID del widget sarà visibile alla fine dell'URL

URL-ID-widget
e questa cosa vale per tutti i gadget di Blogger. Andate adesso su Modello > Modifica HTML > Procedi e cercate la riga ]]></b:skin> cliccando su F3 o su Ctrl+F. Subito sopra incollate un codice come questo

#LinkList1 {
background-color:#FDBCB7 !important;
}
#LinkList1 a:link {
text-decoration:none;
color:#003366 !important;
}
#LinkList1 a:visited {
text-decoration:none;
color:#D84931 !important;
}
#LinkList1 a:hover {
background-color:#940F04 !important;
text-decoration:none;
color:#FFFFFF !important;
}

dove al posto di LinkList1 ci potrebbe essere LinkList2 e dove i codici dei colori possono essere personalizzati a piacere. I blocchi di codice con a:visited e a:hover si riferiscono rispettivamente all'aspetto del menù per i link già visitati e per quelli puntati con il mouse

aspetto-menu-blogger[5]
Si va su Salva modello per rendere effettive le modifiche. Concludo insegnandovi anche un trucco per far aprire i collegamenti del menù in un altra scheda del browser. Ritornate su Modello > Modifica HTML > Procedi e espandete i modelli widget. Cercate con F3 o Ctrl+F il widget LinkList1. Avrà un codice simile a quello riportato qui sotto

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

In tale codice è stata evidenziata di rosso la riga

<a expr:href='data:link.target'>


che dovrà essere sostituita da quest'altra


<a expr:href='data:link.target' target='_blank'>


in modo da aggiungere il tag target='_blank' che serve proprio per aprire i link in un'altra scheda del browser. Ecco il relativo screenshot


aprire-link-altra-scheda

Si va nuovamente su Salva modello e tutti i link del menù si apriranno in un'altra scheda. Concludo ricordando che si può anche creare un menù utilizzando il widget delle pagine statiche.




21 commenti :

  1. Chiaramente il "multilivello" con questo metodo non è possibile, vero?

    grazie

    RispondiElimina
  2. @Ernesto Tirinnanzi
    ho un problema di trasformare molti link di grafica per appassionati nel mio blog in alto a sinistra in caselle simpatiche da collegare direttamente con i propri siti . So che da te c'è quella funzione ma il tuo sito è molto grande che al confronto l'oceano sembra.... una bacinella di acqua. Puoi aiutarmi? Senza toccare il modello template.
    Grazie mille!

    RispondiElimina
  3. @kamasa54
    Confesso di non aver compreso la domanda :)

    RispondiElimina
  4. Come si fa a ridurre la larghezza del menu standard delle pagine di blogger?
    Mi riferisco che creando ad esempio 2-3 pagine, sulla parte destra la striscia del menu rimane vuota ed è antiestetica, sai come si fa a ridurla?

    RispondiElimina
    Risposte
    1. Volevo dire lunghezza, ad esempio nel tuo meno dopo Tips&Tricks c'è lo spazio superfluo del menu, tecnicamente si può accorciare la barra?

      Elimina
    2. @Andrea
      Non lo so. Dovrei analizzare il CSS con Firebug e fare dei test. Sul momento non ti so dire.

      Elimina
    3. Capisco, bhe se un giorno lo farai crealo questo tipo di post :D

      Elimina
  5. Secondo te è normale che il menu standard delle pagine di blogger (template semplice).
    Le schede si illuminano (si selezionano) solo se col mouse lo seleziono da metà in sù, mentre che ci passo sopra da metà in giù è come se non fossero state cliccate.
    Negli altri blog con stesse misure, stesso template e stessa casella di ricerca inserita allo stesso modo mi funziona bene.
    Quale potrebbe essere il problema secondo te?

    RispondiElimina
    Risposte
    1. @AndreaSaruppo
      Non ne ho idea :) Onestamente non mi sembra un grosso problema

      Elimina
  6. Ho inserito nel mio blog alcune pagine con pulsanti menu trasformati in link che rimandano a post con determinati tag.
    Ho notato che con le pagine vere e proprie il pulsante del menu rimane evidenziato, come ho impostato, mentre i pulsanti che rimandano ad un link (seppur interno al blog) si evidenziano solo al passaggio del mouse.

    Esiste un modo per estendere la regola impostata per le pagine normali anche per quelle che rimandano ad un altro indirizzo web?

    Una buona giornata.

    RispondiElimina
    Risposte
    1. @TobiaAlberti
      Ho capito cosa intendi. Si tratta di una sottigliezza. Andrebbe analizzato il modello con Firebug
      http://www.ideepercomputeredinternet.com/2011/05/firebug-e-una-estensione-di-firefox-per.html
      Leggi anche questo
      http://www.ideepercomputeredinternet.com/2012/10/blogger-menu-pagine-altezza-larghezza-centrare-personalizzare.html

      Elimina
  7. Ciao navigando ho trovato questo menù....carino
    sai come implementarlo sul mio blog??? lo trovi a questo link gentianaismaili.blogspot.it/

    RispondiElimina
  8. @MarcoParrilla
    Puoi chiedere al proprietario del sito. Può darsi che faccia parte del modello.

    RispondiElimina
  9. Qualcuno sa dirmi come fare per cambiare il colore di sfondo dell'etichetta relativa alla raccolta di link? Ho impostato il widget affinché il menu compaia in orizzontale e lo sto configurando perché le varie linguette del menu indirizzino alla raccolta di post con una determinata etichetta, ma mi mette il colore delle linguette identico a quello delle linguette del widget "Pages" per le pagine statiche; cambia solo il colore del testo.
    Grazie a tutti e buone feste!

    RispondiElimina
    Risposte
    1. @CosmeticsAndMakeupReview
      Non so se ho ben compreso. Vorresti personalizzare il colore di tutte le schede per evidenziare meglio le etichette collegate? In questo caso penso ti possa essere utile questo post
      http://www.ideepercomputeredinternet.com/2012/08/menu-pagine-statiche-schede-sfondo-personalizzare.html

      Elimina
  10. Ciao! Molto utile questo post.
    Io ho fatto tutto...e alla fine mi viene il menu con scritte la varie voci che mi interessano, solo che ho un problema. Io vorrei che per ogni voce nel menu, quando clicca sulla voce mi si aprono i post riguardanti...(per es: se nel menu ho la voce "REVIEW", vorrei che cliccando su "REVIEW" mi si aprono tutti i post riguardanti le review. cosa devo fare? Io ho fatto quello che hai scirtto, e cliccando sulle varie voce del menu mi si apre si' un'altra pagina, ma uguale a quella precedente con tutti i post fatti fino adesso... nn suddivisi nelle voce che ho messo nel menu.... nn so se mi sono spiegata...

    RispondiElimina
    Risposte
    1. @# Devi mettere l'indirizzo della etichetta vale a dire
      http://myamya1982.blogspot.it/search/label/review
      dove al posto di review metti le etichette che vuoi

      Elimina
    2. Ho inserito l'indirizzo che mi hai detto nell'elenco link correggendo alla fine i vari nomi che ho bisogno, ed é uscito corretto. Solo che ora cliccando ad. es su Review mi dice che nn ci sono Post con Etichetta Review,... ho provato ad aggiungere ad un po' l'etichetta Review ma nn esce niente... (scusa sono un pochino negata...) ;o)

      Elimina
    3. Hhuuhhu sono riuscitaaa!!!! GRAAAZZIIIEEE!!! ;o)

      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.