Diario IFCD0110 Castro Urdiales: MENU SIMPLE Y MENU CON PESTAÑAS PARA EL BLOG

¿Qué es un menú?

Es una lista de pestañas que nos indica distintas secciones del blog.

¿Para qué sirve?

Es una forma ordenada y sencilla de presentar y encontrar las distintas entradas del blog

¿Cómo crear un menú simple?

Para poder crear un menú primero deberemos asignar etiquetas a las distintas entradas.

¿Qué es una etiqueta?

Una etiqueta es el nombre de una clasificación o grupo que se asigna a una entrada

¿Para qué sirve?

Nos ayuda a una mejor organización (junto con el menú) de nuestros distintos artículos, sin su ayuda, el menú no podría funcionar adecuadamente.

¿Cómo crear una etiqueta?

Para poder crear una etiqueta y asignarla a una entrada del blog, primero deberemos tener un artículo o entrada ya hecho.

Vamos a situarnos aquí.

Hacemos click entonces donde señala la flecha, es decir, en el nombre del blog.

Nos llevará a esta sección, que es la vista general

Estando aquí, haremos click en la siguiente sección de éste menú, que es "entradas"

Veremos esto:

Primero seleccionaremos la entrada o entradas que queremos que tengan etiqueta.

Nos saldrá este mensaje

En el hueco que tenemos escribiremos el nombre de ésta etiqueta y le damos a "aceptar".

Vamos ubicando entonces los artículos con las etiquetas que queramos darles para organizarlos bien. Recordar no colocar más de una etiqueta o no tendrá ningún sentido este orden ya que aparecerá el artículo en varias partes del menú.

Cuando tengamos todas las etiquetas que queremos, vamos a la pestaña de "diseño" que hemos visto en la segunda foto.

Ésta es la visualización de la estructura de nuestro blog.

Aquí de hacemos click a "Añadir un gadget", tras esto, nos saldrá una ventana con múltiples opciones a escoger. Nosotros estamos interesados en el de "Páginas"

Hacemos click para agregarlo y nos saldrá ésta ventana para que establezcamos las opciones deseadas. Hacemos click en "Añadir enlace externo"

Minimizamos la ventana haciendo click en la raya horizontal que está en la esquina superior derecha, al lado del cuadrado y vamos a una entrada de nuestro blog, dándole click en "ver", que estará visible dejando el cursor sobre el nombre de la entrada.

Una vez en dicho artículo, seleccionamos la etiqueta para que nos lleve a todos aquellos artículos que la tengan.

Copiamos el link que sale en la página y lo pegamos aquí,tras borrar el http:// que nos aparece en la barra de dirección web.

Posteriormente le damos a guardar enlace

Ya tendremos nuestra primera pestaña del menú, haremos entonces de la misma manera el resto hasta que tengamos todas las que queremos. Cuando hayamos finalizado, le haremos click a Guardar

Hacemos click a "guardar disposición" para que se guarden los cambios,y ya podemos recargar la blog para ver el resultado.

Dependiendo de la plantilla que tengamos en nuestro blog, nos aparecerá con una estética u otra. Este ejemplo lo he cogido de una compañera ya que, el mío lo enseñaré en el siguiente apartado

Menú con pestañas desplegables

Éste no funciona como el anterior, aquí ya debemos entrar en código HTML y olvidarnos de los gadgets, no obstante, las etiquetas sí que las necesitaremos tenerlas listas.

Si es el caso de que tenemos un menú como el anterior,deberemos quitar las páginas ya que si no, nos saldrá una visualización bastante extraña cuando lo modifiquemos.

Ésta es la visualización por defecto que tendrá, la coloco porque va a ser necesaria tenerla de referencia antes de modificar nada para no perdernos.

Lo primero es entrar en Plantilla | Edición de HTML y SIN expandir los artilugios busca esta línea:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Elimina lo que está en color rojo.
Es posible que tengas muchas partes como la que está en rojo, elimina todas las que encuentres.

Luego busca esta parte en la plantilla:

/* Tabs
----------------------------------------------- */

Y elimina todo lo que haya dentro de ello. Por ejemplo, en la plantilla Awesome Inc. eliminarías todo lo que está en color verde

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;

border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-bottom {
bottom: 0;
}

.tabs-inner .widget li a {
display: inline-block;

margin: 0;
padding: .6em 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}
/* Headings
----------------------------------------------- */

Ya eliminado, en su lugar agrega lo siguiente:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}

Una vez hecho lo anterior podremos agregar cualquier menú y estos se verán como deben verse y las subpestañas podrás desplegarse sin problema.

Para poner este menú horizontal con submenús en tu blog entra en la Edición HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos:

/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:#333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Color de fondo del submenú */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3iDLVMe4jtleu8d24_5rfnjm6tkhi2tSW5WTMv7JpKZxOMHnrFUgNtpRIpqBd8InNBW-qf2dJVS-C-2NSwpLT79djTy74P2vHtmD6vyO8o9QwA-mcAyWkwdhTNnIn_jOQP2NfuSjkI7ow/) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#2580a2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3iDLVMe4jtleu8d24_5rfnjm6tkhi2tSW5WTMv7JpKZxOMHnrFUgNtpRIpqBd8InNBW-qf2dJVS-C-2NSwpLT79djTy74P2vHtmD6vyO8o9QwA-mcAyWkwdhTNnIn_jOQP2NfuSjkI7ow/) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search {
width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrBSIyn-loYD-VzZ94hFRf_TcLu1X4wG3cx4rNBPabZbojegPz-cpEUiRoMpVucKNR2PFZB5kMQvm_CG5P3fLVWCnzj4pUgzQOhHCBAuyxxwXtOlBvcFpw_34il8toQOm9pA_1pM93C_0/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Luego entra en Diseño y en un gadget HTML/Javascript pega lo siguiente:

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pestaña 1</span></a></li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestaña 2.1</a><ul>
<li><a href='URL del enlace'>Pestaña 2.1.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Pestaña 2.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.3</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.4.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.2.5</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.6</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.6.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.3</a></li>
<li><a href='URL del enlace'>Pestaña 2.4</a></li>
<li><a href='URL del enlace'>Pestaña 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 3</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 3.1</a></li>
<li><a href='URL del enlace'>Pestaña 3.2</a></li>
<li><a href='URL del enlace'>Pestaña 3.3</a></li>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 4</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a class='fly' href='#'>Pestaña 4.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.6</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 4.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 5</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
</ul>
</li>


<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' size='28' type='text' value='Buscar...'/></form>
</li>

</ul>
</div>

Guarda los cambios y listo. En color verde puedes ver las áreas para cambiar los colores.

Por experiencia propia recomiendo que, si se quiere modificar quitando, agregando pestañas o cambiando los nombres de éstas, que, primero, se haga una copia de seguridad, que se guarde el html tal y como está para posteriormente actualizar el blog con éstos cambios y, visto cómo queda, guiarnos por ello antes de tocar nada.

Otro consejo es que para editar el HTML usemos un editor como notepad ++ ya que nos facilitará el trabajo para visualizarlo mejor (aún con todo, tiene su trabajo ya que no está tabulado y por ello podemos perdernos.

Antes de  puedes agregar más pestañas si lo deseas.
Si quisieras añadir otra pestaña simple, agrega una línea como esta:

<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña</span></a></li>

Si quisieras agregar una pestaña con subpestañas entonces agrega este código:

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña</span></a>
<ul class="sub">
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
</ul>
</li>

Y si quisieras que una de las subpestañas tuviera otras subpestañas entonces elimina una línea como la que está en color naranja y cámbiala por un código como este:

<li><a href="#" class="fly">Sub pestaña</a>
<ul>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
</ul>
</li>

Con esta variación del menú podemos agrupar más enlaces y categorías en poco espacio, y que además, al conservar el buscador dentro del menú hace que sea un menú práctico, compacto y útil.

Y aquí está mi código

<li class='top'><a class='top_link' href='http://melaniifcd0110castrourdiales.blogspot.com.es/'><span>Página principal</span></a>

</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Confección web</span></a>

<ul>

<li><a href='http://melaniifcd0110castrourdiales.blogspot.com.es/search/label/Apuntes%20UF1302'>Teoría</a></li>

<li><a href='http://melaniifcd0110castrourdiales.blogspot.com.es/search/label/Ejercicios%20UF1302'>Ejercicios</a></li>

<li><a href='http://melaniifcd0110castrourdiales.blogspot.com.es/search/label/Prueba%20de%20validaci%C3%B3n%20UF1302'>Prueba de validación</a></li>

</ul>

</li>

<ul>

<li><a href='URL del enlace'>Teoría</a></li>

<li><a href='URL del enlace'>Ejercicios</a></li>

<li><a href='URL del enlace'>Prueba de validación</a></li>

</ul>

</li>

<ul>

<li><a href='URL del enlace'>Teoría</a></li>

<li><a href='URL del enlace'>Ejercicios</a></li>

<li><a href='URL del enlace'>Prueba de validación</a></li>

</ul>

</li>

<ul>

<li><a href='URL del enlace'>Teoría</a></li>

<li><a href='URL del enlace'>Ejercicios</a></li>

<li><a href='URL del enlace'>Prueba de validación</a></li>

</ul>

</li>

<ul>

<li><a href='URL del enlace'>Teoría</a></li>

<li><a href='URL del enlace'>Ejercicios</a></li>

<li><a href='URL del enlace'>Prueba de validación</a></li>

</ul>

</li>

</ul>

</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Diseño gráfico</span></a>

<li><a href='http://melaniifcd0110castrourdiales.blogspot.com.es/search/label/Apuntes%20de%20dise%C3%B1o%20gr%C3%A1fico'>Teoría</a></li>

<li><a href='http://melaniifcd0110castrourdiales.blogspot.com.es/search/label/Ejercicios%20de%20dise%C3%B1o%20gr%C3%A1fico'>Ejercicios</a></li>

</ul>

</li>

<li class='top'><a class='top_link' href='http://melaniifcd0110castrourdiales.blogspot.com.es/search/label/Diario%20de%20clase'><span class='down'>Diario de clases</span></a>

</li>

<li>

</li>

</ul>

</div>

Está tabulado para facilitar su entendimiento, no obstante, lo subiré a drive.

Finalmente, he aquí el resultado tras un par de cambios en su estética:

Diario IFCD0110 Castro Urdiales

menu desplegable

miércoles, 25 de junio de 2014

MENU SIMPLE Y MENU CON PESTAÑAS PARA EL BLOG

¿Qué es un menú?

¿Para qué sirve?

¿Cómo crear un menú simple?

Menú con pestañas desplegables

Y aquí está mi código

No hay comentarios:

Publicar un comentario

analytics