Comenzamos un nuevo año lleno de
buenos propósitos, uno de ellos podría ser organizar las entradas
de nuestro blog de Blogger por temáticas poniendo pestañas
desplegables en nuestro menú horizontal.
Para ello introduciremos unas líneas de código en HTML en dos partes del
blog.
Antes de empezar, descarga una
copia de seguridad de la plantilla.(Ve al menú de administración del blog y pincha en "plantilla" y después arriba a la
derecha).
En la red se exponen diferentes maneras de hacer este tipo de menú, así que el objetivo de este post es aclarar y resumir las tareas que hay que hacer ayudándome de tutoriales de otros autores.
A continuación voy a explicar dos maneras de hacer el
menú desplegable para que elijáis la que más os guste.
| OPCIÓN 1: Recomendada para quien no esté familiarizado
con HTML o quiera trabajar con un entorno visual (MenuMakers). |
Para lograr nuestro objetivo vamos a
realizar dos tareas principales insertando unas líneas de código en
HTML en diferentes pestañas del menú de Administración del
Blog.(Ver tabla).
TAREAS
|
Pestaña
|
TAREA 1 : Insertar el estilo y la estructura del menú
( pestañas,
subpestañas y enlaces). |
|
| TAREA 2 : Modificar el código de la plantilla para que acepte cualquier
formato de menú. |
|
- Ve a la pestaña de Diseño, pincha en
"Añadir un gadget" que está justo debajo de la cabecera
de tu blog y añade un gadget HTML.
- Con ayuda de un generador de menús
(MenuMakers) creamos y descargamos el código css del menú
desplegable. Existen varios MenuMakers, purecssmenu
es online y en este videotutorial ,
Miri Alvarez, explica muy bien cómo usarlo. Otro es apycom.
- Abre el gadget de HTML pinchando en
“editar”, copia las líneas del código css descargado
anteriormente desde <!-- Start
PureCSSMenu.com STYLE → hasta <!--
End PureCSSMenu.com MENU → , pégalo dentro de gadget de
HTML y dale a “guardar”.
Advertencia: Si ya tienes un gadget de página hecho, debes eliminarlo (no se borrarán las páginas).
Enlaces: Si
quieres enlazar internamente con entradas del blog, copia y pega la
url que aparece en la barra de navegación cuando pinchas en una
entrada o en una etiqueta de una entrada.
- Para modificar el código en la
plantilla, pinchad en la pestaña de Plantilla y después en "Editar
HTML", seguidamente pinchad dentro de la ventana y pulsar Ctrl+F
para que aparezca la barra de buscador.
- Vamos a hacer dos búsquedas y dos
modificaciones:
- Primera
búsqueda y modificación:
- Escribimos o pegamos el texto
<b:section class='tabs en
el buscador (Search) y pulsamos ENTER. Una vez localizado, como
podéis ver en la imagen, borramos sólo el texto class='tabs
en las dos líneas que aparecen destacadas en amarillo.
- Segunda
búsqueda y modificación:
- Buscamos /*
Tabs y borramos todo el texto que aparece debajo de la línea
discontinua hasta el siguiente apartado con línea discontinua. A
continuación, sustituimos lo que hemos borrado por este código:
ul {z-index: 200;
padding:0 !important;}
li:hover {position:relative;}
#crosscol
ul li {padding:0 !important;}
- Al final debe quedar así:
- Para finalizar pinchad en "guardar
plantilla" y si hemos seguido bien los pasos ya hemos
terminado.
| OPCIÓN 2: Recomendada para quien esté familiarizado con HTML
o desee trabajar con HTML. |
- En este caso, también vamos a
realizar dos tareas principales insertando unas líneas de código en
HTML en diferentes pestañas del menú de Administración del
Blog.(Ver tabla).
TAREAS
|
Pestaña
|
| TAREA 1 :
Insertar la estructura del menú ( pestañas, subpestañas
y enlaces). |
|
| TAREA 2 :
Modificar las líneas del código para insertar el estilo de
las pestañas del menú. |
|
Esta tarea es muy similar a la tarea 1
de la opción 1 explicada anteriormente, la única diferencia es que
las líneas de código HTML que se pegarán en el gadget de “HTML”se
elaboran en un procesador de textos y
no incluyen la información sobre el estilo de las
pestañas.
- Crea un gadget de “HTML” en la
pestaña de Diseño (ver explicación en la tarea1 de la opción 1).
- Obtén o haz las líneas del código
de la estructura del menú que pegarás en el gadget de HTML.
Voy a explicar el significado de estas
líneas:
Para añadir una pestaña se escribe:
<li> <a
href='URL'>Nombre de pestaña</a> </li>
Cada pestaña de nuestro menú está
contenida entre las etiquetas <li> y </li>
Nosotros debemos rellenar la URL de
enlace y el nombre de la pestaña.
Para añadir subpestañas, escribimos
<ul> antes de </li> y hacer el listado de cada subpestaña
de la misma forma que las pestañas. Una vez terminado cerramos
poniendo </ul>, como podéis ver aquí.
<li>
<a href='URL'>Nombre de pestaña</a>
<ul><li><a
href='URL'>Nombre subpestaña1</a></li> </ul>
</li>
El
código que podéis copiar para un menú de una pestaña con dos
subpestañas es este:(el código con el color de fondo en verde, se
refiere al nombre del
identificador del elemento del menú y
hay que ponerlo siempre al principio y al final de el conjunto de
todos los códigos de pestañas y subpestañas que queramos poner).
<div
id='mbwnavbar'>
<ul
id='mbwnav'>
<li><a
href='URL'>Nombre de pestaña</a>
<ul>
<li><a
href='URL'>Nombre subpestaña1</a></li>
<li><a
href='URL'>Nombre subpestaña2</a></li>
</ul>
</li>
</div>
- Para poner más pestañas o subpestañas
copia y pega las veces que desees.
- Para finalizar este paso, pega el
código HTML de la estructura del menú en el gadget de HTML que
creaste anteriormente.
Esta tarea es muy parecida a la tarea
2 de la opción 1 explicada anteriormente, la única diferencia es
que vamos a hacer una sola búsqueda y modificación en la Plantilla.
- Vamos
a hacer una búsqueda y una modificación:
Buscamos ]]></b:skin>,
dejamos espacio encima de ese texto y pegamos nuestro código de
formato de las pestañas que podemos descargar, copiar y pegar de
múltiples webs como estas:
-
-
El Potro en ciudadblogger
Para finalizar pinchad en "guardar
plantilla"y ya hemos
terminado.
Advertencia: Debéis fijaros en que los
identificadores de elementos
(id) del
menú se llamen igual tanto en las líneas del gadget de HTML como en
las de la plantilla. Por ejemplo, Isabel Leyva le llama
mbwnavbar,
mientras que Lireth y El Potro le llaman
menuWrapper.
Poner pestañas desplegables en
Wordpress es mucho más sencillo porque no hay que trabajar con el
código HTLM pero esta actividad puede ser una buena práctica para
familiarizarnos con este lenguaje.
Espero que os haya quedado claro todo
y mucha suerte en el intento.
+11.37.19.png)
Entradas
