Come creare un menu con sotto-livelli per Blogger how to create multiple menu on blogger 34


Moltissimi di voi vogliono creare un menu con sotto-categorie per Blogger, i commenti e le richieste via mail sono così tante che non so se vi ricordo tutti 😉 sorry eppoi mi devo davvero scusare con tutti voi, sono proprio un “frullatore di idee” ultimamente ho frullato molto… forse troppo.

Vi spiegherò in un modo così semplice che chiunque potrà aggiungere il suo menu pronto per le sottocategorie in qualche clic!
Per questo menu ho usato la risorsa gratuita postata da Mjntechtips perciò thanks a lot! Da questo link prelevate codice Css e Html e vedrete anche una demo dimostrativa. Vi aggiorno in diretta sugli sviluppi: ho chiesto l’autorizzazione a Manjunath e lui Grande Blogger, mi ha detto che il credito va invece a Red Team, perciò vi metto entrambi i link e lascio anche il primo! Mi è piaciuta la sua onestà, dote assai rara ultimamente. Thanks Manjunath!

Step 1 – Loggatevi al vostro bloggheruccio > www.blogger.com e cliccate sul titolo del vostro blog per entrare nella bacheca.
Step 2 –  Prelevate il codice Css dal link che vi ho postato sopra quindi da <style> fino a </style> copiandolo.
Step 3 – Dalla bacheca del vostro blog cliccate su Modello > Personalizza > Avanzato > Aggiungi Css e dal box che esce incollate il codice Css e cliccate su APPLICA AL BLOG.
Step 4 – Ritornate al blog con la risorsa e copiate i rimanente codice fino alla fine.

Aggiungo il codice per chiarezza

<br /> <ul id=”menu”> <li>
<a href=”Aggiungere qui il vostro url Home page“>Home</a></li>
<li> <a href=”Aggiungere qui url pagina Categorie“>Categorie</a>
<ul> <li> <a href=”Aggiungere qui url Pagina Torte“>Torte</a>
<ul> <li><a href=”Aggiungere qui url sotto-categoria Torte“>Item 11</a></li>
<li><a href=”URL-qui sotto-categoria“>Item 12</a></li>
<li><a href=”URL-sotto-categoria”>Item 13</a></li>

<li><a href=”URL-qui sotto-categoria “>Item 14</a></li> </ul> </li>
<li> <a href=”URL-qui pagina Biscotti“>Biscotti</a>
<ul> <li><a href=”URL-qui sotto-categorie biscotti“>Item 21</a></li>
<li><a href=”URL-qui sotto-categoria biscotti“>Item 22</a></li>
<li><a href=”URL-qui sotto-categoria biscotti“>Item 23</a></li>
<li><a href=”URL-qui categoria Biscotti“>Item 24</a></li> </ul> </li>
<li> <a href=”URL-qui pagina Dessert “>Dessert</a>
<ul> <li><a href=”URL-qui sotto-categoria dessert“>Item 31</a></li>
<li><a href=”URL-qui sotto-categoria dessert“>Item 32</a></li>
<li><a href=”URL-qui sotto-categoria dessert“>Item 33</a></li>
<li><a href=”URL-qui sotto-categoria dessert“>Item 34</a></li>
</ul> </li> <li> <a href=”URL-qui sotto-categoria Torte salate“>Torte salate</a>
<ul> <li><a href=”URL-qui sotto-categoria torte salate“>Item 41</a></li>
<li><a href=”URL-qui sotto-categoria Torte salate“>Item 42</a></li>
<li><a href=”URL-qui sotto-categoria Tort4e salate“>Item 43</a></li>
<li><a href=”URL-qui sotto-categoria Torte salate“>Item 44</a></li> </ul> </li> </ul> </li>
<li> <a href=”URL-qui pagina“>Gelati</a>
<ul> <li><a href=”URL-qui sotto-categoria gelati“>gelati 1</a></li>
<li><a href=”URL-sotto-categoria gelati“>gelati 2</a></li>
<li><a href=”URL-Here“>Gelati 3</a></li>
<li><a href=”URL-qui sottocategoria gelati“>Gelati 4</a></li> </ul> </li>
<li><a href=”URL-qui url Chi siamo“>Chi siamo</a></li>
<li><a href=”URL-qui url pagina Contatti“>Contatti</a></li>
<li><a href=”http://www.mjntech.blogspot.in/”>MJN Tech</a> </li> </ul> </div>
<script src=”http://code.jquery.com/jquery-latest.min.js” type=”text/javascript”></script> <script type=”text/javascript”> $(function() { if ($.browser.msie && $.browser.version.substr(0,1)<7) { $(‘li’).has(‘ul’).mouseover(function(){ $(this).children(‘ul’).css(‘visibility’,’visible’); }).mouseout(function(){ $(this).children(‘ul’).css(‘visibility’,’hidden’); }) } }); /* Mobile */ $(‘#menu-wrap’).prepend(‘<div id=”menu-trigger”>Menu</div>’); $(“#menu-trigger”).on(“click”, function(){ $(“#menu”).slideToggle(); }); // iPad var isiPad = navigator.userAgent.match(/iPad/i) != null; if (isiPad) $(‘#menu ul’).addClass(‘no-transition’); </script>

Step 5 Dalla bacheca del vostro blog cliccate su Modello > Modifica Html > cliccate su VAI AL WIDGET > e selezionate Header 1. Ora dovete aggiungere un’area widget sopra la testata del vostro blog, perché ho fatto delle prove e non viene visualizzato correttamente sotto, per fare questo leggete la guida per aggiungere widget sopra testata.
Step 6 Cliccate dal menu a sinistra della bacheca Blogger su LAYOUT e vedrete che sopra al titolo del vostro blog si è creata un’area widget cliccate su AGGIUNGI WIDGET > cercate il widget Aggiungi Html Java script e incollate nel box che si apre il codice copiato prima.
Qui viene la parte in cui dovete fare attenzione, dovete sostituire tutti i link con i vostri post e sotto-categorie. Quindi è sottinteso che voi abbiate già pubblicato tutti gli articoli necessari per creare il menu!

State ben attenti a come disponete i link. Per home s’intende la home page del vostro blog, quindi per intenderci il link del vostro blog, del tipo www.nomevostroblog.com

Per il resto vi spiego in breve, prendendo in considerazione il codice che vi ho suggerito.

Il menu è costituito dalle voci principali

Home – Categorie – Work – About – Contact

Nella home mettete il vostro link blog.
La voce Categorie è suddivisa in 4 livelli – che voi potrete ampliare naturalmente – Css – Graphic Design – Development tools – Web design.

Ognuna di queste ha altrettante sotto-categorie Css > ne ha a sua volta quattro definite come Item 11 – Item 12 – Item 13 – Item 14.
La sezione Item 14 è sviluppata su altre sotto-categorie Item 21 – Item 22 – Item 23 – Item 24.

Così via per il primo sottolivello Graphic Design e per gli altri due Development tools e Web design.
La voce menu About e Contact è giustamente ad un solo livello.

Ad ogni item e sotto item andrà sostituito il link alla categoria e sotto-categoria che volete. E’ un lavoro un po’ lungo, ma se avete le idee ben chiare e i post già pubblicati non è difficile, anzi. Alla fine avrete un menu di navigazione efficiente e operativo al massimo.

Ho fatto formale richiesta di poter utilizzare il codice nel tutorial, al massimo chiedetemi per mail e cercherò di aiutarvi se non riuscite a capire qualcosa 😉

Se utilizzate i miei post è gradito un link di ritorno, vedo che molti lo fanno, ma tantissimi del mestiere frugano e se ne vanno!!! Non che mi scandalizzi più di niente, ormai sono pronta a tutto! Le delusioni nella vita devono diventare una costante, purtroppo… d’altronde gli animali selvatici non si disturbano delle trappole che incontrano sulla loro strada, ma sono sempre pronti e guerrieri a dal loro battaglia! Sono fieri e orgogliosi di essere liberi e felici alla faccia di tutti quanti!

Questo post è in primis per Gianmario, Francesca, Noemi, Kevin, Caterina e… tutti gli altri! Grazie alle vostre domande, datemi il vostro feedback, alcuni di voi so che lo faranno solo per mail, quando avrete preso coraggio mandate i link vi pubblico volentieri.

A presto,

BY BLOGGHIDEE

 

 


Informazioni su blogghidee

Sono una blogger appassionata!!! Adoro alla follia le fiabe, illustrare le mie idee, fotografare, dipingere... E mi sono scoperta innamorata anche del codice! Qui raccolgo tutto ciò che ho scoperto sulla blogsfera, se volete comunicare con me per idee o collaborazioni cliccate su Contatti, rispondo sempre a tutti ehehe!


Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

This blog is kept spam free by WP-SpamFree.

34 commenti su “Come creare un menu con sotto-livelli per Blogger how to create multiple menu on blogger

  • Noemi

    Suppongo che la Noemi che citi in fondo all’artico sia io 😛 bhè io ti ringrazio davvero per tutti questi tutorial che fai per noi, personalmente posso dire che senza, il mio blog che stà venendo su “carino” sarebbe una vera ciofeca!! 😀
    Ho provato (tra mille difficoltà coi codici che non trovavo) a seguire questo tutorial e FORSE sono riuscita! Ovviamente sul mio blog di prova, appena avrò ancora un pò di tempo proverò a creare i sottomenù aggiungendo i vari collegamenti.
    Posso cambiarlo vero, lo stile e il colore di questo menù che ho creato? Sempre tramite html suppongo…..

  • admin L'autore dell'articolo

    @Noemi,
    sississi sei proprio tu Noemi!!! Ehehe Si puoi cambiare tutti colori basta sostituirli dove vedi il codice di riferimento! Ora sono curiosa, tu sperimenta e poi passa a linkare… a presto 😉

  • admin L'autore dell'articolo

    @rOk,
    ciao! Ho aggiunto il codice al punto 4. Fammi sapere se ci sei riuscito! A presto,

  • Ivana

    ma se volessi tornare indietro? ovvero…salvate le modifiche da te suggerite, come faccio ora a togliere il menu?

  • Carry

    Hey ciao, sei geniale, complimenti!
    Grazie a questo post forse forse riesco ad aiutare un mio amico con la creazione del suo blog sui telefilm e se ci riesco, ovviamente, dedicherà una nota di ringraziamento anche a te nella sua presentazione (così che anche gli altri possano conoscerti ed avvalersi del tuo grandioso aiuto!) Però, prima di applicare questo menu, volevamo chiederti una cosa… lui ha già iniziato a scrivere dei post, ma non di tutte le categorie che ha intenzione di inserire nel menu, tuttavia se ora crea tutte le categorie sarà poi possibile modificare il menu inserendo successivamente il link di quelle che sono ancora vuote?

  • admin L'autore dell'articolo

    @Carry
    be’ intanto grazie per tutti i complimenti.. 😀 😀
    Potrai inserire il link quando vorrai 🙂 Ti suggerisco però di inserire le categorie quando ci sono dei post da visualizzare, per una mera questione pratica: il lettore ama trovare ciò che cerca! 🙂
    Tienimi aggiornata e se vuoi iscriviti alla Community per farsi conoscere c’è il banner a lato, a presto!!! E grazie mille a voi!

  • Michael

    Salve, avrei bisogno di una mano…
    Sto cercando di creare un blog ma non sono molto esperto…anzi.
    Beh, in ogni caso, ho eseguito tutti i passi di questa dettagliata ed utile guida ma quando arrivo al punto di dover salvare il codice nel gadget “Configura HTML/JavaScript” non mi fa salvare.Clicco sul pulsante “salva” ma non succede nulla…
    Non capisco…aiutatemi per favore 🙂
    Grazie.

  • admin L'autore dell'articolo

    @Michael,
    benvenuto 😀
    é un po’ difficile capire dove sbagli, mandami uno screenshot per mail, se vuoi… Ti rispondo è free eh, tranquillo!!! Su contatti, trovi la mia mail.

  • filippo

    ciao innanzitutto complimenti per l’ottimo sito,utile e geniale, io avrei veramente bisogno di capire come fare questi menù a tendina, ho creato un solo post e una ventina di pagine che ho anche già messo in automatico in barra laterale,ora vorrei capire cosa sbaglio? perchè seguendo il tuo procedimento(+css,modifica header1,+gadjet html ) me le dispone tutte in alto a casaccio e non in barra ed a tendina,gli url delle pagine che metto me li da invalidi vorrei capire anche qui se li prendo nel modo giusto o meglio.. ,clicco chessò in isole europa alla barra da me creata in precedenza .. lo copio da li, e lo incollo dove dici ..poi il nome dove lo piazzo? cosasono gli item?elecategorie??finora io ho creato solo pagine e vorrei fare la tendina con quelle,,.inoltre vorrei sapere se c’è un modo di ottenere più pagine per il singolo post home page,(se vedessi come sono messe?capiresti cosa voglio fare potresti aiutarmi?sono in un vicolo ceco,saluti da cagliari

  • admin L'autore dell'articolo

    @Filippo,
    ciao e benvenuto. Grazie per i complimenti!!
    Ho dato un’occhiata al tuo blog non vedo gadget laterali con menu 😀
    Allora procediamo per gradi, ti consiglio la lettura di questi tutorial così ti chiarisci le idee su alcuni concetti di base:
    1) Cosa sono le etichette e come usarle, clicca qui.
    2) Creare un menu con pagine video tutorial, clicca qui.
    Se hai ancora dei dubbi torna pure e chiedi 😀
    Fammi sapere.
    A presto,

  • Gio

    Ciao, questa codice per questo menù è stata la mia salvezza.
    Mi chiedevo soltanto una cosa: per poterlo inserire in alto, fuori dal blog, come si potrebbe fare? Intendo tipo un menù flottante, sempre in alto…

  • blogghidee L'autore dell'articolo

    @Gio,
    ciao! Ho capito cosa intendi. Scriverò il tutorial prima possibile 😀 Ma ti dico già che c’è un una lista di attesa 😀
    A presto e grazie del feedback 😉

  • Gio

    Il sito dice che è visualizzabile anche dai cellulari, con una visualizzazione compatibile con i suddetti, ma a me non esce… C’è qualche modo? Grazie!

  • Laura

    Ciao! intanto grazie x le info.
    Io non riesco nella home del blog ad inserire gli elenchi delle ricette relativi alle etichette, per esempio nella Home trovi RISOTTI, io vorrei indicare i vari risotti presenti, come posso fare?
    grazie

  • Mila

    Ciao! Ho scoperto per caso il tuo blog! Ho seguito tutto il procedimento ma una volta inserito il codice modificato nel widget mi appare uno spazio vuoto sul banner di intestazione, nulla di più… 🙁 Dopo potrei aver sbagliato?
    Una cosa, cercando addshoelement (per inserire un widget sopra l’intestazione, come consigli) non mi appare il codice che hai scritto tu ma questo:


    Sarà qui il problema? Non sono molto pratica con l’html! Faccio quel che posso 😉

  • blogghidee L'autore dell'articolo

    @Laura,
    ciao e benvenuta, guarda questo articolo dove spiego come fare. Ti basterà seguire gli step per creare il link diretto 🙂 Fammi sapere. Ho provato a dare un’occhiata al tuo blog, ma risulta rimosso, eh no!!!

  • Laura

    Ciao, sono riuscita ad inserire i codici e lo spazio sopra il titolo del blog, ma non capisco se l’elenco deve rimanere così, e non riesco a capire come modificarlo in base al mio blog.
    Mi potresti aiutare?
    Articolo molto interessante il tuo. Per fortuna l’ho scoperto 🙂 Grazie 🙂

  • Laura

    Io ho seguito le istruzioni che hai descritto qui sopra 🙁 ora ho rimosso tutto per non lasciare il blog a metà 🙁
    Credo che per ora lascerò perdere 🙁
    devo studiare bene il tutto perché ora non ci capisco più nulla 🙁
    Grazie.

  • blogghidee L'autore dell'articolo

    @Laura
    lasciami il link del tuo blog e ci passo a dare un’occhiata, non perderti d’animo 😀 A presto,

  • Eleonora

    Ciao 🙂 finalmente ho trovato l’articolo che fa per me 🙂 ho creato da poco il mio blog: thedreamertravelerr.blogspot.com e vorrei modificarlo per renderlo bello come lo immagino.. vorrei inserire il menù ma senza sottocategorie.. ad esempio home, i miei viaggi, ecc ecc, e collegare, ad esempio alla categoria i miei viaggi, tutti i miei post relativi… helppp 🙂 sulla parte “tecnica” sono zero.

  • Clara

    Ciao,
    trovo il tuo articolo molto utile, solo che ancora non ho tutti i post pubblicati e pensavo di creare il menu per poterli inserire poi direttamente nelle categorie e sotto-categorie.
    C’è un modo?
    Altrimenti m’arrangio io 🙂 sarei molto contenta però se mi aiutassi nella maniera più semplice possibile perché non ci capisco un tubo di tecnologia 😛

    Grazie

  • miriam

    ciao, articolo molto chiaro.
    Ho solo un problema con una cosa, tu dici di inserire un url per la pagina “torte” che ha poi una serie di sottocategorie. che url dovrei mettere per fare una cosa del genere? cioè io intendo il mio menu come se le categorie fossero i titoli del menu, dove poi nella tendina ci sono le sottocategorie con i link ai vari post.
    non so se sono stata chiara.

  • blogghidee L'autore dell'articolo

    @Miriam,
    ciao 🙂 bene per ottenere il risultato che vuoi, come spiego nel tutorial, devi prima creare gli articoli corrispondenti alle sottocategorie, inserire in ogni articolo l’etichetta o parola chiave che per semplicita’ ti conviene denominare con lo stesso nome della sottocategoria.
    Infine aggiungere, come spiego nel tut, url nel menu.
    Fammi sapere se hai capito 🙂

  • miriam

    capito, più o meno. io gli articoli c’è li ho già tutti. ho provato a farlo, ma non capisco che URL devo mettere, prendendo come esempio il tuo, in ” Torte” dove poi ci sono 4 sottocategorie. Per quelle ho capito che devo inserire l’url degli articoli che voglio che vengano visualizzati, ma in Torte? in realtà non dovrei collegarlo a nessun post, perchè i post che interessano sono le sottocategorie.

  • blogghidee L'autore dell'articolo

    @Miriam,
    guarda il video tutorial che ho inserito come risorsa nel post.
    Se vuoi lasciare Torte solo come titolo basta non aggiungere nessun url all’interno e inserire solo gli url delle etichette/post. Nel video e’ tutto molto chiaro. Fammi sapere 😀

  • Alessandro

    Ciao, le tue spiegazioni sono molto esaustive, ma ho un problema: quando copio il css, non mi permette di salvarlo cliccando su applica al blog.
    Che faccio?

  • blogghidee L'autore dell'articolo

    @Alessandro,
    prova a fare così copia il codice, incollalo su un programmino di testo gratuito come “blocco note”, selezionalo e copialo, poi ritenta di incollarlo nel blog. Fammi sapere,

  • mary

    Buongiorno una domanda, vorrei creare un menu per esempio cosi composto:

    Home
    Schemi (sottodirectory : Barbie, Vestiti Bambole, dog)

    sul codice sopra, al posto di “categorie” metterei Schemi, ma non ho un url da assegnare, ma solo la parola e delle sottodirectory sotto come posso fare?

  • Stefania - Girovagandoconstefania

    Sono riuscita abbastanza facilmente ma senza creare file css. Ho solo creato un widget col codice mettendo gli url del mio sito e cambiando colore sfondo e testo. Funziona bene da desktop ma da mobile non si vede. Credo però che sia un problema di blogger perché il menù che avevo prima era fatto con un loro tool e perciò ottimizzato anche per mobile. Vorrei cambiare anche caratteri testo perché non mi piace lo stampatello ma devo capire quali codici variare!