Sí, hoy vamos a ver como instalar un menú horizontal con pestañas en Blogger, como el que yo tengo en este Blog y en el de Servicios de Diseño Gráfico, lo he englobado dentro de los artículos de Programación Básica para Bloggers porque para personalizarlo vamos a necesitar saber un poquitín de programación. No mucha, sinceramente, ya que no vamos a analizar el código paso a paso, solo las opciones a personalizar. Con haber seguido los tutoriales de programación que hemos visto hasta ahora podéis hacer un menú como el mío sin problema, así que no tengáis miedo a intentarlo, ¡seguro que os queda genial!
El código que vamos a necesitar es este:
Es mi menú del Blog de Servicios de Diseño Gráfico.
Si lo copiáis tal cual como elemento HTML/Javascrip en el lateral de vuestro Blog, os aparecerá un menú sencillo, sin formato, tan solo una lista. Puede ser útil para aquellos que queráis poner el índice de vuestras páginas en el sidebar en vez de en la cabecera. Pero hoy vamos a ver como dar formato a este menú, añadir tus propias pestañas/subpestañas y colocarlo en el Blog sin problema.
Prepara nuestra Plantilla para añadir un Menú con Pestañas
Para que nuestro menú funcione, primero tenemos que hacer unos cambios en la Plantilla HTML de nuestro Blog.
Hacemos click en cualquier zona dentro de nuestra plantilla y abrimos el buscador interno: Ctrl + F
Buscamos: class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
Eliminamos class='tabs'
El código después del cambio deberá ser: id='crosscol' maxwidgets='1' showaddelement='yes'>
Lo eliminamos también.
El código resultante debe ser:
Ahora vamos a eliminar las Tabs, para que nuestro menú horizontal con pestañas se vea correctamente cuando lo incluyamos en Diseño.
Para ello buscamos: .tabs-inner .section:first-child {
Encontraremos este código en nuestra plantilla, encabezado por /* Tabs
Eliminamos todo lo que hay debajo de
/* Tabs
----------------------------------------------- */
Hasta llegar a
/* Columns
----------------------------------------------- */
La parte del código dentro de /* Tabs debe quedar vacía.
Y en su lugar copiamos el siguiente código:
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
El código resultante sería:
/* Tabs
----------------------------------------------- */
#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
/* Columns
----------------------------------------------- */
Comprobamos en Vista Previa que todo está correcto y guardamos los cambios. Con este sencillo cambio, ya podemos usar cualquier tipo de menú con pestañas/subpestañas y que éstas se vean correctamente.
Personalizar Menú con Pestañas
Ahora volvemos al primer código, al del menú, para personalizarlo y finalmente instalarlo en nuestro Blog.
Si os habéis fijado, ese código no es nada más que una lista, como las que aprendimos a hacer en esta entrada.
Así que nos será muy sencillo interpretarla. Antes de empezar, estructura el orden que quieres para tus pestañas principales y las subpestañas y copia los enlaces de las mismas para tenerlos a mano.
Empezamos.
Para no liarnos, podemos copiar el código que os he dado en un archivo de word. Así no tendremos que ir modificando poco a poco nuestro código en el nuevo elemento HTML/Javascrip que añadiremos al Diseño de nuestro Blog.
La primera parte del código a modificar es ésta:
Mi primera pestaña es Inicio y va enlazada a mi página principal. Solo tienes que cambiar mi enlace por el tuyo y donde pone Inicio poner el nombre que quieras para tu pestaña principal.
Esta primera pestaña no tiene subpestañas.
Pasamos a la siguiente:
Mi Pestaña Papelería tiene dos subpestañas.
Que van dentro de la Pestaña Principal llamada Papelería. Como ésta pestaña Principal no enlaza a ninguna página, solo sirve para englobar las otras dos, no la he enlazado a ninguna página, ésto se consigue escribiendo # donde debería ir el enlace, como podéis ver en el código:
#">Papelería
Empezamos a analizar el código para que puedas modificarlo a tu gusto:
Ahora puedes cambiar mis enlaces y nombres por los tuyos y añadir o quitar las que necesites, para añadir una nueva subpestaña solo tienes que añadir otro código antes de final.
¡Y lo mismo haríamos con el resto del código! Puedes añadir tantas pestañas comoquieras, siempre tendiendo en cuenta el espacio del ancho de tu Blog. Una vez que hayas entendido lo que significa y hace cada uno de los códigos, te resultará sencillo adaptarlo a tus necesidades.
Insertar el Menú en nuestro Blog
En Diseño, añadimos un nuevo elemento HTML/Javascrip, pegamos nuestro código y lo situamos debajo de la cabecera. Nuestro menú aún no está personalizado, eso viene ahora, así que no te preocupes si se ve raro.
Añadir el estilo de nuestro menú en la plantilla HTML
Llegados a este punto ya tenemos nuestra plantilla preparada para poder ver nuestro menú sin problema y hemos adaptado el código del menú a nuestras páginas y subpáginas. Nos queda nada para poder lucir nuevo menú en el Blog.
Vamos a la plantilla HTML del blog, abrimos el buscador y buscamos: ]]>
Justo encima pegamos el siguiente código:
|
/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:#F5A9D0; /* Color de fondo */
border-radius:20px; /* Bordes redondeados */
}
.menu {
width: 100%;
float: left;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 20px 20px; /* Bordes redondeados del submenú */
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#F5A9D0 url(http://lh4.googleusercontent.com/-iqgCHipLGx4/T5DqLrsVALI/AAAAAAAACaI/bcIY7SV8s5I/s35/separador.gif) bottom right no-repeat;
color:#6E6E6E; /* Color de la fuente */
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px; /* Espacio entre cada pestaña */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #A9E2F3; /* Color de las pestañas al pasar el cursor */
color:#045FB4; /* Color del texto al pasar el cursor */
text-decoration:none;
}
.menu li ul {
background:#A4A4A4; /* Color de fondo del submenú */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Ancho del submenú */
z-index:100;
border-top:1px solid #fff; /* Borde superior del submenú */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 20px 20px; /* Borde de las subpestañas */
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#A9E2F3; /* Color de las subpestañas al pasar el cursor */
color:#ffffff;
text-decoration:none;
}
|
Este es mi código, si lo copias tal cual, tu menú será como el mío.
Pero modificando las partes del código que te he marcado en rojo, puedes aplicar los colores, tamaños y efectos de redondeo que tú quieras, es cuestión de ir probando en Vista Previa hasta que des con el resultado que más te guste.
Una web genial para el tema de los colores HTML es ESTA, es la que yo uso y funciona muy bien.
Bueno, pues espero que esta información te sea útil. Este tipo de menús tardan menos en cargar que los de imágenes, por lo que reducen el tiempo de carga del Blog y la verdad es que estéticamente quedan muy bien. Además de que mejoran la usabilidad y navegación para nuestras visitas.
Ya me cuentas si te has animado a usarlo y los resultados.
Un fuerte abrazo,
Celia ♥
|
|
|
|
|
¿Te ha resultado interesante esta entrada?
¡¡Compártela en tus redes sociales!!
Puede que a alguno de tus contactos también le resulte útil
Gracias ♥
Súper claro!!! Voy a intentarlo, besos!!
ResponderEliminar¡Ya me cuentas que tal! :D
Eliminar¡Besos!
Un currazo de tres pares de narices pero la verdad es que en cuanto tenga un dia entero para dedicarle al blog, este es una de las mejoras que quiero aplicar.
ResponderEliminarMuchas gracias por tus tutoriales, eres una crack!!
Lou
Verás que es sencillo, pasito a pasito ;)
Eliminar¡Feliz finde, guapa! :)
Holaaa, me encanta tu entrada, y he querido probarla pero no me deja =( no encuentro el tab :.tabs-inner .section:first-child {. De después de tab no tiengo las columnas (no sé si eso tiene algo que ver xD).
ResponderEliminarAl borrar las tabs que encuentro pongo vista previa y no me carga nada =/
Sabes que problema puede haber?
Gracias por adelantado, espero conseguirlo =)
¡Hola Jossy!
EliminarPerdona, no había visto tu comentario :S
¿Puedes pasarme el enlace de tu blog y le echo un ojo cuando tenga un ratito? ¿tienes el código instalado!
¡¡Gracias a ti y perdona el despiste!!
Está genial, iba dudando entre usar las pestañas de blogger o montar algo así, y creo que esto es mucho más flexible. Ya sabía hacer lo de la lista, pero lo de montar todo el css y localizar el código a modificar en la plantilla se me hacía muy cuesta arriba. Después de hacer unas pruebas, veo que tiene buena pinta. Muchas gracias.
ResponderEliminar¡¡Me alegro de que te sea útil!!
Eliminargracias a ti :)