Ya puesta y metida en el tema decidí añadir más widgets por si en un futuro decido añadir algo nuevo a la plantilla, así que los añadí en los lugares que por defecto deberían venir en la plantilla, es decir en:
header, sidebar, main, footer.
Para hacerlo hay que situarse en Panel/Diseño/Edicción HTML y "Expandir plantillas de artilugios"
Para añadir un nuevo "widget en la sidebar" (columna) buscaremos lo siguiente:
Y lo sustituimos por:
Ahora vamos a añadir un nuevo "widget en el header" ( cabecera-logo) buscaremos:
Y lo sustituimos por:
Le toca el turno a "main" (entradas-post) buscaremos:
Lo sustituimos por:
Y por último vamos a añadir la opción de nuevos "widgets en footer" (pié de página- final del blog) para ello buscaremos:
En su lugar añadiremos:
*showaddelement puede ser "yes" o "no", donde "yes" es la opción predeterminada pero si encontramos "no" es obvio que por eso no aparece en nuestra sidebar la opción de añadir elementos de página.
Ahora es cuando se puede proceder a añadir los MENUS UTILIZANDO LOS ENLACES DE ABAJO
HORIZONTAL- TUTORIAL
VERTICAL- TUTORIAL
Este es un menú vertical con subpestañas hecho sólo con CSS, no tiene nada de Javascript o de alguna librería, así que para aquellos que prefieren las cosas simples esta es una buena opción para organizar las etiquetas del blog o cualquier enlace.
Pestaña 1
Pestaña 1.1Pestaña 1.2Pestaña 2
Pestaña 2.1Pestaña 2.2Pestaña 2.3Pestaña 2.4Pestaña 2.5Pestaña 3
Pestaña 3.1Pestaña 3.2Pestaña 3.3Pestaña 4
Pestaña 4.1Pestaña 4.2Pestaña 4.3Pestaña 4.4Pestaña 5
Pestaña 5.1Pestaña 5.2
Colocarlo es bastante sencillo, sólo entra en Diseño
Edición de HTML y antes de
]]> pega los estilos siguientes:
/* Menú vertical con subpestañas
----------------------------------------------- */
#menuvertical {
text-align: center;
width:100%;
}
#menuvertical ul { list-style-type: none; padding:0;}
#menuvertical ul li.nivel1 {
width: 162px; /* Ancho de las pestañas */
}
#menuvertical ul li.primera {
border-top: solid 1px #FFF; /* Borde superior de la primera pestaña */
}
#menuvertical ul li {padding:0;}
#menuvertical ul li a {
display: block;
text-decoration: none;
color: #fff; /* Color del texto */
background-color: #045FB4; /* Color de fondo */
border: solid 1px #fff; /* Borde de las pestañas */
border-top: none;
padding: 8px;
position: relative;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
background-color: #6E6E6E; /* Color de fondo al pasar el mouse */
color: #000;
position: relative;
}
#menuvertical ul li a.nivel1 {
display: block!important;
display: none;
position: relative;
}
#menuvertical ul li ul {
display: none;
}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 161px;
top:-1px!important;
top:-31px;
}
#menuvertical ul li ul li a {
width: 160px;
background-color: #045FB4; /* Color de fondo subpestañas */
color: #fff; /* Color del texto subpestañas */
}
#menuvertical ul li ul li a:hover {
position: relative;
background-color: #6E6E6E; /* Color de fondo al pasar el mouse subpestañas */
color: #000; /* Color del texto al pasar el mouse subpestañas */
}
Ahora entra en Diseño
Elementos de la página (EL GADGET CREADO)
Añadir un gadget
HTML/Javascript y ahí pega lo siguiente:
Agrega la URL de los enlaces donde se indica y listo.
Si quieres agregar otra pestaña SIN subpestañas entonces añade antes de
Si quieres agregar una pestaña CON subpestañas entonces añade igual antes de
Menú vertical desplegable de pestañas con jQuery
Menú horizontal con efecto deslizante (actualizado)
Menú vertical desplegable tipo acordeón con jQuery
Gadget de etiquetas en forma de menú desplegable
No hay comentarios:
Publicar un comentario