En el día de hoy veremos como añadir un menú minimalista para Blogger, este menú tiene un diseño limpio, que viene muy bien para plantillas de color blanco y tonalidades suaves, adaptándose a diversas temáticas que requieran añadir un menú sencillo, en las que lo estridente está de más.
![]() |
Menú minimalista para Blogger |
Para añadir este menú en tu blog, ve a Diseño y en un gadget HTML/JavaScript (preferiblemente debajo de la cabecera del blog) añade lo siguiente:
<style> #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; } </style> <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>
Lo resaltado en negrita es la parte del HTML en la que se agregan los enlaces y los títulos de esos enlaces que se mostrarán en el menú, ahora solo guarda los cambios.
A continuación se muestra una vista previa del menú: