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.

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. 

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.