Pubblicato il 17/07/14 - aggiornato il  | 57 commenti :

Menù orizzontale a discesa per Blogger con casella di ricerca e bottoni per social network.

Come installare un menù orizzontale su Blogger del tipo menù a discesa con casella di ricerca e con icone ai social network, alle pagine di contatto, a quella della privacy, al link dei feed, ecc.
Riprendo a proporre un menù per i vostri blog su Blogger dopo diverso tempo che non lo facevo. Si tratta di un menù piuttosto semplice per quello che riguarda la sua installazione ma molto completo visto che opzionalmente può mostrare anche i bottoni con collegamento ai social network e a pagine di particolare interesse e una casella di ricerca integrata. I colori possono essere facilmente adattati a quelli dei vostri siti modificando opportunamente i codici dei colori.

Si può visualizzare subito sopra o subito sotto l'Intestazione del blog cambiando la posizione in cui si incolla il codice. Nel caso in cui si decidesse di mostrarlo sotto l'Header ci sarebbero delle ovvie incompatibilità con il menù orizzontale di Blogger delle pagine statiche. Se si opta per questo menù in quella posizione questo secondo menù dovrà quindi essere tolto. Il menù è compatibile con tutti i browser più recenti. Prima di procedere con l'installazione occorre salvare il template per sicurezza.

menù-drop-down-blogger



Si va su Modello > Modifica HTML, si cerca la riga ]]></b:skin> e, subito sopra, si incolla 

/* Menù DropDown per Blogger */
#contatto-links {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    margin: auto;
    position: relative;
    width: 100%;
}
#contatto-links a {
    color: #4C9FEB;
}
#contatto-links a:hover {
    color: #3D85C6;
}
#menu-links {
    float: right;
    font-size: 12px;
    margin: 4px 10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFF;
}
#menu-links a {
    margin-left: 7px;
    padding-left: 8px;
    text-decoration: none;
}
#menu-links a:first-child {
    border-width: 0;
}
#main-menu {
    background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
    border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
    clear: both;
    height: 46px;
    padding-top: 1px;
}
#menu-princ {
    float: left;
}
#menu-princ a {
    text-decoration: none;
}
#menu-princ ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu-princ > ul > li {
    float: left;
    padding-bottom: 12px;
}
#menu-princ ul li a {
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
    border-color: #D1D1D1;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 0 0;
    color: #333333;
    display: block;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding: 11px 15px 10px;
    text-shadow: 0 1px 0 #FFF;
}
#menu-princ ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#menu-princ > ul > li.active > a {
    background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-bottom: 1px solid #2D81CC;
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    margin: -1px 0 -1px -1px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#menu-princ > ul > li.active > a:hover {
    background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#menu-princ > ul > li:first-child > a {
    border-radius: 0 0 0 5px;
}
#menu-princ ul ul {
    background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 #FFFFFF inset;
    height: 0;
    margin-top: 1px;
    opacity: 0;
    overflow: hidden;
    width: 240px;
    padding: 0;
    position: absolute;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#menu-princ ul li:hover ul  {
    margin-top: 0\2;
    height: auto;
    opacity: 1;
    visibility: visible;
}
#menu-princ ul ul a {
    border-right-width: 0;
    border-top: 1px solid #D1D1D1;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #444444;
    height: 24px;
    line-height: 24px;
    padding: 7px 12px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#menu-princ ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#menu-princ ul ul li:first-child a {
    border-top-width: 0;
}
#casella-ricerca {
    margin:8px 10px 0 0;
    float: right;
}
#casella-ricerca form {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_0YuNp_4j-qbuW_ntrbnxRLfFebhUvZJQZEnyoThSpcLaGgWsueS6W2h5gqXIwvr-Aywy3Mg1wThHwYOwDRJVEQ5OESMgtkB-DJUh3VTAX1h7jDUYtOWqoHz-X6aiIKvtmJJ1Iu516Co/s15-no/ricerca.gif") no-repeat scroll 5% 50% transparent;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
    height: 26px;
    padding: 0 25px;
    position: relative;
    width: 130px;
}
#menu-search form:hover {
    background-color: #F9F9F9;
}
#menu-search form input {
    color: #999999;
    font-size: 13px;
    height: 26px;
    text-shadow: 0 1px 0 #FFFFFF;
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    float: left;
    outline: medium none;
    padding: 0;
    width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
    color: #C4C4C4;
}

successivamente si deve decidere dove visualizzare il menù. Se si desidera visualizzarlo sopra l'Intestazione si deve cercare la riga <header> mentre se si desidera mostrarlo sotto all'Header va cercata la riga </header>. Nel primo caso il codice seguente va incollato subito sopra mentre nel secondo caso va incollato subito sotto. Il codice in oggetto è questo

<!-- DropDown Menu -->
<div id='contatto-links'>
    <div id='menu-links'>
        <a href='https://plus.google.com/+ErnestoTirinnanzi'><img height='24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3_UiTtakax08v8SHaFefBkELxGwv8MSGC3qd1UKHB1VA2acE2Oukx6I1GO4v7JKJouucGVyrHX3G6s9ZX73NwRYSEHKgV8UnjyV2h6T_xZuEuJCT-BxAezqN-AiO72h61PgBdo6qZ5_w/w40-h47-no/profilo32.png' title='About' width='24px'/></a>
        <a href='http://www.ideepercomputeredinternet.com/p/modulo-per-contattarmi.html'><img height='24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFsmfUORFC1or83EbSCCu-798TmpxW-ufrWC5tZafDDP0i_1s__MyrfBwotdCcARirrwseXBXM8eUH3P2xtxhEILDtsk8x1agcTIUpVQI5agavu7MlCp4aoLxjPlwF1mo_SsE3T8HihHQ/s40-no/email32.png' title='Contattami' width='24px'/></a>
                <a href='https://www.facebook.com/ideepercomputeredinternet'><img height='24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWGEGzeOf0mL_g8qZx4Z8HiIrZa9DMP6k0dhgsrSCKFPnr0XCBhAWxr9aqGdeN4EkPycyvwUr8tgEPX5ygI5StBmkM0zI6vsR5UuGpI4gLNyjk6lKOaDe45Ma572mkAvZ0-nKsv10S0I0/s40-no/facebook32.png' title='Facebook' width='24px'/></a>
<a href='https://twitter.com/parsifal32'><img height='24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAGgJaFdayEUPqrVp1d-b0zRu9SOUtvS1GBkIr4Bh-kM1Ri6DMrOHViagr2K7UZlSF1ggccNP24YIhHuJFz1jrK1mZHTpyuYtJ3J9_KbCSSbh1Pa-ZPMXuLps3iDxrx7fceJ4aL7Wqd18/s40-no/twitter32.png' title='Twitter' width='24px'/></a>
        <a href='https://plus.google.com/+ideepercomputeredinternet/'><img height='24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjOBs2H-apjLx6PsN1FRs4IoJ4hBXDTNKEPF2LYLMM2jfnsTUZ03HzFqCIQw9MNKdqoFz3WMxTn9TIzxYLohaZL9hM8qRKom2Kg0C9JU7eG83gYcRae5cyhhXE8j__fh7u99XVx_AUU2E/s40-no/google-page32.png' title='Google' width='24px'/></a>
        <a href='http://feeds.feedburner.com/ideepercomputeredinternet/zUQN'><img height='24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqzCbEsLoxdc1zCuVKq7jpYkOohwVgDrlduzNgOgo-1sgFHlquxq4X02hp9EXjpoEvNc3rtf4EhuGSii2UraxE2FmG1KGqOMmRikn3LNxUrZax5gVL5RLm9sPgBAEeBcTihcNkTuuE1ao/s40-no/rss32.png' title='Iscriviti ai feed' width='24px'/></a>
    </div>
    <div id='main-menu'>
        <nav id='menu-princ'>
            <ul>
              <li class='active'><a href='/'>Home</a></li>
                <li><a href='#'>Elemento 1</a>
                    <ul>
                        <li><a href='#'>Secondo livello 1</a></li>
                        <li><a href='#'>Secondo livello 2</a></li>
                        <li><a href='#'>Secondo livello 3</a></li>
                        <li><a href='#'>Secondo livello 4</a></li>
                        <li><a href='#'>Secondo livello 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Elemento 2</a>
                    <ul>
                        <li><a href='#'>Secondo livello 1</a></li>
                        <li><a href='#'>Secondo livello 2</a></li>
                        <li><a href='#'>Secondo livello 3</a></li>
                        <li><a href='#'>Secondo livello 4</a></li>
                        <li><a href='#'>Secondo livello 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Elemento 3</a>
                    <ul>
                        <li><a href='#'>Secondo livello 1</a></li>
                        <li><a href='#'>Secondo livello 2</a></li>
                        <li><a href='#'>Secondo livello 3</a></li>
                        <li><a href='#'>Secondo livello 4</a></li>
                        <li><a href='#'>Secondo livello 5</a></li>
                    </ul>
                </li>               
                <li><a href='#'>Elemento 4</a>
                     <ul>
                        <li><a href='#'>Secondo livello 1</a></li>
                        <li><a href='#'>Secondo livello 2</a></li>
                        <li><a href='#'>Secondo livello 3</a></li>
                        <li><a href='#'>Secondo livello 4</a></li>
                        <li><a href='#'>Secondo livello 5</a></li>
                    </ul>
                </li>
                <li><a href='#'> Voce 1</a></li>
                <li><a href='#'> Voce 2</a></li>
            </ul>
        </nav>
        <!-- Casella di ricerca -->
        <div id='casella-ricerca'>         
        <form action='/search' method='get'>
                <input autocomplete='off' name='q' placeholder='Cerca...' type='text' value=''/>
            </form>
        </div>
    </div>
</div>

Si salva il modello. Se non ci piacciono le icone con i collegamenti ai social network basta non inserire la parte di codice compresa tra le due righe evidenziate di giallo comprese. Mentre per non mostrare la casella di ricerca si elimina il codice compreso tra le due righe evidenziate di verde comprese

demo-menu-drop-drown

Per collegare il menù alle nostre pagine occorre sostituire i cancelletti ( # )con gli URL relativi. Le voci del menù principale e quelle dei menù secondari possono essere modificate a piacere così come pure la struttura del menù che comunque deve mantenere questa sintassi. Infine vanno sostituiti gli URL dei miei account a social network, a FeedBurner e il link al modulo di contatto con i vostri. Si possono anche aggiungere icone e collegamenti con altri social tipo Pinterest, Instagram, ecc. Per poterlo fare basta inserire nuove righe con questa sintassi 

<a href='URL LINK'><img height='24px' src='URL ICONA' title='Social' width='24px'/></a>

Naturalmente si può anche variare la dimensione delle icone scelta in 24 pixel.


57 commenti :

  1. Purtroppo oggi il "modello" di blogspot non mi funziona, altrimenti proverei a installare questo menu: sembra proprio bello e funzionale!

    RispondiElimina
  2. Ciao Ernesto, io vorrei mettere solo laa casella di ricerca nel menù già presente nel mio blog... Sai aiutarmi?
    Grazie :)

    RispondiElimina
    Risposte
    1. Questo commento è stato eliminato dall'autore.

      Elimina
    2. Ciao Layla, ti rispondo io:
      inserisci solamente la parte che va da "#casella-ricerca form {" a " width: 130px;
      }", per quanto riguarda il primo blocco, sempre da inserire sopra ]]>, nel tuo modello html;
      poi copia e incolla come widget html la parte compresa fra le due strisce verdi (comprese) dal secondo blocco di codice.
      Ciao.

      Elimina
  3. Anche se non collegato al post ho alcune domande che non riesco a trovare risposta.

    Possibile creare una sezione riservata con blogger , dove far entrare solo le persone con una password?

    Quale servizio esterno mi consigli per acquistare un dominio , visto che adesso blogger non offre più un suo servizio?

    Se non è possibile creare una sezione riservata direttamente con blogger conosci dei plugin di terze parti o altri servizi semplici online?

    Grazie

    Grazie

    RispondiElimina
    Risposte
    1. Si può creare uno o più post a cui accedere con una password
      http://www.ideepercomputeredinternet.com/2012/08/password-post-pagina-blogger.html
      http://www.ideepercomputeredinternet.com/2013/11/password-post-blogger-proteggere-contenuti.html
      @#

      Elimina
  4. Ciao io invece vorrei sapere un'altra cosa di blogger riguardante le etichette. Ho cercato qui ma non mi sembra di aver trovato nulla. In pratica io vorrei "etichettare" i post del mio blog. E fin qui nessun problema. Il fatto però é che sulla home page invece della voce "etichette" e poi sotto tutti i vari nomi vorrei poter mettere un immagine e poi cliccando su quell'immagine visualizzare tutti i post che hanno il nome di quell'etichetta. Non so se sono riuscita a spiegarmi. Grazie, Silvia.

    RispondiElimina
    Risposte
    1. Esistono dei metodi non tanto per mostrare delle immagini al posto del testo delle etichette ma inserfendo dei miglioramenti particolari.come per esempio questa
      http://www.ideepercomputeredinternet.com/2013/02/customized-label-cloud-blogger.html
      che è molto carina e con i colori personalizzabili a piacere. Sostituire ciadcuna etichetta con una immagine comporterebbe un codice per ciascuna etichetta
      @#

      Elimina
    2. Grazie. Ora vado a vedere il link

      Elimina
  5. Ciao Ernesto!
    Ho installato questo menu sul mio Blog, ma la larghezza occupa tutta la pagina Web e non riesco a modificarla, né cambiando le percentuali in width né sostituendo le stesse con i pixel. Sai dirmi come faare, visto che nel blog Demo la larghezza è ottimale e proporzionata?
    Grazie.

    RispondiElimina
    Risposte
    1. Alla fine dei CSS incolla questo codice
      div#main-menu {width:90% !important;}

      mente modifica il blocco con menu-links in questo modo

      #menu-links {
      float: right;
      font-size: 12px;
      margin: 4px#menu-links {
      float: right;
      font-size: 12px;
      margin: 4px 10px;
      overflow: hidden;
      text-shadow: 0 1px 0 #FFF;
      }
      overflow: hidden;
      text-shadow: 0 1px 0 #FFF;
      }

      Ovviamenrte puoi calibrare meglio il parametro 80% e il margine orizzontale di 80 pixel per le icone

      @#

      Elimina
    2. Ho messo 90% e non 80% però il concetto è quello

      Elimina
    3. Scusa ma, alla fine di quali CSS?

      Elimina
    4. adesso è tutto spostato a sx...

      Elimina
    5. Alla fine del primo codice. Ma dove lo hai messo? Sopra o sotto l'intestazione?

      Elimina
    6. Ho provato in entrambe le posizioni; ho anche pensato e provato a rimediare, ma senza risultato, che potesse dipendere dall'intestazione divisa in due (sempre utilizzando i tuoi codici, come per tutto il Blog).

      Elimina
    7. Niente, non va e non capisco perché, i tuoi codici hanno sempre funzionato sul mio Blog. Vorrei tenere questo menu a tutti i costi.

      Elimina
    8. Il codice funziona. Basta guardare la demo. Funzionano anche le variazioni che ti ho scritto nel commento precedente. C'è qualcosa nel tuo modello che dà fastidio. Probabilmente è l'intestazione divisa in due parti.

      Elimina
    9. Da buon autore Microsoft, sono testardo e, quindi, oggi ho ripreso i codici del menu ed ho risolto;
      come avevo scritto sopra il problema era l'intestazione divisa in due, ma non volevo rinunciare a questa modifica.
      Delle due variazioni che mi hai proposto, la seconda non serviva, mentre la prima regolava la larghezza del menu, ma lo spostava tutto a sx, quindi ho aggiunto, all'inizio del secondo codice( quello con i link) il tag div align="center", chiuso alla fine con /div. L'unica interferenza rimasta, per ora, è la chiusura dei livelli secondari se si aprono in una pagina con visualizzazione di una query o un'etichetta. Credo di risolvere cancellando le scritte di google, che mi sembra di aver visto da qualche parte qui, su ipcei. Grazie, comunque. Ciao.

      Elimina
    10. Come pensavo avevi scritto anche un post su come eliminare i messaggi o nasconderli. Risolto con la riga .status-msg-wrap {visibility:hidden;display:none, incollata in aggiungi CSS.
      Ciao.

      Elimina
  6. Da me proprio non funziona..
    Sarò troppo impedito per queste cose..

    RispondiElimina
  7. Tutorial facile e perfettamente funzionante, il migliore che io abbia visto della sua categoria... grazie!
    Ho una domanda: è possibile togliere da uno degli "elementi" il collegamento e lasciarlo come solo testo della categoria, lasciando i vari collegamenti nei "livelli" sottostanti? ho provato togliendo l' "ancoraggio" ma la scritta si disallinea dalle altre...
    Ancora grazie, saluti!

    RispondiElimina
    Risposte
    1. Basta che tu ci lasci il solo cancelletto # senza inserire alcun URL
      @#

      Elimina
  8. Ciao Ernesto , mi puoi aiutare?
    Come mai a me il menù viene fuori così?

    http://4.bp.blogspot.com/-BrI3es5KOXs/U-iVqVJBtcI/AAAAAAAAgdQ/6Gj61Ot6haw/s1600/Cattura.JPG

    RispondiElimina
    Risposte
    1. Significa che non sono stati recdepiti gli stili. Alcune volte succede che rimane anche una parentesi graffa insieme alla riga ]]>< /b:skin > in questo modo }]]>. Controlla che non sia il tuo caso. Prova anche a inserire il codice invece che sul Modello > Modifica HTML su Modello > Personalizza > Avanzato > Aggiungi CSS
      @#

      Elimina
    2. Non riesco , non va proprio e il la modifica Css non funziona da quando ho attivato e disattivato la versione per cellulari...
      Sarà colpa di java o qualche aggiornamento nel codice sbagliato?
      Aiutami per piacere...

      Elimina
    3. Purtroppo se non va c'è poco da fare. Non ti resta che cercare un altro menù
      @#

      Elimina
    4. Hai qualche menù simile da propormi?
      scusa il disturbo...

      Elimina
    5. Prova questo ma è fluttuante
      http://www.ideepercomputeredinternet.com/2013/08/fixed-drop-down-menu-blogger.html

      @#

      Elimina
  9. Ciao Ernesto!
    Da qualche tempo, credo da Crhome 37, la casella di ricerca, visualizzando il menu con Chrome, è sfasata, viene visualizzata in maniera non corretta; puoi verificarlo anche nella Demo.
    Ciò accade solo visualizzando il menu con Chrome, mentre con Firefox, IE, Opera o Safari, la visualizzazione è corretta.
    Immagino non si possa far nulla e credo che l'inconveniente sia dato da Google e la sua volontà di indurre gli utenti a inserire nei siti la propria casella di ricerca personalizzata.
    Volevo segnalartelo e chiederti se, invece, secondo te c'è una soluzione.
    Buon lavoro.
    Ciao.

    RispondiElimina
    Risposte
    1. Onestamente questo va aldilà delle mie competenze :)

      Elimina
    2. E' come pensavo; la casella vera e propria è quella di blogger e non varia in dimensioni, ma è possibile variare quelle della parte esterna (in grigio e con la lente).
      Aumentando il valore di Width da 130 a 230, la casella rimane al centro della parte esterna ed il risultato, identico nella visualizzazione in tutti i browser, è anche, a parer mio, più gradevole.
      Grazie, comunque, per la risposta e spero di esser utile ad utenti che riscontrano lo stesso problema.
      Ciao.

      Elimina
  10. Cambiare colore o eliminare il colore? Comunque la prima voce Home è colorata in quel modo perché è quella attiva. Devi controllare i CSS come questo
    #menu-princ > ul > li.active > a:hover {
    che determinano l'aspetto della finestra attiva tramite il tag active per poi modificare i colori. In questo blocco c'è un gradiente vale a dire una sfumatura tra questi due colori
    (#499FEE, #3F96E5) che puoi modificare. Ci sono più righe, una ciascuna per i principali browser
    @#

    RispondiElimina
  11. Ciao Ernesto, vorrei poter articolare il menu su un ulteriore livello
    1.
    1.1
    1.1.1
    1.1.1.1
    1.1.1.2
    1.1.2
    1.1.3

    etc.

    Mi puoi dare un'indicazione?

    RispondiElimina
    Risposte
    1. In questo menù non c'è la possibilità di mettere un terzo livello
      @#

      Elimina
    2. Grazie, Ernesto!
      Complimenti per lo splendido lavoro che stai facendo!

      Elimina
  12. Ciao Ernesto, sto provando a inserire questo menu e funziona. Però quando vado ad esempio su Elemento2 si apre la tendina ma se scorro in giù per cliccare ad esempio su Secondo livello 2 o Secondo livello 3 mi si chiude (scompare e devo andare di nuovo col mouse su Elemento2). C'è un modo per tenerla aperta?
    Grazie mille.

    RispondiElimina
    Risposte
    1. @# Dipende dal modello. Prova a modificare questi codici
      height: 25px;
      line-height: 25px;
      con per esempio
      height: 28px;
      line-height: 28px;
      Per coerenza aggiungi qualche pixel anche a
      height: 24px;
      line-height: 24px;
      Non so però se funzionerà

      Elimina
    2. Ho risolto il problema inserendo una foto sotto al menu. (Sto usando un blog di prova per non fare pasticci, e quando sarà tutto a posto proverò a mettere il menu nel blog).
      Ora ho un'altra domanda: qual è la parte di codice che fa colorare la casella HOME di azzurro?
      Grazie come sempre per la tua disponibilità.

      Elimina
    3. Se non ti piace prova a togliere questa stringa
      class='active'
      dalla riga dopo < nav id='menu-princ' >
      < ul >
      Quella parte di codice serve per la pagina attiva
      @#

      Elimina
  13. Ciao Ernesto, sto provando il menu, però ho notato che da mobile non si vede, come devo impostare il tema nella parte mobile del blog?
    Grazie

    RispondiElimina
  14. Ho risolto, https://provamenuh725.blogspot.it/?m=1
    Ma non si adatta bene,forse perché ho tolto la casella di ricerca?

    RispondiElimina
    Risposte
    1. In linea di massima i menù funzionano solo nella versione desktop se non è specificato altrimenti. Per la versione mobile si deve pensare a un altro menù, più compatto, avendo meno spazio. Ti linko alcune risorse.
      1) Menù per il mobile
      http://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
      2) Menù multilivello per il mobile con casella di ricerca
      http://www.ideepercomputeredinternet.com/2017/03/blogger-mobile-multilevel-menu.html
      3) Menù Responsive per desktop e mobile
      http://www.ideepercomputeredinternet.com/2016/08/responsive-menu-blogger.html
      4) Menù responsive e flottante
      http://www.ideepercomputeredinternet.com/2017/01/blogger-menu-responsive-floating.html
      @#

      Elimina
  15. ciao Ernesto, io ho incollato il code del menu sopra e subito sotto mi rimane uno spazio, vorrei posizionarlo come il tuo ma non ci riesco in nessun modo. Mi puoi aiutare?
    Grazie

    RispondiElimina
    Risposte
    1. Prova a incollare questo codice

      <div style='margin-top:-50px;'/>

      dopo l'ultimo </div> del secondo codice, dove puoi personalizzare il valore.
      P.S. Non ho testato e non so se funzionerà
      @#

      Elimina
  16. Ciao, ho risolto inserendo
    margin-top:-50px;
    Nel css 😊
    Grazie

    RispondiElimina
  17. Ciao, ho installato questo menù, ma viene decentrato e spostato sulla sinistra. come devo modificare il codice per centrarlo e farlo largo quando l'impaginazione? grazie

    RispondiElimina
    Risposte
    1. Prova a incollare la riga
      <div align='center'>
      prima della riga
      <div id='main-menu'>
      nel secondo codice, e il tag
      </div>
      dopo l'ultimo dei tre tag
      </div>
      cioè alla fine del codice. Nella Demo però il menù è centrato quindi non so perché nel tuo template si sposta sulla sinistra
      @#

      Elimina
    2. molte grazie! mi è stato utile posizionare div align='center' sopra a div id='contatto-links' e in #main-menu{width: 100%; z-index: 9999;
      } sostituire il 100% con 960px.

      Elimina
  18. Salve Ernesto. Un menu di questo genere può essere gestito dal solo gadget html/javascript senza la necessità di inserire codici nel modello, onde evitare pasticci per i meno esperti? Grazie.

    RispondiElimina
    Risposte
    1. Puoi provare. Incolla in un gadget HTML/Javascript il primo codice mettendoci all'inizio il tag
      <style> e alla fine quello </style>
      Poi, subito sotto incolli il secondo codice. Infine lo posizioni subito sopra all'elemento Post sul blog in Layout
      @#

      Elimina
    2. Si, pare funzioni. Grazie. :)

      Elimina
  19. provando a usare la casella di ricerca ho visto che mi dà come risultato tutti i post interi contenenti la parola cercata, che però non è evidenziata in alcun modo. come posso evidenziare i risultati di ricerca?

    RispondiElimina
  20. Mi pare che tu avesi già fatto questa domanda e non ti avevo risposto. Può capitare che non risponda perché una domanda mi sfugge ma mi capita di rado. In questo caso non ho risposto perché la domanda non l'ho ben compresa e perché i risultati di ricerca non possono essere personalizzati, non dipendono da noi. L'unica personalizzazione che sono riuscito a fare è questa
    https://www.ideepercomputeredinternet.com/2016/06/blogger-widget-ricerca-sfondo-risultati.html
    @#

    RispondiElimina
    Risposte
    1. provo a spiegare: cercando una parola, si aprono come risultato tutti gli INTERI post uno dopo l'altro, senza che la parola chiave sia evidenziata in alcun modo. succede sia se uso la casella di ricerca di questo menù, sia quella del widget predefinito di blogger...

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy