miércoles, 3 de diciembre de 2014

como poner barra de menu

1) Dirígete en Blogger a la pantalla principal y en el menú izquierdo de opciones pulsa en "Diseño"


2) Se mostrará el diseño que has decidido crear para tu Blogger. A continuación pulsa dentro del escritorio de diseño "Añadir un Gadget", tratándose de un menú te recomiendo que utilices la opción de Añadir Gadget que según el diseño de tu blogger mejor quede para dejar el menú en la parte superior, a la derecha o a la izquierda. Selecciona el Gadget de Google "HTM/Javascript". 



3) Cuando se abra el cuadro de configuración del gadget "HTML/Javascript" verás una pantalla como la que te muestro en la pantalla inferior, con una caja de texto para poner "Título" y otra caja más grande donde insertar código Javascript.


4) Añade en la caja de texto que tendrá el código Javascript el código que te explico a continuación (copia y pega este texto o el del ejemplo, procura que no haya retornos de carro que dividan en partes incorrectas el código):

<ul id="menu">
<li><a class="selected" href="http://Direccion_de_tu_blog">Inicio</a></li>
<li><a href="Direccion_blog/search/label/concepto_agrupador">Opción_de_ Menu</a></li>
</ul>
  • Dentro de la etiqueta "<ul>" hasta "<ul>" metemos las opciones de menú que vamos a tener.
  • La opción "Selected" es la principal, en mi caso, es donde presento las entradas del blog según las voy creando.
  • Cuando pulsen en "Selected" se carga automáticamente en el marco principal, todas las entradas que tenemos en el blog (como siempre, como podéis ver en mi propio blog al acceder). Por ello en "href" introducimos la URL de nuestro propio blog.
  • Después creamos un "a href" por cada opción de menú que deseamos crear. En cada un de los a href se pondrá la dirección de nuestro blog seguido de "/search" seguido de "/label" y seguido del "concepto agrupador" de entradas de nuestro blog por el que queremos que cuando el usuario pulse la opción, se busquen en el blog aquellos contenidos que pertenecen a dicho concepto agrupador.
Por ejemplo quedaría algo así con el menú de un hipotético blog con una estructura parecida a la mía:
    <ul id="menu">
    <li><a class="selected" href="http://Ejemplo.blogspot.com">Inicio</a></li>
    <li><a href="http://Ejemplo.blogspot.com/search/label/tecnologia">Tecnología</a></li>
    <li><a href="http://Ejemplo.blogspot.com/search/label/ocio">Ocio</a></li>
    <li><a href="http://Ejemplo.blogspot.com/search/label/opinion">Opinión</a></li>
    <li><a href="http://Ejemplo.blogspot.com/search/label/consumo">Consumo</a></li>
    </ul>
    •  En el ejemplo, se llama a la página principal del blog que dibujará todas las entradas en el orden que las vamos creando como siempre.
    • Luego se presenta cada opción de menú con su concepto agrupador de entradas que el usuario no verá. Así, cuando el usuario haga "clic" sobre "Tecnología" por ejemplo, estará haciendo una búsqueda que agrupa todas aquellas entradas que contengan la etiqueta "tecnología" en su interior. Así mismo sucedería con las sucesivas opciones de menú.
    • El resultado del ejemplo es el que puedes ver en mi menú (pero en cada blog se creará con la hoja de estilos que cada uno haya decidido utilizar en su plantilla) 

    • Dependiendo de vuestra hoja de estilos, que va en función de la plantilla Blogger que utilizasteis, el menú tendrá la apariencia adecuada a vuestro blog. A parte de horizontalmente, dependiendo de dónde y cómo coloques el "Gadget  HTML/Javascript", se puede crear verticalmente (y donde quieras arriba, abajo a izquierda o derecha).
     En este paso ya tendrás creado el meú, pero sin que sea interactivo totalmente, dado que ahora tenemos que crear las etiquetas en las entradas, basándonos en el ejemplo anterior, que nos permitan agrupar bajo el concepto "Tecnología" todas las entradas en las que metamos la etiqueta (label) "tecnologia", en "Ocio" todas las entradas en las que metamos la etiqueta "ocio" y así sucesivamente.

    5) Un paso tan importante como la adición del javascript. En cada entrada deberás añadir como etiqueta la palabra que pongas a continuación de "label". En el ejemplo sería "tecnologia, ocio, opinion, consumo" (porque incio es la principal y ahí no se utilizan etiquetas). En la imagen inferior te he recuadrado con unas líneas negras dónde deberás añadir la etiqueta que se convierta en tu concepto agrupador de páginas bajo la opción de menú.


    La adición de etiquetas como te expliqué aquí es útil no sólo por el ejemplo que ahora te estoy dando para hacer con ellas un menú, sino también porque le permiten al buscador no tener que "leer" toda tu entrada para presentar el resultado después en pantalla, es decir, la etiqueta le dice al buscador directamente de lo que trata tu entrada sin leerla.

    De esta manera, una vez hayas ido rellenando la zona de etiquetas que te mostré en el paso "5)" de cada entrada que tengas, conseguirás que quede la información bien estructurada en un menú que agrupa los conceptos en base a las etiquetas.

    6) Si quieres que no salga el mensaje "Mostrando entradas con la etiqueta EtiquetaMostrar todas las entradas" cada vez que el usuario accede a una opción de menú, haz lo siguiente:

    6.1 Busca en la plantilla pulsando CONTROL + F en la vista de EDICIÓN HTML de la plantilla el código: 

    <b:include data='top' name='status-message'/>

    6.2 Elimina la citada línea de código. Con esto desaparecerá el mensaje de aviso del Blog si lo deseas.

    No hay comentarios:

    Publicar un comentario