List-O-Matic è veramente l'ideale per tutti coloro che vogliono creare un menù originale per il proprio blog e non masticano molto codice HTML e Javascript. E' il sito stesso che crea il codice, quello che l'utente deve fare è inserire
- Il nome delle voci principali
- Il nome delle voci di secondo livello
- I link delle rispettive pagine
- Scegliere lo stile del menù
Ma andiamo con ordine e osservate il seguente screenshot
In Link Text si digita l'anchor text della voce del menù mentre in AddressURL si inserisce il suo indirizzo. Se si desidera che una voce del menù abbia dei sottomenù si mette il segno di spunta e si inseriscono i dati relativi al nome e all'URL. Per aggiungere una voce principale si clicca invece sul link "Add topo level navigation item".
Non ci sono limiti per numero di voci di primo livello ne per quelle di secondo livello. Quando abbiamo inserito tutte le voci che ci servono possiamo cliccare su "Preview the markup" per vederne l'anteprima e successivamente andare su "I'm done. Show me the styles".
Si può quindi selezionare se crearlo verticale, da inserire in una sidebar, o orizzontale da mettere sotto l'header. Ci sono tre opzioni di colore e forma a disposizione
Infine si clicca su "Show me the markup". Verranno generati due blocchi di codice. Quello CSS e quello HTML, andranno copiati entrambi e salvati in un file di testo
Per inserire questo menù nel modello dobbiamo andare in Layout >Modifica HTML e cercare la riga
]]></b:skin>
Immediatamente sopra va incollato il codice CSS copiato da List-O-Matic. Per riconoscerlo si può mettere in mezzo a due commenti come, per esempio <!--INIZIO CODICE MENU--> e <!--FINE CODICE MENU-->, come mostrato nello screenshot
Si salva il modello e si va su Layout > Elementi pagina > Aggiungi un gadget HML/Javascript, dove si incolla, in Sezioni del sito il codice HTML appena copiato. Si clicca su Salva e con il drag & drop si posiziona l'elemento nella posizione desiderata. Per vedere una demo andate nel blog Pagine di Navigazione.
Altri menù presentati in questo blog sono stati
Allora finalmente ho risolto! Con questo tuo articolo e quindi in questo modo sono riuscita a mettere il menu orizzontale a tendina... e l'ho anche personalizzato nei colori modificando il codice css caricato nell'html del blog... solo volevo chiederti x mettere le scritte in grassetto dove devo modificare e cosa devo scrivere?
RispondiEliminaGrazie, come sempre
Per le scritte in grassetto prova a inserirle tra i tag (b) e (/b) dove al posto delle parentesi devi mettere il segno di minore e maggiore.
RispondiEliminaNon so se funzionerà ma puoi provare.
Ciao
ok Capo agli ordini! :D grazie :) kiss
RispondiEliminaSalve, come si elimina il fatto che quando passo sopra il menu il contenuto del blog si sposta più in giù e il menù non si sovrappone al contenuto? Spero che mi sono spiegato! Quale riga del CSS va cambiata?
RispondiElimina@Antichitesori2010
RispondiEliminaProva a aggiungere nel CSS la proprietà z-index. Segui questo post
http://www.ideepercomputeredinternet.com/2011/06/come-posizionare-e-stabilire-l-di.html
prova a mettere
z-index:100;
dove c'è la pseudo classe hover che determina il comportamento al passaggio del mouse.
Mentre per lo spostamento del contenuto non saprei dirti.
Scusami, ma gli URL relativi alle voci di secondo livello dove li prendo? P.S. sono un po' incapace lo so :)
RispondiEliminaGli URL sono gli indirizzi dei post o delle pagine che vuoi mettere nel menù. Basta copiarli nella barra del browser. Per eampio questo post ha l'URL seguente
Eliminahttp://www.ideepercomputeredinternet.com/2010/02/list-o-matic-e-un-servizio-online-per.html
@#