Come installare in Blogger un menù su 2 livelli con casella di ricerca e pulsanti per i social.

Come installare su Blogger un Menù Multilivello sopra o sotto l'Intestazione o l'altro menù delle Pagine statiche che abbia anche la casella di ricerca e le icone con i collegamenti a tutti i social network.

Gli utenti di Blogger possono usare le pagine statiche per realizzare un menù orizzontale che però è solo su un livello. Questa soluzione non è sufficiente per siti che abbiano pubblicato molti post su diversi argomenti e che quindi hanno bisogno di menù su più livelli per aggiungere tutti gli elementi.

Il menù più completo che si possa realizzare è quello che oltre a un menù su più livelli abbia implementata anche la casella di ricerca e le icone con collegamento ai vari social network. Un altro tema importante è quello del posizionamento del menù. Le due posizioni preferite sono quella subito sopra alla Intestazione e quella subito sotto a quest'ultima. Si può però scegliere anche di mostrare un menù siffatto insieme a quello del menù delle pagine statiche.

L'installazione del menù mostrato nello screenshot precedente è relativamente semplice. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la sezione <b:skin> quindi si clicca sulla freccetta nera posta sulla sinistra per visualizzarne tutto il codice. Con Ctrl+F si cerca poi la riga ]]></b:skin> e, subito sopra, si incolla questo codice

/* Menù DropDown con ricerca e icone sociali 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: 210px;
    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: 150px;
}
#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;
}

Naturalmente possono essere personalizzati i codici dei colori e le dimensioni dei vari elementi. Insieme alla notazione HEX i colori sono inseriti anche con la notazione RGB insieme alla opacità. Per gestire i colori oltre al post appena linkato i meno esperti possono consultare anche quello sulla conversione dei codici dei colori da HEX in RGB e viceversa.

POSIZIONAMENTO DEL MENÙ

Il codice appena mostrato è formato dai CSS cioè dalle regole che servono per determinare l'aspetto del menù. Gli elementi del menù debbono invece essere inseriti con un codice HTML nel punto in cui si vuole che questo appaia. Vediamo qualche opzione tra quelle possibili e più probabili.

MENÙ SOPRA ALL'HEADER  

Il secondo codice va incollato subito sopra al tag <header>

MENÙ SOTTO L'HEADER

Il secondo codice va incollato subito sotto la riga </header>

MENÙ INSIEME A QUELLO DELLE PAGINE STATICHE

Come detto all'inizio del post questo menù può convivere anche con quello delle pagine statiche. Per posizionarlo occorre innanzitutto andare su Layout e cercare il nome della sezione in cui si trova il Menù delle Pagine statiche di Blogger. Lo screenshot seguente è esplicativo in tal senso

e il nome che si desume è cross-column. In altri modelli tale sezione può avere altri nomi come per esempio Cross-Column 2. Con Ctrl+F si cerca tale stringa nel modello

Si deve quindi individuare l'inizio e la fine della sezione. Il suo inizio sarà dato dal tag <b:section class='tabs'... mentre la fine della sezione avrà il tag </b:section>. Se si vuole inserire questo menù sopra a quello delle pagine statiche si incolla il codice subito sopra a <b:section class='tabs'...  mentre se si vuole inserire sotto a quello delle Pagine il codice va incollato subito sotto a </b:section>. In ogni caso il secondo codice da incollare sarà il seguente

<!-- 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='https://www.instagram.com/parsifal32'><img height='24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfMo8B3LJc0wlFBbe_CDoJfotXO9fKEZFOQVgUt4pKS-v2X1J19xCxD1HiIFcKGlj-kJaY-2tcA4l8zphitWwtLHYXSj1TztB-S7sFtVvcsCX3Vb96SiuqETqSGIjIYwpVLv6nsIXYTmQ/s32-Ic42/instagram.png' title='Instagram' width='24px'/></a>
<a href='https://it.pinterest.com/parsifal32'><img height='24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGv04YDE8XuPN6luqOGlMRCr9pwOvjhtrD6UCgOjoGy9mXQ2f2IkCpXmHnYWpz72MJXPNJPCh6kyzNFiEJpLYJC_WIPDSX_i2s8UUfFdJnlP4Z3UxfZyoaD2E-5yUJ4Uw9obXk7S2FVnQ/s32-Ic42/pinterest.png' title='Pinterest' 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>

Finalmente si salva il modello. Gli URL colorati di rosso sono quelli degli indirizzi dei miei account che quindi vanno sostituiti con quelli vostri mentre gli URL colorati di viola sono quelli delle icone. Chi non voglia mostrare la casella di ricerca può cancellare il codice evidenziato di giallo. Il menù può essere personalizzato a piacere mantenendo la stessa sintassi. Si possono aggiungere altri elementi e altre voci sia nel primo come nel secondo livello del menù.

Demo
Clicca qui

Gli indirizzi dei post e delle pagine collegate ai vari elementi debbono essere sostituiti ai cancelletti ( # ). Ricordo che si possono aggiungere altre icone con questa sintassi

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

oppure eliminare le icone dei social network che non ci interessa mostrare. Concludo osservando che questo menù può essere nascosto nella versione mobile e sostituito da un altro. Se si sceglie questa opzione è sufficiente inserire questo secondo codice tra due tag condizionali in questo modo

<b:if cond='!data:blog.isMobile'>
Secondo codice del menù
</b:if>