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.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_0YuNp_4j-qbuW_ntrbnxRLfFebhUvZJQZEnyoThSpcLaGgWsueS6W2h5gqXIwvr-Aywy3Mg1wThHwYOwDRJVEQ5OESMgtkB-DJUh3VTAX1h7jDUYtOWqoHz-X6aiIKvtmJJ1Iu516Co/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR94WxMbD_Cel3hJLui2gK7twFw08tVmJpY-gKHcHOaSOxB5V7inCMtr8JBzeX11uE-eZZhpjRvTDwC6YtMrglb9D0_gXuEfl6IhIrza_uMEDCYRykEqQB2CJaEpKtA8V2CE1AnebtR8Ng/s72/rss.png' title='Iscriviti ai Feed'/></a>
<a href='http://www.facebook.com/parsifal32' target='_blank'><img alt='Aggiungimi su Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic0w7SFrsYk-vvfRY5DOG-UfWoZ8FJoMM2VaPfNo2M-3cBH_2Y448w8OXtP-KVdZJXb2iQG6DwUCUIPdJJR74BthAUN2ar7taL8j-3b5SUDdyTEitZ2OPV2bru161PS3dxXtrApvyW3jK_/s72/facebook.png' title='Aggiungimi su Facebook'/></a>
<a href='https://twitter.com/parsifal32' target='_blank'><img alt='Seguimi su Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpzKz24EDZBe9khEFT-lh-siPrx0hkZPgOqtNKObA5NTCpk4VRx_xp6L5_NBf5OZtXFcrKY0SHYZoQMuFcgXbzjciEA0Jw6vHk-sf6sgIaK6MBti-3PetY5Dy_k1vWv_ZfAhTo0q0RMS2J/s72/twitter.png' title='Seguimi su Twitter'/></a>
<a href='https://plus.google.com/111056841635962157738' target='_blank'><img alt='Aggiungimi su Google+' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhost-ZGIBhqDvF6ULUkPH-7N4avsf_1jM5oOnBLE66j3hfy-ugrtG8Hm0G6WmrK3_HFNWKS8obzFCUwSrZfIjqrLr_0PMgegcWJimP1A7vDToa3a2RU4BOziLHxHoemYtFbeDgb832bIDP/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZurn7FKDMWHOEg2qYzPTtde3eF2SFb20MJqC9bT2L5JIzWAglgCJfHiOVKUo8pmAfvoqBkTeXaaqaPIJkXNvskDjrwaTBHVtVJU-BREzvo4zyHPRFivBnmQbWPLmFaU4Kzwk-2mIWQ2Vs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoRga7I59y_Xfcs7xSoCxFnmbc4o7bXGW55I4TbIoFmZ1_SlCCuTt6qyBIqnw8d7FyCNRcVeEMrUan84NtV1sa0c22oe_elmt89Ye0VTjiY50vWEXLtctkafYgQ40uynpyMYGMprFyHV4e/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 

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.