Hace mucho tiempo aprendí a hacer este blog gracias a Miss Lavanda pero, lamentablemente, su blog ha desaparecido. No sé que le pasó pero un día dejó de actualizar y el blog desapareció —como todos sus tutoriales. Es una pena porque tenía un montón de cosas para aprender a hacer un blog bonito y explicado todo muy bien, a mí me gustaba un montón y le debo un montón de cosas. Total, que yo iba tirando con el código que tengo puesto en mi blog de reseñas hasta que el otro día descubrí que había un blog que tenía el tutorial de este menú y bien hecho —porque algunos lo tienen mal o cambiado y no van bien. Así que he decidido enseñároslo a vosotros también y como pretendo dejar este blog en activo eternamente pues no nos vamos a quedar sin él. Antes de empezar os sugiero que hagáis una copia de seguridad de la plantilla, por si la fastidiáis al ponerlo.
Cómo siempre hay que ir a Tema, luego a HTML y pulsar ctrl+F para buscar: <body expr:class='"loading" + data:blog.mobileClass'>
Si solo queréis un menú con pestañas lo que tenéis que hacer es pegar el siguiente código DEBAJO de lo que habéis buscado:
<div id='barra-superior'>
<ul class='menu'>
<li><a href='URL'>Página 1</a></li>
<li><a>Categoría 1</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a>Categoría 2</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a href='URL'>Página 2</a></li>
<li><a href='URL'>Página 3</a></li>
</ul>
</div>
Lo que veis en azul lo tenéis que cambiar por el enlace al que queréis que os lleve (puede ser una página, una etiqueta, otro blog) y lo que veis en rojo son los títulos de los sitios. Os aconsejo que en página 1 pongáis inicio y la dirección al blog porque eso facilita las cosas al que visita la página. ¿Queréis añadir más subcategorías? Pues solo tenéis que poner otra debajo, así:
<li><a>Categoría 1</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
<li><a href='URL'>SubCategoría 4</a></li>
</ul>
</li>
¿Veis lo que he hecho? He dado a intro, he puesto el mismo código de arriba y ya está. Siempre que queráis meter más subcategorías tenéis que hacer eso, asegurándoos de que el resto de cosas quedan tal cual las veis ahí —o sea con </ul> y </li> debajo de ellas. Con las páginas es lo mismo, copiáis la línea, la ponéis debajo y ya está, pero siempre tienen que quedar </ul> debajo:
<li><a href='URL'>Página 2</a></li>
<li><a href='URL'>Página 3</a></li>
<li><a href='URL'>Página 4</a></li>
</ul>
¿Queréis añadir otro apartado de categorías, pues tenéis que añadir otro bloque como este justo después de ese </li>:
<li><a>Categoría 3</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
<li><a href='URL'>SubCategoría 4</a></li>
</ul>
</li>
Si queréis un menú con redes sociales la cosa se complica un poco, pero no mucho. Os prometo que podéis ponerlo sin que os entre dolor de cabeza.
Lo primero que hay que hacer es instalar las fuentes para que esto vaya, así que tenéis que pulsar ctrl+f y buscar: <head> . Justo debajo tenéis que pegar este código:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Si queréis unos iconos distintos a los que están puestos os dejo AQUÍ el enlace a la página para que le echéis un vistazo, yo nunca tengo ningún problema con ellos así que no tendríais por qué tenerlos.
Volvéis a pulsar ctrl+f y buscáis: pulsar ctrl+F para buscar: <body expr:class='"loading" + data:blog.mobileClass'> y debajo pegáis el siguiente código:
<div id='barra-superior'>
<ul class='menu'>
<li><a href='URL'>Página 1</a></li>
<li><a>Categoría 1</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a>Categoría 2</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a href='URL'>Página 2</a></li>
<li><a href='URL'>Página 3</a></li>
<li><a href='URL de la red social'><i class="fa fa-facebook"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-twitter"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-pinterest"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<ul class='menu'>
<li><a href='URL'>Página 1</a></li>
<li><a>Categoría 1</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a>Categoría 2</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a href='URL'>Página 2</a></li>
<li><a href='URL'>Página 3</a></li>
<li><a href='URL de la red social'><i class="fa fa-facebook"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-twitter"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-pinterest"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
Igual que antes, os he puesto en colorines lo que podéis cambiar para que así os sea más fácil verlo. En rojo tenéis los títulos, en azul los enlaces y en verde el nombre en font-awesome de las redes sociales. El resto del código no lo toquéis porque si borráis algo deja de funcionar. Oh, igual que con el otro podéis añadir categorías, subcategorías, enlaces a redes sociales...
Y ahora ha llegado el momento de ponerlo bonito, de añadir el CSS. ¿Cómo hacéis eso? Pues es muy fácil, con un poco de paciencia y haciendo caso de lo que os digo. Lo primero es que os tenéis que meter en Tema y después en personalizar, luego os vais a avanzado y a añadir CSS. Pegáis el siguiente código (si tenéis otro código ahí, pues dejáis espacio) Ah, si algún código de CSS no os va, cuando acabéis de ponerlo dadle siempre a espacio, ¿ok? El código sirve para ambos y el bloque de redes sociales podéis borrarlo si no las habéis instalado.
*{
margin:0px;
padding:0px;
}
#barra-superior {
margin:auto;
width:100%;
background:#333333; /*Color de fondo de la barra*/
height:40px; /*Anchura de la barra*/
border-bottom: 4px solid #adbcdc; /*Línea de debajo del menú, si no queréis borrad esta línea*/
position:fixed; /*Para que la barra se quede fija*/
z-index:101; /*Para que la barra se quede fija*/
}
ul, ol {
list-style:none;
}
.menu > li {
float:left;
}
.menu{
margin:0 auto;
width:1000px; /*Ancho del menú dentro de la barra, variaremos este valor hasta conseguir el que buscamos*/
}
.menu li a {
color:#ffffff; /*Color de las letras de las pestañas*/
font:normal normal 10px Arial; /*Tamaño y tipografía de las pestañas*/
text-transform:uppercase; /*Para que esté en mayúsculas, sino borrad esta línea*/
letter-spacing: 2px; /*Espaciado entre caracteres, si no queréis borrad la línea*/
text-decoration:none;
padding:20px 5px;
display:block;
cursor:pointer;
}
.menu li a:hover {
color: #faefe6; /*Color de las pestañas al pasar el ratón por encima*/
}
.menu li i{ /*Esto es para los iconos sociales, si no los tenéis borrad este bloque*/
color: #ffffff; /*Color de los iconos sociales*/
font-size: 14px; /*Tamaño de los iconos sociales*/
padding:0px 5px;
}
.menu li i:hover{ /*Esto es para los iconos sociales, si no los tenéis borrad este bloque*/
color: #faefe6; /*Color de los iconos sociales al pasar por encima*/
}
.menu li ul {
background-color: #f4f0f1; /*Color de fondo de las subpestañas*/
display:none;
position:absolute;
min-width:140px;
}
.menu li ul a { /*Si queréis que la letra sea igual que las pestañas, borrad esta línea*/
color: #666666; /*Color de las letras de las subpestañas*/
font:normal normal 10px ARIAL; /*Tamaño y tipografía de las subpestañas*/
text-transform: uppercase; /*Para que esté en mayúsculas, sino borrad la línea*/
letter-spacing: 2px; /*Espaciado entre caracteres, si no lo queréis borrad la línea*/
}
.menu li ul a:hover { /*Si queréis que la letra sea igual que las pestañas, borrad esta línea*/
color: #F9A799; /*Color de las letras de las subpestañas al pasar el ratón por encima*/
}
.menu li:hover > ul {
display:block;
}
margin:0px;
padding:0px;
}
#barra-superior {
margin:auto;
width:100%;
background:#333333; /*Color de fondo de la barra*/
height:40px; /*Anchura de la barra*/
border-bottom: 4px solid #adbcdc; /*Línea de debajo del menú, si no queréis borrad esta línea*/
position:fixed; /*Para que la barra se quede fija*/
z-index:101; /*Para que la barra se quede fija*/
}
ul, ol {
list-style:none;
}
.menu > li {
float:left;
}
.menu{
margin:0 auto;
width:1000px; /*Ancho del menú dentro de la barra, variaremos este valor hasta conseguir el que buscamos*/
}
.menu li a {
color:#ffffff; /*Color de las letras de las pestañas*/
font:normal normal 10px Arial; /*Tamaño y tipografía de las pestañas*/
text-transform:uppercase; /*Para que esté en mayúsculas, sino borrad esta línea*/
letter-spacing: 2px; /*Espaciado entre caracteres, si no queréis borrad la línea*/
text-decoration:none;
padding:20px 5px;
display:block;
cursor:pointer;
}
.menu li a:hover {
color: #faefe6; /*Color de las pestañas al pasar el ratón por encima*/
}
.menu li i{ /*Esto es para los iconos sociales, si no los tenéis borrad este bloque*/
color: #ffffff; /*Color de los iconos sociales*/
font-size: 14px; /*Tamaño de los iconos sociales*/
padding:0px 5px;
}
.menu li i:hover{ /*Esto es para los iconos sociales, si no los tenéis borrad este bloque*/
color: #faefe6; /*Color de los iconos sociales al pasar por encima*/
}
.menu li ul {
background-color: #f4f0f1; /*Color de fondo de las subpestañas*/
display:none;
position:absolute;
min-width:140px;
}
.menu li ul a { /*Si queréis que la letra sea igual que las pestañas, borrad esta línea*/
color: #666666; /*Color de las letras de las subpestañas*/
font:normal normal 10px ARIAL; /*Tamaño y tipografía de las subpestañas*/
text-transform: uppercase; /*Para que esté en mayúsculas, sino borrad la línea*/
letter-spacing: 2px; /*Espaciado entre caracteres, si no lo queréis borrad la línea*/
}
.menu li ul a:hover { /*Si queréis que la letra sea igual que las pestañas, borrad esta línea*/
color: #F9A799; /*Color de las letras de las subpestañas al pasar el ratón por encima*/
}
.menu li:hover > ul {
display:block;
}
Lo que está en naranja podéis modificarlo como queráis, lo que está en rojo y verde podéis quitarlo si queréis.
Algunas veces, no sé por qué, la aplicación de este código hace que en el apartado de diseño salgan unos puntitos que no estaban ahí antes pero que no afectan al funcionamiento del blog. No sé por qué salen. Este menú lo tengo en todos mis blogs y en uno me sale eso y en los otros dos no, si alguien le encuentra explicación que me lo diga.
Y ya estaría, así es como podéis poner un menú. Yo de momento no tengo subpestañas pero en el resto de mis blog sí que los tengo, así que os podéis pasar si queréis para ver cómo funcionan. Un abrazo enorme y si tenéis dudas podéis preguntarme por rrss.
De dónde he sacado esto: Mi ventana favorita
De dónde he sacado esto: Mi ventana favorita
No hay comentarios:
Publicar un comentario