1. Entrar en Plantilla > Modificar HTML
2. Clicar dentro del recuadro dónde aparecen los códigos de blogger y, sin escribir ni modificar nada, teclear a la vez Ctrl+F para que nos aparezca un pequeño buscador en la esquina superior derecha del recuadro.
3. Escribir en el buscador <body. Te aparecerá una línia parecida a esta:
<!-- Barra Menú Superior -->
<b:if cond='data:blog.isMobile == "false"'> <!-- Para que no aparezca en la versión del teléfono -->
<div id='menu-superior'>
<ul>
<li><a href='#'>Enlace 1</a><br /></li>
<li><a href='#'>Enlace 2</a><br /></li>
<li><a href='#'>Enlace 3</a><br /></li>
<li><a href='#'>Enlace 4</a><br /></li>
<li><form action='/search' id='searchthis' method='get' style='display: inline;'> <input class='search-box' name='q' placeholder='busca aquí' size='11' type='text'/> </form> </li>
</ul>
</div>
</b:if>
<!-- Fin Barra Menú Superior -->
- Sustituir las almohadillas (#) por la URL que quieras enlazar.
- Cambiar el texto naranja por lo que desees que aparezca como texto del enlace.
4. Copiar y pegar el código del estilo en Plantilla > Personalizar > Avanzado > Añadir CSS:
/* Estilo Barra Menú Superior
----------------------------------------------- */
#menu-superior { /*Estilo de la barra*/
width: 100%; /*Para que aparezca en todo lo ancho de la pantala*/
top:0;
left:0;
margin:0;
padding:1px;
color:#303030; /*Color del texto*/
font: normal normal 11px 'century gothic', sans-serif; /*Estilo, grosor, tamaño y tipografia de la letra */
text-align: center !important; /*Para que aparezcan los enlaces centrados, si no lo queremos borrar esta línia o sustituirlo por left o right*/
background:#eeeeee; /*Color del fondo de la barra del menú*/
border:none; /*Para que no tenga bordes, podéis añadirle si queréis*/
}
#menu-superior ul li {
margin: 0 20px 0 0;
padding:0 20px 0 0;
display:inline;
float:none !important;
border-right:1px solid #303030; /*Línia separatoria en la parte derecha del link, si no lo queremos borrar la línea */
}
#menu-superior li a {
color: #ffffff; /*Color de los enlaces*/
text-decoration: none; /*Para que los enlaces no se muestren subrayados*/
text-transform:uppercase; /*Para que los enlaces aparezcan en mayúsculas, si no lo queremos borrar la línea */
}
#menu-superior li a:hover, #menu-superior li a:active {
color: #ceeedd; /*Color al pasar el ratón por encima del link*/
}
#menu-superior .search-box{ /*Para cambiar la apariencia del buscador*/
width: 140px; /*Ancho de la caja */
padding: 1px; /*Altura de caja*/
border: 1px solid #303030; /*Tamaño, estilo y color del borde, si no lo queremos borrar la línea*/
color: #444444; /*Color de las letras cuando se escriba en el buscador*/
font: normal normal 11px 'century gothic', sans-serif; /*Estilo de las letras*/
text-align: center; /*Para centrar el texto de la caja*/
background-color: #fff; /*Color del fondo del buscador*/
}
¡Podemos editar todo lo que queramos del estilo de nuestro menú para que quede bonito y a nuestro gusto!
no funciona! me sale de forma vertical y sin estilos!
ResponderEliminar