Mil Trucos Blogger

Añade un Menú minimalista para Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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…

menu-minimalista-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.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

2 Comentarios

  1. Marzo 19, 2016    

    Para agregar este menú en tu blog, ve a Plantilla, Editar HTML y justo antes de añade lo siguiente:

    Donde dice “justo antes de”, a que se refiere? ]]>, , ???

    • Juvinao Juvinao
      Marzo 19, 2016    

      Miguel, tienes razón y se me había olvidado añadir el código, la etiqueta es:

      ]]></b:skin>
      

      Saludos 😀

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo