Decimo Tercera Sesión

IES RIBERA DEL BULLAQUE GRUPO DE TRABAJO:
CREACIÓN Y DISEÑO DE BLOGS Y PAG. WEB
DECIMO TERCERA SESIÓN.

PASO 11: ORGANIZACIÓN DE LA INFORMACIÓN EN LOS BLOGS.
Terminamos la creación y el diseño de nuestro blog con la organización de toda la

información que hemos introducido.
ORGANIZACIÓN CON ETIQUETAS.
En cada una de las entradas que hemos ido introduciendo en el blog, la
hemos acompañado de una etiqueta para posteriormente identificarla. Así
es posible que haya introducido varias entradas con la etiqueta: 1-bach.
Todas esas entradas contendrán información sobre el curso de 1-bach.
¿Cómo tener disponible todas las etiquetas que he utilizado en mis
entradas? Es posible poniendo un gadget en el margen derecho o si
tenemos más de dos columnas en cualquiera de ellas.
Normalmente este gadget viene instalado por defecto en la mayoría de las
plantillas para blog (labels), nos aseguraremos que no lo tenemos instalado
para seguir los siguientes pasos.
1. Abre la página de blogger: http://blogger.com
2. Accede a la carpeta de diseño.
3. En la columna que queramos (la derecha por ejemplo) elegimos
“Añadir un gadget”, buscamos en la ventana emergente: “Etiquetas”
4. Configuramos el gadget según se ve en la siguiente ventana:

5. Hacemos clic en guardar y accedemos al blog para ver cómo ha

quedado: (Dependiendo del diseño que tengamos la siguiente
imagen puede tener otro aspecto, lo importante es que aparezca un
listado de las etiquetas que tengamos creadas)
Al hacer clic sobre una de ellas aparecerán en el blog tan sólo las
entradas que tengan dicha etiqueta.
ARCHIVO DEL BLOG.

Otra forma de clasificar la información es a través del archivo del blog, de este
modo tenemos disponibles las entradas por orden cronológico. El archivo del
blog puede servirnos de diario de clase en el caso de un blog de aula, o bien
para clasificar las actas de un departamento.
La mayoría de las plantillas también tienen por defecto el archivo del blog,
comprueba si es así en el tuyo. Si no dispones de archivo del blog o bien quieres
configurarlo de forma personal sigue los siguientes pasos:
1. Abre la página de blogger: http://blogger.com

2. Accede a la carpeta de diseño.
3. En la columna que queramos (la derecha por ejemplo) elegimos
“Añadir un gadget”, buscamos en la ventana emergente:
4. Configuramos el gadget según se ve en la siguiente ventana:

EDICIÓN Y CONFIGURACIÓN DE LA BARRA DE MENÚ.

Como vimos en el paso 4, al elegir un diseño del blog es preferible que tenga
una barra de menú que me permita organizar la información del blog. Entonces
veíamos algunos ejemplos.
Este menú viene configurado por defecto, normalmente con las entradas:
Home, About, Contact, Log in,…. Y similares.
Lo importante es que podemos configurar ese menú como nosotros queramos.
Tendremos que tener pensado qué enlaces queremos poner y a donde, los
enlaces se pueden direccionar a una página web externa al blog o a entradas
etiquetadas. Por ejemplo, sería bueno clasificar el material de mi blog por
cursos. Entonces quiero hacer varias entradas (apartados), 1-eso, 2-eso, 3-eso,
4-eso, 1-bach, 2-bach. Cada una de estas entradas tendrá un enlace a todas las
entradas etiquetadas como 1-eso, 2-eso,…
Necesitamos trabajar con dos pestañas, en una de ellas tendremos el blog abierto y en
la otra la zona de trabajo de blogger.
Accedemos a la pestaña de blogger

Y seguimos los siguientes pasos:
1. Accedemos a la carpeta de Diseño y a la subcarpeta de edición html.
2. Seleccionamos la opción Expandir plantillas de artilugios.
3. Entonces pasamos a apretar al mismo tiempo las teclas Control y F.

Sin darnos cuenta aparecerá una barra debajo de las pestañas con
las que estamos trabajando.
4. Esta nueva barra nos ayuda a buscar cualquier palabra dentro del
código html. Vamos a buscar con esta barra el siguiente texto: div
class='menu'. Tecléalo tal cual. El texto encontrado aparecerá
resaltado en amarillo, como puedes ver aquí:
<div class='menu'><ul><li class='current_page_item'>
<a expr:href='data:blog.homepageUrl'>Home</a></li><li
class='page_item page-item-2'><a
expr:href='data:blog.homepageUrl +
"feeds/posts/default"'>Posts RSS</a></li><li
"feeds/comments/default"'>Comments RSS</a></li><li
class='page_item page-item-11'><a href='#'
title='Edit'>Edit</a></li></ul></div>
5. En la etiqueta anterior comienza el menú que hemos visto en
nuestro blog. Volvemos al blog para anotar todas las palabras que
aparecen en el menú.
Debemos anotar en una hoja las palabras que aparecen en el menú.

En el ejemplo: HOME, POSTS RSS, COMMENTS RSS, EDIT. Estas
palabras las buscaremos entre el código html anterior. Volvemos a
blogger.
6. Buscamos en el código html las palabras anotadas.
<a expr:href='data:blog.homepageUrl'>Home</a></li><li
"feeds/posts/default"'>Posts RSS</a></li><li
"feeds/comments/default"'>Comments RSS</a></li><li
class='page_item page-item-11'><a href='#'
title='Edit'>Edit</a></li></ul></div>
Si cambiamos esas palabras por los nombres de las carpetas que

queremos, ya habremos conseguido cambiar el aspecto del menú.
Voy a poner 1_eso, 2_eso, 3_eso, 4_eso. (OJO, GUIÓN BAJO. EL
GUIÓN NORMAL PUEDE REALIZAR MODIFICACIONES NO DESEADAS)
El aspecto queda así.
<a expr:href='data:blog.homepageUrl'>1_eso</a></li><li
"feeds/posts/default"'>2_eso</a></li><li
"feeds/comments/default"'>3_eso</a></li><li
class='page_item page-item-11'>
<a href='#' title='Edit'>4_eso</a></li></ul></div>
Hacemos clic en Guardar plantilla y accedemos al blog para ver los
cambios.
7. Ahora por último tendremos que cambiar el enlace de cada una de

las nuevas palabras del menú. Así al hacer clic en 1_eso se deben
mostrar todas las entradas del blog que tengan esa etiqueta. Al
hacer clic en 2_eso se deben mostrar todas las entradas del blog que
tengan esa otra etiqueta y así sucesivamente.
8. Volvemos a blogger la barra de búsqueda sigue estando donde
apareció. Y aparecerán las palabras que anteriormente buscamos:
div class='menu'. Hacemos clic en siguiente y de nuevo aparece el
menú en el código. El enlace con la dirección donde va cada palabra
se encuentra justo delante de cada una de ellas, entre comillas.
Veámoslo.
<a expr:href='data:blog.homepageUrl'>1_eso</a></li>><li
"feeds/posts/default"'>2_eso</a></li><li
Fijémonos tan solo en el primer enlace:

<a expr:href='data:blog.homepageUrl'>1_eso</a></li>
Tenemos que cambiar el enlace haciendo lo siguiente:
<a expr:href='data:blog.homepageUrl'>
Eliminamos la palabra expr y sustituimos la dirección entre comillas

por la que queremos poner de nuestro blog.
<a href='data:blog.homepageUrl'>
Ahora buscamos la dirección URL que tiene que ir entre comillas.
9. Volvemos al blog y desde el gadget de las etiquetas hacemos clic en

1-eso.
En el blog aparecen las entradas que tienen dichas etiquetas y en la

barra de direcciones aparece la dirección URL que el blog le tiene
asignado.
Copiamos dicha dirección que será la que peguemos en el código

html. Para copiarla nos situamos encima y hacemos clic, entonces se
selecciona la dirección poniéndose azul, hacemos clic botón derecho
y en copiar.
10. Nos vamos de nuevo a blogger y en el código html localizamos el
enlace de la primera palabra 1_eso y la seleccionamos, sin hacer
nada más sobre el enlace que queremos eliminar y que está
señalado en azul, hacemos clic con botón derecho y a pegar. De este
modo se sustituye el texto que había por el nuevo. El nuevo enlace
tiene que ir entre comillas simples ‘ ‘ hay veces que desaparecen con
el enlace anterior y habrá que añadirlas.
El resultado es el siguiente:
<a href='http://matesporzuna.blogspot.com/search/label/1eso'>1_eso
</a></li><li class='page_item page-item-2'><a expr:href='data:blog.homepageUrl
+ "feeds/posts/default"'>2_eso</a></li><li class='page_item page-
item-15'><a expr:href='data:blog.homepageUrl +
"feeds/comments/default"'>3_eso</a></li><li class='page_item
page-item-11'><a href='#' title='Edit'>4_eso</a></li></ul></div>
Hacemos clic en guardar plantilla y comprobamos los cambios realizados en el

blog. Volvemos al blog, vamos a la página principal del blog y luego hacemos clic
en nuestro nuevo enlace.
11. Repetimos el proceso para los enlaces 2_eso, 3_eso, 4_eso. Hacemos
clic sobre la etiqueta del blog 2-eso. Copiamos la dirección URL y volvemos al
código html de blogger. Eliminamos expr de la dirección de 2_eso y
sustituimos la dirección URL, quedándonos:
<a href='http://matesporzuna.blogspot.com/search/label/1eso'>1_eso
</a></li><li class='page_item page-item-2'>
<a href=’ http://matesporzuna.blogspot.com/search/label/2-eso'>2_eso
</a>
</li><li class='page_item page-item-15'><a expr:href='data:blog.homepageUrl +
"feeds/comments/default"'>3_eso</a></li><li class='page_item page-
item-11'><a href='#' title='Edit'>4_eso</a></li></ul></div>
Comprobamos los cambios guardando la plantilla y viendo el blog.
12. Repetimos el proceso con los enlaces 3_eso y 4_eso. Quedándonos:

<a href='http://matesporzuna.blogspot.com/search/label/1-eso'>1_eso</a>
</li>><li class='page_item page-item-2'><a
href='http://matesporzuna.blogspot.com/search/label/2-eso'>2_eso</a>
</li><li class='page_item page-item-15'><a
href='http://matesporzuna.blogspot.com/search/label/3-eso'>3_eso</a>
</li><li class='page_item page-item-11'>
<a href='http://matesporzuna.blogspot.com/search/label/4-eso'
title='Edit'>4_eso</a></li></ul></div>
13. Por último, si queremos, podemos añadir más enlaces al menú bastará
con copiar y pegar parte del código tantas veces como entradas queramos.
14. Una entrada del menú comienza con <li…… y acaba con </li>
Así del código que nos ha quedado:
<a href='http://matesporzuna.blogspot.com/search/label/1-
eso'>1_eso</a></li>><li class='page_item page-item-2'><a
href='http://matesporzuna.blogspot.com/search/label/2-
eso'>2_eso</a></li><li class='page_item page-item-15'><a
eso'>3_eso</a></li><li class='page_item page-item-11'>
title='Edit'>4_eso</a></li></ul></div>
Copiamos el código que está señalado en negrita y amarillo y lo pegamos a

continuación antes de </ul>
Siendo este el resultado:
href='http://matesporzuna.blogspot.com/search/label/3-eso'>3_eso</a></li>
<li class='page_item page-item-11'>
title='Edit'>4_eso</a></li>
title='Edit'>4_eso</a></li>
</ul></div>
Cambiamos el último enlace por 1-bach y también su dirección URL
href='http://matesporzuna.blogspot.com/search/label/3-eso'>3_eso</a></li>
title='Edit'>4_eso</a></li><li class='page_item page-item-11'>
<a href='http://matesporzuna.blogspot.com/search/label/1-bach'
title='Edit'>1_bach</a></li></ul></div>
Guardamos y vemos los resultados.

Decimo Tercera Sesión

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Decimo Tercera Sesión

Uploaded by

Copyright:

Available Formats

IES RIBERA DEL BULLAQUE GRUPO DE TRABAJO:

CREACIÓN Y DISEÑO DE BLOGS Y PAG. WEB

DECIMO TERCERA SESIÓN.

Terminamos la creación y el diseño de nuestro blog con la organización de toda la

4. Configuramos el gadget según se ve en la siguiente ventana:

5. Hacemos clic en guardar y accedemos al blog para ver cómo ha

ARCHIVO DEL BLOG.

1. Abre la página de blogger: http://blogger.com

4. Configuramos el gadget según se ve en la siguiente ventana:

EDICIÓN Y CONFIGURACIÓN DE LA BARRA DE MENÚ.

Accedemos a la pestaña de blogger

2. Seleccionamos la opción Expandir plantillas de artilugios.

3. Entonces pasamos a apretar al mismo tiempo las teclas Control y F.

Debemos anotar en una hoja las palabras que aparecen en el menú.

Si cambiamos esas palabras por los nombres de las carpetas que

7. Ahora por último tendremos que cambiar el enlace de cada una de

Fijémonos tan solo en el primer enlace:

Eliminamos la palabra expr y sustituimos la dirección entre comillas

9. Volvemos al blog y desde el gadget de las etiquetas hacemos clic en

En el blog aparecen las entradas que tienen dichas etiquetas y en la

Copiamos dicha dirección que será la que peguemos en el código

Hacemos clic en guardar plantilla y comprobamos los cambios realizados en el

Comprobamos los cambios guardando la plantilla y viendo el blog.

12. Repetimos el proceso con los enlaces 3_eso y 4_eso. Quedándonos:

Copiamos el código que está señalado en negrita y amarillo y lo pegamos a

You might also like