Pubblicato il 14/08/14e aggiornato il

Menù fluttuante con icone sociali e casella di ricerca.

Come installare in un blog o in una qualsiasi pagina web un menù fluttuante con icone con collegamenti a social network e casella di ricerca.
Visto il grande successo del menù flottante presentato circa un anno fa ho pensato di integrare voci del menù e icone dei social network con una casella di ricerca in cui digitare opportune parole chiave per visualizzare i post corrispondenti.

Si tratta di un menù che non ha javascript e che quindi potrà essere visualizzato da molti browser anche di dispositivi mobili. Una particolarità è che si tratta di un menù flottante che rimane sempre al top della pagina anche quanto si scrolla verso il basso. Questo significa che sarà comunque nascosta la Navbar di Blogger anche nel caso in cui non si sia già fatto. Un'altra particolarità molto interessante è che questo menù non contiene dei tag di Blogger specifici e quindi può essere installato in qualsiasi pagina web o in un blog di tutte le piattaforme che abbiano un Editor del Tema.

menù-flutttuante-casella-ricerxa-icone-sociali

Se si ha un blog su Blogger si va su Modello > Modifica HTML e si cerca la riga </head>. Tale riga esiste comunque in tutte le pagine HTML e quindi potrà essere trovata anche in altri blog. Il codice seguente va incollato subito sotto a tale riga e non sopra come siete soliti fare 

<!-- Menu Flottante con icone social e casella di ricerca - Inizio -->
<style>
#float_main{
  width:100%;
  height:40px;
  display:block;
  padding:0;
  margin:0 0 22px 0;
z-index:100;
  top:0px;
left:0px;
position:fixed;
box-shadow:2px 2px 5px  #333; /* Ombreggiatura */
 -moz-box-box-shadow:2px 2px 5px  #333;
-web-kit-box-shadow:2px 2px 5px  #333;
-goog-ms-box-shadow:2px 2px 5px  #333;
background:#191919; /* Colore sfondo menu */
 }
#float_nav{
  float:left;
  width:700px;
  height:40px;
  display:block;
  padding:0;
  margin-left:40px;
}
#float_nav ul{
  float:left;
  margin:0;
  padding:0;
}
#float_nav li{
  float:left;
  list-style:none;
  line-height:40px;
  margin:0;
  padding:0
background:#191919;
}
#float_nav li a, #float_nav li a:link{
  color:#fff;
  display:block;
  margin:0;
font:16px georgia; /* Famiglia e dimensioni di caratteri */
 padding:10px;
text-decoration:none;
}
#float_nav li a:hover, #float_nav li a:active, #float_nav .current_page_item a  {
  color:#fff;
  padding:10px;
background: rgb(0,192,255); /* Colore al passaggio del cursore */
background: -moz-linear-gradient(top,  rgba(0,192,255,0.8) 0%, rgba(0,192,255,0.8) 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,192,255,0.8)), color-stop(80%,rgba(0,192,255,0.8))); /* Opacità 80% */
background: -webkit-linear-gradient(top,  rgba(0,192,255,0.8) 0%,rgba(0,192,255,0.8) 80%);
background: -o-linear-gradient(top,  rgba(0,192,255,0.8) 0%,rgba(0,192,255,0.8) 80%);
background: -ms-linear-gradient(top,  rgba(0,192,255,0.8) 0%,rgba(0,192,255,0.8) 80%);
background: linear-gradient(to bottom,  rgba(0,192,255,0.8) 0%,rgba(0,192,255,0.8) 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00C0FF&#39;, endColorstr=&#39;#00C0FF&#39;,GradientType=0 );
}
#float_nav li li a, #float_nav li li a:link, #float_nav li li a:visited{
  font-size: 14px; /* Dimensione caratteri voci secondarie */
  background:#191919;
  color: #fff; /* Colore del testo */
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
}
#float_nav li li a:hover, #float_nav li li a:active {
  color: #fff;
background: rgb(0,192,255);
background: -moz-linear-gradient(top,  rgba(0,192,255,0.8) 0%, rgba(0,192,255,0.8) 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,192,255,0.8)), color-stop(80%,rgba(0,192,255,0.8)));
background: -webkit-linear-gradient(top,  rgba(0,192,255,0.8) 0%,rgba(0,192,255,0.8) 80%);
background: -o-linear-gradient(top,  rgba(0,192,255,0.8) 0%,rgba(0,192,255,0.8) 80%);
background: -ms-linear-gradient(top,  rgba(0,192,255,0.8) 0%,rgba(0,192,255,0.8) 80%);
background: linear-gradient(to bottom,  rgba(0,192,255,0.8) 0%,rgba(0,192,255,0.8) 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00C0FF&#39;, endColorstr=&#39;#00C0FF&#39;,GradientType=0 );
}
#float_nav li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:170px;
  margin:0px;
  padding:0px
}
#float_nav li:hover ul, #float_nav li li:hover ul, #float_nav li li li:hover ul, #float_nav li.sfhover ul, #topfloat_nav li li.sfhover ul, #topfloat_nav li li li.sfhover ul{
  left:auto
}
#float_nav li:hover, #float_nav li.sfhover{
  position:static
}
#casella-ricerca {
    margin:8px 10px 0 0;
    float: right;
}
#casella-ricerca form {
    background: url(&quot;https://lh5.googleusercontent.com/-gdwUiD-iQug/U8e6bZk2SkI/AAAAAAAAoL0/xwmTMNN2Z0U/s15-no/ricerca.gif&quot;) no-repeat scroll 5% 50% transparent;  
    border: 1px solid #CCC;
    border-radius: 3px 3px 3px 3px;   
    height: 22px;
    padding: 0 20px;
    position: relative;
    width: 160px; /* Larghezza casella ricerca */
    }
#casella-ricerca input  {
    color: #fff;
    background-color: #191919;
    font-size: 16px;
    height: 22px;   
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    float: left;
    outline: medium none;
    margin: 0px 5px 0px 5px;   
    width: 160px;
}
#float_dropdown {
  float:right;
  width:250px; /* Larghezza del menù con le icone */
  padding:0px 0px ;
  margin:9px 10px 0px 0px;
   }
#float_dropdown img
{
margin-left:5px; /* Posizionamento laterale icone */
margin-top:-3px; /* Posizionamento verticale icone */
height:32px; /* Dimensione icone */
border:none;
}
</style>
<!-- Inizio Elementi del Menù -->
<div id='float_main'>
     <div id='float_nav'>
         <ul>
           <li><a href=''>Home</a></li>
           <li><a href='#'>About</a>
           <ul>
           <li><a href='#'>Bio</a></li>
           <li><a href='#'>Privacy</a></li>
           <li><a href='#'>Gallery</a></li>
           </ul>
          </li>
           <li><a href='#'>Strumenti</a>
               <ul>
                  <li><a href='#'>Voce 1</a></li>
                  <li><a href='#'>Voce 2</a></li>
                  <li><a href='#'>Voce 3</a></li>
                  <li><a href='#'>Voce 4</a></li>
                  <li><a href='#'>Voce 5</a></li>
                  <li><a href='#'>Voce 6</a></li>
               </ul>
           </li>
    <li><a href='#'>Etichette</a>            
             <ul>
                  <li><a href='#'>Widget</a></li>
                  <li><a href='#'>Modelli</a></li>
                  <li><a href='#'>SEO</a></li>
                  <li><a href='#'>Effetti</a></li>
                  <li><a href='#'>Blogger</a></li>
                  <li><a href='#'>Dynamic Views</a></li>
                  <li><a href='#'>Android</a></li>
                  <li><a href='#'>Software</a></li>
               </ul>
           </li>
             <li><a href='#'>Contattaci</a>         
           </li>
         </ul>
      </div>
        <!-- Inizio icone social -->  
<div id='float_dropdown'>       
<a href='http://feeds.feedburner.com/ideepercomputeredinternet/zUQN' target='_blank'><img alt='Iscriviti ai Feed' src='https://lh5.googleusercontent.com/-lNomLqps3b0/UhKcma55h8I/AAAAAAAAjHU/Omv7xrh31V8/s72/rss.png' title='Iscriviti ai Feed'/></a>
<a href='http://www.facebook.com/parsifal32' target='_blank'><img alt='Aggiungimi su Facebook' src='https://lh3.googleusercontent.com/-El4u0ba7djM/UhKcexjd-2I/AAAAAAAAjHE/G0Cp6FU2BnA/s72/facebook.png' title='Aggiungimi su Facebook'/></a>
<a href='https://twitter.com/parsifal32' target='_blank'><img alt='Seguimi su Twitter' src='https://lh6.googleusercontent.com/-6nyW-ClSo7E/UhKcuogZhZI/AAAAAAAAjHk/kNDX7gzsFGM/s72/twitter.png' title='Seguimi su Twitter'/></a>
<a href='https://plus.google.com/111056841635962157738' target='_blank'><img alt='Aggiungimi su Google+' src='https://lh3.googleusercontent.com/-S3AWUMqyP-Y/UhKcj6ol7HI/AAAAAAAAjHM/gJl4lH8R464/s72/googleplus.png' title='Aggiungimi su Google+'/></a>
<a href='http://www.youtube.com/user/parsifal32' target='_blank'><img alt='Segui il Canale di Youtube' src='https://lh6.googleusercontent.com/-yVl2tC0r6eE/UhKcw8fUsvI/AAAAAAAAjHs/u_Dmv0cH_r4/s72/youtube.png' title='Segui il Canale di Youtube'/></a>
<a href='http://pinterest.com/parsifal32/' target='_blank'><img alt='Seguimi su Pinterest' src='https://lh6.googleusercontent.com/-zRDIREgp8wI/UhKcqNWjKKI/AAAAAAAAjHc/JsV5MLK7z40/s72/pinterest.png' title='Seguimi su Pinterest'/></a>
      </div>
<!-- Casella di ricerca inizio -->       
 <div id='casella-ricerca'>        
        <form action='/search' method='get'>
                <input autocomplete='off' name='q' placeholder='Cerca...' type='text' value=''/>
            </form>
        </div>
<!-- Casella di ricerca fine-->

</div>
<!-- Menu Flottante con icone social e casella di ricerca - Fine -->

Si salva il modello o le modifiche se vogliamo installare il menù in un blog non di Blogger. Molte personalizzazioni riguardano i codici dei colori e accanto ai parametri sono presenti commenti esplicativi del loro significato. Si può anche agire sullo stile dei bordi. Le altre principali modifiche riguardano:
  1. Oltre ai colori si può intervenire anche sulla trasparenza (o opacità). Il valore rgba(0,192,255,0.8) in RGB diventa #00C0FF in HEX. Per ulteriori modifiche consultate il convertitore da HEX in RGB e viceversa.
  2. Si può scegliere la famiglia di font (Georgia) e la dimensione dei caratteri del menù principale (16 pixel) e quella delle voci secondarie (14 pixel).
  3. Il menù prende tutta la larghezza (100%) ed è alto 40 pixel.
  4. Le icone sociali sono rappresentate dagli URL colorati di viola, la loro dimensione è di 32 pixel e la larghezza totale di quell'area è di 250 pixel.  Il posizionamento può essere settato modificando i valori di margin-top e margin-left
  5. Si possono inserire solo le icone che ci servono eliminando le righe degli altri social a partire da tag <a href=' … fino al tag </a>
  6. Vanno sostituiti gli URL colorati di rosso che sono quelli dei miei account
  7. La casella di ricerca è larga 160 pixel ha lo stesso sfondo del menù, ha un bordo continuo (solid) di 1 pixel con il colore del testo digitato #fff.

Se volete visualizzare la casella di ricerca in fondo a destra dopo le icone sociali in questo modo 

casella-ricerca-destra

basterà spostare il codice evidenziato di giallo incollandolo prima di <!-- Inizio icone social -->



 

COME CREARE IL MENÙ

 

Il menù proposto nel codice ha questa struttura principale

<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Strumenti</a></li>
<li><a href='#'>Etichette</a> </li> 
<li><a href='#'>Contattaci</a></li>
</ul>

dove è stata evidenziata di giallo la riga della voce Etichette. Per creare dei sottomenù di questa voce occorre incollare tra i tag </a> e </li> un nuovo elenco secondario con questa struttura 

<li><a href='#'>Etichette</a>            
             <ul>
                  <li><a href='#'>Widget</a></li>
                  <li><a href='#'>Modelli</a></li>
                  <li><a href='#'>SEO</a></li>
                  <li><a href='#'>Effetti</a></li>
                  <li><a href='#'>Blogger</a></li>
                  <li><a href='#'>Dynamic Views</a></li>
                  <li><a href='#'>Android</a></li>
                  <li><a href='#'>Software</a></li>
               </ul>    
</li>

dove sono stati colorati di viola e di rosso i due tag in questione per maggiore chiarezza. Per aggiungere, togliere o modificare righe dal menù principale o da quelli secondari basterà per esempio inserire la riga 

<li><a href='URL_POST_PRIVACY'>Privacy</a></li>

Concludo ricordando ai meno esperti che gli indirizzi delle pagine collegati alle voci del menù devono essere sostituiti nel codice ai cancelletti ( # ). Per procedere a una ricerca dopo aver digitato la query opportuna occorrerà pigiare su Invio. Se siete utenti di Blogger e il codice non funzionasse provate a incollarlo invece che dopo </head> subito dopo la riga 

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

o comunque dopo il tag <body> se avete un modello molto vecchio.




32 commenti :

  1. Premetto di averci provato ma non esserci riuscita.. Ti chiedo una cosa visto che non la trovo.. Io sulla pagina ho l'elenco pagine, mi piacerebbe che cliccando si potesse aprire un elenco . ( Ho la pagina Italia, vorrei che cliccandosi potessero uscire le varie città, tipo Napoli, Milano, Roma, Venezia ecc,, dove cliccando si accede ai post veri e propri ).
    Hai qualche tutorial da seguire ?
    Grazie in anticipo!

    RispondiElimina
    Risposte
    1. Su Blogger non ci sono categorie gerarchiche come su WordPress e quindi non si può fare
      @#

      Elimina
  2. Ciao Ernesto, questa barra flottante mi piace un sacco! Appena ho occasione vedo di installarla in un blog di prova e giocare un po' coi colori. Grazie come sempre per i tuoi tutorial e codici! Buon lavoro, alex

    RispondiElimina
  3. Gran bel menù! E' possibile estendere la larghezza delle voci secondarie da 150px al 100% del sito? Inserendo 100% il valore diventa relativo ai contenuti inseriti e non alla larghezza dell'intero sito...

    RispondiElimina
    Risposte
    1. Se con 100% hai già provato e non va non vedo come si possa ovviare. Inserire i pixel non è la stessa cosa @#

      Elimina
    2. Ok grazie mille, vedo cosa riesco a combinare ^^

      Elimina
  4. Io l'ho modificato e ho inserito ogni cosa al posto giusto, inoltre ho lasciato visibile un pezzo della navbar tale da poter fare login come al solito. ecco com'è http://appuntisulblog.blogspot.it/

    RispondiElimina
    Risposte
    1. Quella di lasciare un po' di spazio alla Navbar è una idea che non mi era neppure balenata nella testa :)
      Mi pare che sia venuto un buon risultato
      @#

      Elimina
  5. come posso rendere compatibile questo menù con la versione mobile?
    grazie

    RispondiElimina
    Risposte
    1. Nella versione mobile conviene inserire dei vincoli per non visualizzare il menu. Sono pochissimi quelli che si vedono correttamente anche da smartphone. Anche con questo blog ho fatto così
      @#

      Elimina
    2. Ciao Ernesto
      Vedo che dal blog di demo hai impostato che il menu non si vede nella versione mobile, posso chiederti come hai fatto? Sul mio blog è perfetto per la versione desktop ma da mobile no...
      Grazie!

      Elimina
    3. Con un tag condizionale
      http://www.ideepercomputeredinternet.com/2014/11/blogger-tag-condizionali-desktop-mobile.html
      inserendo il codice del menù tra i due tag per vederlo solo nella versione desktop
      @#

      Elimina
    4. Funziona tutto perfettamente grazie!!!! Posso mettere questo menù flottante solo nella versione desktop e un altro, sempre di tua realizzazione, in quella mobile: viene tutto molto bello e ordinato, grazie!!!!

      Elimina
  6. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  7. ciao ernesto, come mai nella casella installata sul mio blog non riesco a visualizzare nulla mentre digito all'interno della casella?

    RispondiElimina
    Risposte
    1. ho risolto, avevo solo impostato il bianco come colore del carattere e non vedevo nulla…. che sciocca!!

      Elimina
  8. Funziona tutto, ma se volessi impostare un colore di sfondo e del testo in particolare che rimane attivo solo mentre si sta visitando una pagina selezionata? Capisci che intendo? :)

    RispondiElimina
    Risposte
    1. La pagina attiva ha lo stesso colore di testo e di background dell'elemento in cui passa il cursore questo perché le classi di stile
      #float_nav li a:hover
      #float_nav li a:active
      #float_nav .current_page_item a
      hanno gli stessi parametri di color, background-color ecc.
      Così come le classi
      #float_nav li li a:hover
      #float_nav li li a:active

      Volendo puoi separare queste classi in questo modo
      #float_nav li a:hover {.... }
      #float_nav li a:active {.... } ecc.
      e mettere dei parametri diversi per avere l'effetto che desideri. Nel codice proposto le classi sono separate da virgole e quindi le regole tra parentesi graffe sono le stesse. Spero di essere stato sufficientmente chiaro.

      @#


      Elimina
    2. Siiiiiiiii chiarissimo e scema io a non averci pensato! Grazieeeeeeeee! Muah! :*

      Elimina
  9. Non è possibile fare un ulteriore livello del menu?

    RispondiElimina
    Risposte
    1. Ci sono dei menù su tre o anche più livelli. Questo si ferma a 2 :(
      @#

      Elimina
  10. Molto bello. Inserito. Esiste qualcosa di simile per i modelli a visualizzazione dinamica? Grazie e ciao.

    RispondiElimina
    Risposte
    1. Per i Modelli a Visualizzazione Dinamica sostanzialmente non c'è nulla :(
      @#

      Elimina
  11. Ciao Ernesto. Ho aggiunto tre voci al menu principale, ma queste tre voci risultano uscire dal box, in pratica è come se andasse a capo nel scriverle. Come risolvo? Grazie.

    RispondiElimina
    Risposte
    1. Intendi questo menù? Forse hai scritto un testo troppo lungo che non entrava nella larghezza o forse non hai usato la corretta sintassi
      @#

      Elimina
    2. A chi servisse, ho risolto così:
      modificare:

      #float_nav{
      float:left;
      width:700px;
      height:40px;
      display:block;
      padding:0;
      margin-left:40px;

      in:

      #float_nav{
      float:left;
      width:1000px;
      height:40px;
      display:block;
      padding:0;
      margin-left:40px;

      Elimina
    3. Hai aumentato la larghezza :)
      @#

      Elimina
  12. Bellissimo Ernesto, nella versione desktop è una bomba! Puoi darmi qualche dritta per la versione mobile, visto che a causa della risoluzione le voci del menu non entrano tutte. Grazie

    RispondiElimina
    Risposte
    1. Conviene creare due menù, uno per il desktop e uno per il mobile. Ti linko il menù per il mobile che uso in questo sito
      http://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
      @#

      Elimina
  13. Ciao Ernesto,
    sotto le icone social, quando ci passo col mouse, mi compare una striscia blu come se fossero sottolineate. Quale potrebbe essere la stringa che mi dà problemi?

    RispondiElimina
    Risposte
    1. @# Nel tuo blog è probabile che ci sia una sottolineatura automatica quando si passa sopra un link con il mouse. Prova a aggiungere questo CSS
      #float_dropdown img a {text-decoration:none;}
      prima di < /style >

      Elimina
    2. Se non va prova con
      #float_dropdown img a {text-decoration: none !important;}
      oppure con
      a#float_dropdown img {text-decoration: none !important;}
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.