| Blogger : Aggiungere barra di navigazione con menu a tendina - Guide informatica

Blogger : Aggiungere barra di navigazione con menu a tendina


Per creare menu 
di navigazione a tendina  con sottomenu sul modello di blogger non è troppo difficile.


Per rendere più facile le cose seguite passo passo questa guida :

  1. Accedi a blogger con il tuo ID

  2. Fare clic su Layout

  3. Fare clic su Modifica HTML

  4. Prima di modificare il modello, vi consiglio di scaricarlo completamente prima e, se si commette un errore si puo` sempre ritornare indietro.

  5. Ora cliccare su espandi widget in alto a sinistra e cercare con (ctrl+F):  ]]> </ b: skin> e aggiungere subito dopo questi codici Css. Potrebbe essere necessario regolare la larghezza, il colore e l'immagine url con uno vostro personalizzato, perché il carattere di ogni modello è diverso da un altro.
  6. /* ----- NAVBAR MENU ----- */
    #NavbarMenu {

    width: 980 px;
    height: 35px;
    background:#99C9FF url(http://lh3.ggpht.com/_FnaS8cIU2Yw/Sfx5s4I_f9I/AAAAAAAAACc/z5BMLSJUVlQ/s800/navbar.gif ) repeat-x top;
    color: #3D81EE
    margin: 0 auto 0;
    padding: 0;
    font: bold 11px Arial, Tahoma, Verdana;
    border-top: 1px solid #AFAFAF;
    border-bottom: 1px solid #FFFFFF;
    }
    #NavbarMenuleft {
    width: 680px;
    float: left;
    margin: 0;
    padding: 0;
    }
    #nav {
    margin: 0;
    padding: 0;
    }
    #nav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #nav li {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #nav li a, #nav li a:link, #nav li a:visited {
    color: #3D81EE;
    display: block;
    text-transform: capitalize;
    margin: 0;
    padding: 9px 15px 8px;
    font: normal 15px Georgia, Times New Roman;
    }
    #nav li a:hover, #nav li a:active {
    background:#99C9FF;
    color: #3D81EE;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #3D81EE url(http://lh3.ggpht.com/_FnaS8cIU2Yw/Sfx5s4I_f9I/AAAAAAAAACc/z5BMLSJUVlQ/s800/navbar.gif ) repeat-x top;
    width: 150px;
    color: #000;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #99C9FF;
    border-left: 1px solid #99C9FF;
    border-right: 1px solid #99C9FF;
    font: normal 14px Georgia, Times New Roman;
    }

    #nav li li a:hover, #nav li li a:active {
    background: #99C9FF;
    color: #3D81EE;
    padding: 7px 10px;
    }
    #nav li {
    float: left;
    padding: 0;
    }
    #nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
    }
    #nav li ul a {
    width: 140px;
    }
    #nav li ul ul {
    margin: -32px 0 0 171px;
    }
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
    }
    #nav li:hover, #nav li.sfhover {
    position: static;
    }

  7. Dopo di che, cercare questo codice
  8. <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title=' Your Blog Title (Header)' type='Header'/>
    </b:section>
    </div> 

    E aggiungere i seguenti codici subito dopo:
    <div id='NavbarMenu'>
    <div id='NavbarMenuleft'>
    <ul id='nav'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><a href='http://www.guide-informatica.com/search/label/News'>News</a></li>
    <li><a href='http://www.guide-informatica.com/search/label/All%20Software '>Software</a>
    <ul>
    <li><a href='com/search/label/Anti%20Virus%20Software '>Antivirus</a></li>
    <li><a href='.com/search/label/Audio%20and%20Video%20Software '>Audio and Video</a></li>
    <li><a href='.com/search/label/Desktop%20Enhancements '>Desktop Enhancements</a></li>
    <li><a href='.com/search/label/Graphic%20and%20Web%20Design '>Graphic and Web Design</a></li>
    <li><a href='#'>Internet</a>
    <ul>
    </div>

    </div> <!-- end navbar --> 

  9. Ora dovrete modificare tutti i link ,quelli segnati in rosso con i vostri link di una sezione che volete mostrare (ad esempio antivirus e affianco scrivere il nome che desideriamo)
  10. Ora salviamo le modifiche e vediamo com'e` !
  11. Per modificarlo al meglio (colori,stile ecc)vi consiglio di farlo con molta precisione e lentezza 
Per qualsiasi problema lasciare un commento
  • Commenti Blogger
  • Commenti Facebook

5 commenti:

  1. Ciao,
    ho provato ad aggiungere la barra, ma data la mia assoluta ignoranza nella materia non ci sono riuscita. Vorrei sapere se secondo te il problema può essere che sul mio blog ho scelto una visualizzazione dinamica anziché una statica? In effetti non riesco neanche a visualizzare una immagine... che però risulta correttamente caricata...
    Grazie

    RispondiElimina
  2. prova con una visualizzazione statica e non dinamica.

    Fammi sapere

    RispondiElimina
  3. Ciao , ho provato i tuoi suggerimenti ma in relazione al Punto 6, nel codice nel Modello SImple non c'e' la riga di codice ....id='header-wrapper'>. Ho comunque trovato

    ed ho introdotto il codice quando ho trovato il primo " ...." .Ma ovviamente devo aver sbagliato qualcosa in quanto la visualizzazione dà errore HTML. SE vuoi/puoi posso inviarti il codice HTML (comunque è quello del modello SIMPLE?
    Grazie e a presto

    RispondiElimina
    Risposte
    1. è l'aggiornamento di blogger devi:
      1- Andare su blogger, cliccare layout, cliccare designer modelli (in alto a destra prima delle finestre)
      2- Cliccare su "Avanzato", scorrere fino in fondo e cliccare "aggiungi CSS" e aggiungere li il punto 5
      3- Andare su layout cliccare "aggiungi gadget", cliccare "HTML javascript", e inserire il punto 6
      Ed è fatta

      Elimina
  4. Ciao! il tuo articolo mi è stato molto utile in quanto dopo diversi tentativi il tuo è l'unico menu a discesa che sono riuscita a far funzionare sul mio sito/blog, perciò prima di tutto: GRAZIE!
    Ho però un quesito da porti: se volessi aggiungere un submenu, cosa devo modificare? intendo "un menu del menu" solo per alcune voci, un sottomenu del menu :) Ci sto sbattendo la testa da giorni, sapresti aiutarmi? Il mio blog è al link http://blog.ahnia.com e puoi vedere la barra del menu funzionante, ma per sistemare tutto il "materiale" nel menu ho necessità di aggiungere un "livello", mi puoi aiutare? Grazie, in anticipo :)

    RispondiElimina

Item Reviewed: Blogger : Aggiungere barra di navigazione con menu a tendina Rating: 5 Reviewed By: Stefano Izzo