Debo decir que estoy súper contenta porque habéis estrenado el formulario para pedir tutoriales, tú también puedes hacerlo además de ver el indice de tutoriales, hasta ahora publicados, dandole click aquí o en el menú de arriba donde pone tutoriales
Uno de los tutoriales que nos han pedido es poner un menú desplegable en nuestro blog, en el próximo tutorial será un menú que se desplaza.
Aunque parece muy complicado, es muy sencillo. Recuerdo cuando empecé con mi blog en blogger, que no tenía ni idea de cómo iba todo y leí “menú desplegable”, te juro que en ese momento lo flipaba en colores y lo veía como una misión imposible, quien me iba a decir a mi que más tarde estaría enseñándote a ti y a todos mis dreamers cosas sobre blogging y blogger y que iba a ser yo quien te lo iba a enseñar a ti como hacer este menú para tu blog.
¿Tienes todo preparado? Lo que vas a necesitar es abrir el escritorio de tu blog, para poder entrar en diseño y en plantilla cuando lo necesites y un word, sí, un word, yo lo hago así porque me es más fácil.
Me siento como las típicas personas que te van a enseñar manulidades, pero yo te lo voy a enseñar todo paso a paso, no voy a hacer como ellos que cortan y de repente está ya todo perfecto, que cuando lo intentas hacer tú te sale todo fatal. Ahora sí ¿empezamos?
Escoger las categorías y subcategorías que quieres poner en el menú.
Yo, antes de empezar con el html ni esos rollos me miro bien mi blog y escojo que categorías y subcategorías quiero poner. Como siempre te voy a poner ejemplos, de un blog de literatura, que me encanta leer.
Ejemplo nº1: Blog de literatura – Puedes hacer categorías que sean reseñas, autores, entrevistas, etc. Las subcategorías podrían ser por ejemplo en los reseñas: leido 2016, leido 2017.
Ejemplo nº2: Blog de moda/maquillaje – Siempre puedes poner las típicas categorías de verano, invierno, primavera y otoño.. En el caso de maquillajes también pueden ser día y noche o por colores. Sólo tú sabes realmente de que hablas en tu blog y que categorías harían que estuviese mejor organizado y fuese más fácil para tus lectores navegar por él. De subcategorías serían todos los colores que hayas usado o también, si eres una fanática de todo tipo de pantalones, incluso puedes hacer una que sea pantalones y de subcategoría todos los tipos de pantalones que has enseñado a combinar.
Lo que sí te aconsejo es que dejes siempre la primera pestaña como “inicio” porque les será más fácil a tus lectores entender que si quieren volver a ver la página de inicio deben darle allí, también funciona clicando a la imagen de portada, pero he visto sitios en los que no, así que no está de más nunca tener esa pestaña. .
Elabora el menú
Antes: No olvides hacer una copia de seguridad de tu plantilla yendo a Diseño –> Plantilla –> Crear/Restablecer copia de seguridad y guardas la plantilla actual antes de hacer ningún cambio.
Ahora ya sabes que categorías y subcategorías vas a poner en tu blog, así que vamos a elaborar el menú para que puedas instalarlo en tu blog. Ahora debes abrir un word en blanco y pegar allí el siguiente código, no te olvides ninguna coma ni nada, si te olvidas de algo el código no funcionará.
que para añadirlo a tu blog tienes que darle a diseño: edición html y buscar este código y pegar el código de abajo justo después de esta linea <body expr:class='"loading" + data:blog.mobileClass'>:
<div id='menu-desblegable'>
<ul class='menu'>
<li><div id='buscar-top'><form action='/search' id='searchthis' method='get' style='display: inline;'>
<input class='search-box' name='q' placeholder='BUSCAR' size='30' type='text'/>
</form></div></li>
<li><a href=''>Inicio</a></li>
<li><a>Seccion 1</a>
<ul>
<li><a href='aquienlaces'>Seccion 1a</a></li>
<li><a href='aquienlaces'>Seccion 1b</a></li>
<li><a href='aquienlaces'>Seccion 1c</a></li>
</ul>
</li>
<li><a href='aquienlace'>Seccion 2</a></li>
<li><a>Seccion 3</a>
<ul>
<li><a href='aquienlace'>Seccion 4a</a></li>
<li><a href='aquienlace'>Seccion 4b</a></li>
<li><a href='aquienlace'>Seccion 4c</a></li>
<li><a href='aquienlace'>Seccion 4d</a></li>
<li><a href='aquienlace'>Seccion 4e</a></li>
<li><a href='aquienlace'>Seccion 4f</a></li>
</ul>
</li>
</ul>
</div>
Ahora, una vez tengas pegado el código en tu word deberás cambiar lo siguiente:
Naranja: Cambiarlo por la url que corresponda a cada categoría o subcategoría o a la de tu blog si se trata del inicio.
Verde: Cambiar por el nombre de cada categoría o subcategoría.
Si te fijas, en las categorías desplegables tienes un # donde supuestamente iría el enlace de la pestaña, si quieres que simplemente sea el nombre de la categoría para ordenar tus pestañas desplegables deja el #, si por el contrario quieres que también el “título” del desplegable también lleve a alguna parte de tu blog en concreto ponle el enlace en el lugar del # y solucionado.
Nota rápida: Recuerda que para saber que url tiene una etiqueta lo único que tienes que hacer es clicar en la etiqueta y copiar la url que aparezca.
¿Necesitas añadir más…?
Añadir más subpestañas: Sólo tienes que copiar <li><a href=’URL‘>Subcategoría 1</a></li> debajo de la última subcategoría y solucionado, cópialo tantas veces como te haga falta, sobretodo no te olvides que va justo antes de </ul>.Añadir más categorías desplegables: Para esto deberás copiar más código y pegarlo donde lo necesites, en concreto el código será este, que para añadirlo a tu blog tienes que darle a diseño: edición html y buscar este código y pegar el código de abajo justo después de esta linea <body expr:class='"loading" + data:blog.mobileClass'>:
<div id='menu-desblegable'>Añadir más categorías simples, sin desplegables: Simplemente deberás copiar <li><a href=’URL‘>Categoría</a></li> y pegarlo donde lo necesites.
<ul class='menu'>
<li><div id='buscar-top'><form action='/search' id='searchthis' method='get' style='display: inline;'>
<input class='search-box' name='q' placeholder='BUSCAR' size='30' type='text'/>
</form></div></li>
<li><a href=''>Inicio</a></li>
<li><a>Seccion 1</a>
<ul>
<li><a href='aquienlaces'>Seccion 1a</a></li>
<li><a href='aquienlaces'>Seccion 1b</a></li>
<li><a href='aquienlaces'>Seccion 1c</a></li>
</ul>
</li>
<li><a href='aquienlace'>Seccion 2</a></li>
<li><a href='aquienlace'>Seccion3</a></li>
<li><a>Seccion 4</a>
<ul>
<li><a href='aquienlace'>Seccion 4a</a></li>
<li><a href='aquienlace'>Seccion 4b</a></li>
<li><a href='aquienlace'>Seccion 4c</a></li>
<li><a href='aquienlace'>Seccion 4d</a></li>
<li><a href='aquienlace'>Seccion 4e</a></li>
<li><a href='aquienlace'>Seccion 4f</a></li>
</ul>
</li>
</ul>
</div>
Igualmente si tienes cualquier duda o necesitas ayuda para elaborar tu menú, contáctame y te ayudo.
Una vez tengas elaborado tu menú deberás ir a Diseño y en el apartado que pone “cross-column”, donde visualmente estaría el menú, añadir un gadget html/javascript y pegar tu código html con tu menú hecho.
Dale tu toque al menú
No me mates, lo se, tu menú está todo descuadrado y ni funciona ni nada, lo se, ahora lo que debes hacer es darle tu estilo y todo irá de maravilla. ¿cómo dices? Con CSS. Ves a Plantilla –> Personalizar –> Avanzado –> Añadir CSS y pega este código (no te olvides ni una coma):#menu-desblegable {Para encontrar el codigo del color que quieres puedes encontrar una gama amplia en esta página, puedes cambiar todos los que te he marcado en azul que son #numerodelcolor, además puedes cambiar el tipo de borde y la letra y tamaño de ésta. Es muy fácil y lo único que tendrás que ir haciendo es tocando lo que te he marcado en azul hasta que encuentres. Tienes un visor que te va enseñando los cambios, el problema es que no podrás ver las subpestañas, así que yo lo que hago es ir guardando y viendo el blog directamente para así poder ver el desplegable y todo.
margin:auto;
width:100%;
background:#81368e; /*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:800px; /*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 15px Georgia; /*Tamaño y tipografía de las pestañas*/
letter-spacing: 2px; /*Espaciado entre caracteres, si no queréis borrad la línea*/
text-decoration:none;
padding:10px 20px;
display:block;
cursor:pointer;
}
.menu li a:hover {
color: #cccccc; /*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: #adbcdc; /*Color de los iconos sociales*/
font-size: 14px; /*Tamaño de los iconos sociales*/
}
.menu li i:hover{ /*Esto es para los iconos sociales, si no los tenéis borrad este bloque*/
color: #ffffff; /*Color de los iconos sociales al pasar por encima*/
}
.menu li ul {
background-color: #98bbe6; /*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: #000000; /*Color de las letras de las subpestañas*/
font:normal normal 14px Times New Roman; /*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 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: #ffffff; /*Color de las letras de las subpestañas al pasar el ratón por encima*/
}
.menu li:hover > ul {
display:block;
}.search-box{ /*Para cambiar la apariencia de la cajita*/
width:90%; /*Tamaño de la caja entera*/
text-align:center;
padding:3px 0; /*Altura de cajita*/
color:#9c0202; /*Color de las letras cuando escriba el usuario*/
border:1px solid #cccccc; /*Tamaño, estilo y color del borde, si no queremos borde borrar la línea*/
background:#ffffff; /*Color de fondo*/
font: normal normal 11px Lato; /*Tamaño y tipografia de la palabra BUSCAR (o la que hayas escrito)*/
border-radius:2px; /*Bordes redondeados, si no los quieres, borrar esta línea*/
}
#buscar-top{ /*Para colocarla bien dentro de nuestra barra*/
margin-top:6px; /*Variar para colocarlo bien de altura*/
margin-right:0px; /*Variar para colocarlo bien a lo ancho*/
}
Últimos consejos:
- Utiliza colores que combinen bien con tu blog, no pongas colores a lo loco y intenta que los colores de la tipografía y el fondo no contrasten mucho. Por ejemplo, no pongas fondo negro con letras verde fosforito porque no se va a poder ver nada bien y va a molestar a la vista.
- No hagas desplegables infinitos, escoge tus categorías y subcategorías importantes. Si tienes muchas, revisa seriamente tu blog porque entonces quiere decir que estás abarcando mucho más trabajo del que deberías y puedes acabar agobiándote.
- Pon las categorías importantes, no pongas una pestaña dedicada a premios. Todos conocemos los premios que nos damos unos blogs a otros, se agradecen mucho pero no hace falta que uses el menú para ponerlos, yo cometí ese error y me arrepiento mucho. El menú es una forma muy visual de ver de que trata tu blog.
- Tomate con calma esto de hacer tu menú desplegable, como si tardas una semana, sin agobios.
Fanpage artista
Fanpage Dreaming Graphics/>
Twitter Seguir a @fagrafics
Tweet to @FAGrafics¿Nos regalas un tweet?
Una entrada muy buena y bien explicada aunque no se si lo sabria hacer jaja
ResponderEliminar¡Holaaaaa!
ResponderEliminarHace tiempo que aprendí a ponerlo, aunque me gustaría añadirle sub pestañas a las sub pestañas y nunca me sale ¿podrías hacer un tutorial sobre eso? Te lo agradecería enormemente^^
Besos!!!
María | Krazy Book
Hola gracias guapa, la verdad que con los problemas que me dio, prefiero no hacerlo por ahora, pero me lo apunto.
ResponderEliminarBesos
Creo que gracias a este tutorial mejoraré mi barra que es algo básica en mi blog jaja
ResponderEliminar