Amigos de Mil Trucos Blogger, en el día de hoy veremos como añadir un menú minimalista para Blogger, bastante sencillo y muy limpio, que puede ir con sitios de diseño blanco y colores suaves.

Añade un Menú minimalista para Blogger…

Para agregar este menú en tu blog, ve a Plantilla, Editar HTML y justo antes de ]]></b:skin> añade lo siguiente:

#mainNav{
margin-top: 10px;
padding: 5px;
background: #FBFBFB;
border-top: 1px solid #EAEAEA;
border-bottom: 1px solid #EAEAEA;
}
#mainNav ul{
margin: 0 auto;
width: 60em;
text-align: left
}
#mainNav li{
display: inline;
margin-right: 20px;
font-size: 1.5em;
text-transform: uppercase;
}
#mainNav li:last-child{
margin-right: 0;
}
#mainNav a:link,
#mainNav a:visited{
color: #999;
white-space: nowrap;
}
#mainNav a:hover,
#mainNav a:active{
text-decoration: underline;
color: #2E301C;
}
#mainNav .current_page_parent a:link,
#mainNav .current_page_parent a:visited,
#mainNav .current_page_item a:link,
#mainNav .current_page_item a:visited{
font-weight: bold;
color: #2A2D1A;
}
#mainNav .current_page_parent a:hover,
#mainNav .current_page_parent a:active,
#mainNav .current_page_item a:hover,
#mainNav .current_page_item a:active{
color: #2E301C;
}

Ahora ve a Diseño y en un gadget HTML/JavaScript (preferiblemente debajo de la cabecera del blog) añade lo siguiente:

<div id="mainNav">
<ul>
<li class="page_item page-item-30 current_page_item"><a href="#" title="Inicio">Inicio</a></li>
<li class="page_item page-item"><a href="#" title="Perfil">Perfil</a></li>
<li class="page_item page-item-12"><a href="#" title="Contacto">Contacto</a></li>
<li class="page_item page-item-11"><a href="#" title="Blogger">Blogger</a></li>
<li><a href="#">RSS</a></li>
</ul>
</div>

Lo resaltado en color azul corresponde al HTML personalizable (enlaces y nombres de los enlaces).

Si tienes una duda respecto al truco, puedes escribirnos en los comentarios y no olvides compartir esta entrada en tus redes sociales.