AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

Hacer un índice de entradas o etiquetas, con imágenes.

martes, 13 de abril de 2010

Me han preguntado, en algunas ocasiones, como hacer lo que dice el título, así que para no repetirlo más veces voy a explicarlo aquí.

Verás que la explicación tiene varios condicionales, (si haces tal cosa, has de hacer tal otra), así que repasa bien lo que voy a explicar antes de hacerlo, sobre todo antes de decirme que no te sale, ya que voy a intentar abarcar todas las posibilidades.

Este tipo de índices han de hacerse "manualmente" (ignoro si hay alguna página o sistema que lo haga de forma automática) y se han de ir actualizando regularmente, a medida que se añadan entradas o etiquetas al blog.


Empezaré por explicar cómo hacer el de etiquetas, ya que éste solo tendrás que actualizarlo si añades una nueva etiqueta que quieras enlazar.

Primer paso: Preparar las imágenes.

Estas imágenes no pueden ser muy grandes, al contrario, sinó cada enlace ocuparía media página y no sería cómodo de usar.
Evidentemente las imágenes han de estar en Internet, en algún servidor y lo ideal sería que estuvieran en tu álbum de Picasa, ya que allí mismo obtendrás la miniatura de la imagen.

Condicional 1.

1-1.- Si añades imágenes a tus entradas y lo haces subiéndolas directamente a la entrada, ya las tendrás allí.

1-2.- Si las añades desde otro servidor, puedes usarlas, pero tendrás que decirle al código que las reduzca.

1-3.- Si no sueles añadir imágenes a tus entradas, pero quieres hacer el índice igualmente, prepara las imágenes que vayas a usar y súbelas directamente a tu álbum web de Picasa, el que se creó para ti cuando añadiste la primera imagen a tu blog. (Si no sabes donde está tu álbum, pincha aquí.)
Tendrás que acceder a tu cuenta, (dirección y contraseña con los que accedes a tu blog para editarlo). Allí verás tus imágenes en un álbum que tendrá el mismo título que tu blog.
Una vez allí, podrás añadir fotos a ése álbum. (Si no sabes cómo hacerlo, o no has accedido nunca a tus álbumes, mira este blog).

Siguiente paso: Preparar las ventanas necesarias.

Necesitarás tener 3 ventanas o pestañas abiertas al mismo tiempo, así que abre tu blog dos veces, en dos pestañas o ventanas distintas.
Para hacer esto, en Escritorio, lo que antes era el Panel, pincha en los dos cuadritos que hay junto a Ver blog. Esto hará que se abra en otra ventana o pestaña, (dependerá de tu navegador y/o de como lo tengas configurado).
Una vez abierto, vuelve a pinchar para que se abra de nuevo en otra ventana o pestaña.
En ambas has de estar en la pestaña Creación de entradas.
En una de las ventanas o pestañas, has de estar en Nueva entrada, en la otra has de estar en Editar entradas.

En la tercera ventana que te digo que has de tener abierta, has de estar en la página donde estén tus imágenes.

Condicional 2.

2-1.- Si lo vas a hacer desde tus álbumes de Picasa, abre en esta tercera ventana o pestaña, el álbum de tu blog. Verás las imágenes en miniatura, así:



2-2.- Si vas a usar tu propio servidor.

Abre en esta tercera ventana o pestaña la página de tu servidor y busca el lugar donde esten las direcciones de las imágenes que vas a usar.

¡Bien! Ya tenemos las 3 ventanas o pestañas a punto para empezar.

Tercer paso: Crear la entrada.

Crea una entrada destinada al índice y ponle título, por ejemplo Indice o el que quieras, pero que se note qué es lo que contiene y pincha en la pestaña Edición de HTML, del editor de entradas, a fin de crearla desde ahí, (no desde Redactar), para empezar a añadir los enlaces.

En la pestaña de Edición de entradas, pincha en la etiqueta que vas a enlazar en primer lugar, (las etiquetas están en la columna de la izquierda), con el botón derecho del ratón para copiar su dirección.

En la entrada, (recuerda: Edición de HTML) escribes esto:

<a href="pega aquí la dirección de la etiqueta">

Ahora has de añadir la dirección de la imagen que se verá y se podrá pinchar.

Condicional 3

3-1.- Desde Picasa.

Ves a la ventana o pestaña de tus fotos y pincha en la miniatura que va a servir de enlace de esa etiqueta, con el botón derecho del ratón para copiar la dirección de esa miniatura.

Regresa a la ventana o pestaña donde estás creando la entrada y escribe a continuación de lo escrito antes (sin dejar espacio)

<img src="pega aqui la dirección de la miniatura"></a>

3-2.- Desde tu servidor.

Busca la dirección de la imagen que vas a usar, cópiala y escribe así el código de esa imagen:

<img style="width: 100px;" src="pega aqui la url de la imagen"></a>

Para que la imagen original se convierta en una miniatura.

Con estos pasos, en uno u otro sistema, tendras un código así:

<a href="dirección de la etiqueta"><img src="dirección de la imagen"></a>

o así:

<a href="dirección de la etiqueta"><img style="width: 100px;" src="dirección de la imagen"></a>

Pero esto solo sería una imagen que enlazaría a algún sitio y quien accediera no sabría cual de ellas es la que le va a conducir a las entradas que le interesan, así que has de añadir la explicación, la cual puede ser sólo una frase junto a cada imagen y también una palabra o frase que aparezca al poner el ratón encima de la imagen.

Para poner una frase que explique a qué enlaza cada imagen.

Condicional 4.

4-1.- Si quieres que el enlace esté solo en la imagen, el código has de escribirlo así: (abrevio lo que hay entre comillas, ya sabes que cada "dirección" corresponde a la que he explicado más arriba y solo pongo de ejemplo el primer caso).

<a href="dirección"><img src="dirección"></a> Lo que se va a leer.

4-2.- Si quieres que además de la frase junto a la imagen, se vea algo al poner el ratón encima, lo escribes así:

<a href="dirección" title="palabra que aparecerá"><img src="dirección"></a> Lo que se va a leer.

Repite lo antedicho, en el modelo o sistema que quieras, tantas veces como enlaces vayas a añadir, modificando, en cada enlace, la dirección de la etiqueta, la de la imagen, la frase que se va a ver al poner el ratón encima y/o la que se va a leer junto a la imagen.

En todos los casos.

Para que cada enlace quede en una línea y las imágenes no queden muy pegadas la una a la otra.

Escribe esto al principio de todo : <div>

Escribe un enlace a continuación.
Dale a enter al final del enlace completo.
Escribe esto: </div><div>
Dale a Enter
Escribe otro enlace.
Dale a Enter

y así sucesivamente hasta que hayas escrito el último enlace, detrás del cual escribirás esto: </div>

Con lo cual quedaría así el conjunto completo: (ejemplo con tres enlaces)

<div>ENLACE
</div><div>
ENLACE
</div><div>
ENLACE
</div>

Si el índice que quieres hacer es de entradas has de ir añadiendo el enlace de cada entrada.
Para saber su dirección, en la ventana o pestaña de Editar entradas, pincha en Visualizar, palabra que verás junto al título de la entrada, con el botón derecho de ratón para copiar su dirección.

Esta dirección es la que has de poner detrás de <a href="

Último paso: Publicar la entrada.

Una vez finalizada la entrada índice, antes de darle a publicar, mira en Edición de entradas qué fecha tiene la última de las que haya en la lista y modifica la fecha de la que estás creando, pinchando en Opciones de entrada, a fin de que este índice vaya a parar al final del blog.
Una vez publicada, recarga la ventana o pestaña de Edición de entradas, para que la entrada Indice aparezca al final de la lista.

En la ventana donde has creado el índice pincha en Diseño y añade un gadget Lista de enlaces.
En este gadget, pon en URL la dirección del índice, copiandola de Editar entradas y en Nombre algo que demuestre qué enlazas, por ejemplo: Indice del blog y Guarda el gadget para que se vea en tu columna lateral.

Y ya tienes tu indice terminado.

Recuerda: En ambos casos tendrás que actualizar manualmente la entrada cada vez que añadas una etiqueta o una entrada al blog.

Imprime esta entrada

4 comentarios. ¿Quieres añadir el tuyo?

  1. wada ha dicho
  2. Eulalia un millón de gracias!!! es lo que iba buscando para poner en mi blog, ya estoy en ello y me gusta como esta quedando, es fantástico el gran trabajo que haces.
    Un abrazo!!

  3. Rob XD ha dicho
  4. Este comentario ha sido eliminado por el autor.
  5. Rob XD ha dicho
  6. Hola Eulalia hoy no he venido x una consulta, solo queria contarte que hoy he publicado mi entrada 100 y queria darte las gracias por compartir tus conocimientos y trucos, asi que he decidido darte las gracias ciber-personalmente en tu blog y tambien en mi publicación.

    http://transformersg.blogspot.com/2010/04/entrada-no-100.html

    Chao!

  7. SOL ha dicho
  8. Hola, Navegando encontre esta pagina y me gusto mucho ademas de ayudar es muy calida, trasmite mucho amor y conocimiento y es como estar en la sala de una casa, muy confortable y con sencillez aportas mucho. Soy nueva en esto y ando buscando, por ejemplo escribi muchas cosas en el blog y en la lista que no se como se dice, donde aparece todo lo publicadado resulta que es muy larga y no se como hacer para achicarla!!!! tambien he cambiado mi fondo, pero quisiera cambiarlo sin modificar la plantilla, es mas, el que tengo actualmente es un gadget lo cual lo agrego aparte. Te agradesco si me ayudas!!! muchas gracias mi blog es http://elbauldemialma.blogspot.com

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.