Menú superior en el blog de Blogger

Una vez más, tengo el placer de anunciar una mejora en el blog, en este caso, el menú superior que he puesto, para que se puedan acceder a las secciones de cocina y huerto.

Quiero centrarme un poco más e ir poniendo recetas, e ir haciendo un seguimiento a mi huerto, así que nada mejor que tenerlo todo bien organizado.

El menú, llamado "Semi opaque menu" lo saqué de esta página:

http://www.dynamicdrive.com/style/csslibrary/item/css3_semi_opaque_menu/

Ahí explican lo que hay que hacer, y yo os termino de explicar como integrarlo en blogger, lo cual es muy simple.

Si ya os manejáis en el mundo de los blogs, sabréis que todo pasa por una plantilla html, que luego se puede modificar a antojo de cada uno.

Para añadir este menú, tenéis que ir al editor HTML de la plantilla, que encontraréis pulsando en "Plantilla" en el menú lateral, y luego en el botón "Editar HTML" que os encontraréis.

Una vez estéis en la plantilla, tendréis que buscar 2 partes, la primera para incluir el CSS, y la segunda para incluir el HTML del menú.

La primera parte la encontraréis aquí

Todo CSS que queráis poner en vuestro blog, deberá SIEMPRE ir justo delante de 

]]>

La segunda parte la encontraréis aquí

En este caso, como queremos poner un menú justo detrás de la cabecera de la página, deberemos incluir el código HTML justo detrás de la etiqueta

Y por último... ¿qué coóigo CSS y HTML hay que incluir?

Este es el código CSS

/* menu superior */

div.bottombar{ /* La barra inferior */
height: 10px;
background: #1a1109; /* Color de la barra inferior */
}

ul.semiopaquemenu{ /* Menu principal UL */
font: bold 14px Georgia ;
width: 100%;
background: #2AA7FA; /* Color de fondo del Menu principal */
padding: 11px 0 8px 0; /* Relleno de los 4 lados del menú*/
margin: 0;
text-align: left; /* Escribe "left", "center", o "right" para alinear el menú*/
}

ul.semiopaquemenu li{
display: inline;
}

ul.semiopaquemenu li a{
color:black;
padding: 6px 8px 6px 8px; /* Relleno de los 4 lados de cada enlace del menú */
margin-right: 15px; /* Separación entre cada enlace del menú */
text-decoration: none;
}

ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{
color: black;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgyIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xNiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-linear-gradient(top,  rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffffff', endColorstr='#29ffffff',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959; /* Sombras en CSS3 */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 12px; /* relleno sobresaliente hacia arriba */
padding-bottom: 20px; /* relleno sobresaliente hacia abajo */
}

Y este es el código HTML

    <!-- menu -->
    
    <ul class='semiopaquemenu'>
        <li><a class='selected' href='/'>Inicio</a></li>
        <li><a href='http://pocoapocoyconcalma.blogspot.com.es/search/label/cocinar'>Poco a poco... Cocina</a></li>
        <li><a href='http://pocoapocoyconcalma.blogspot.com.es/search/label/huerto'>Poco a poco... Huerto</a></li>
    </ul>

    <div class='bottombar'>
    </div>
    
    
    <!-- fin menu -->

Del CSS os tocará tocar colores y demás para adaptarlo a vuestro estilo del blog.
Del HTML tan sólo tendréis que añadir tantos "<li>" con en enlace "<a>" como menús queráis tener.

¿Y qué enlace debéis poner en el href?

Cómo veis en el ejemplo de mi blog, tan solo tenéis que enlazar a una etiqueta con
vuestroBlogDeBlogger/search/label/nombreEtiqueta

Si tenéis una nube de tags en vuestro blog (como la que tengo yo a  la derecha), podéis copiar la ruta de la etiqueta que queráis convertir en una sección de vuestro blog con este menú.

Poco a poco y con calma.... vamos mejorando :)