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

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

 

 

Discussion

  1. admin
  2. rOk
  3. admin
  4. Ivana
  5. Ivana
  6. admin
  7. Carry
  8. Michael
  9. Gio
  10. Gio
  11. Clara
  12. miriam
  13. miriam

Leave a Reply

This blog is kept spam free by WP-SpamFree.