Cómo crear un índice de posts con imágenes - parte II -

17 sept. 2015


Lo prometido es deuda, así que aquí tenéis la segunda parte del tutorial. Si estás leyendo esto sin haber visto la primera parte, muy mal, así que aquí tienes la primera parte, empieza por el principio.Como ya os dije el otro día no os recomiendo nada nada hace un índice solo con las imágenes, podéis hacerlo, sois libres pero no lo recomiendo, ahí queda.

Como ya os amenacé hoy vamos a instertar una imagen que acompañe al texto que hicimos en la entrada anterior. Ya os dije que fueráis poco a poco, pero sin parar que cuanto antes tengáis vuestro índice mejor. Como vais a ver en el tutorial insertar las imágenes está tirado, facilísimo (con musiquilla y todo) de hecho podéis ver cómo quedan las imágenes en mi índice de entradas.  Aquí os dejo una imagen para que os hagáis una idea de cómo os puede quedar.


primeros pasos: pensar en las imágenes

Lo primero que tendríamos que hacer es escribir, en un papel, en un word, o lo que sea, los nombres de los posts que queremos incluir en nuestro índice. Yo os recomiendo que los clasifiquéis en secciones, así será mucho más fácil la búsqueda.

Una vez elegidos los posts, tenemos que seleccionar las fotos que queremos que ilustren cada una de las entradas. Aquí sois muy libres de hacer lo que queráis. En mi caso he hecho unos diseños que ilustren, más o menos, el contenido. Una vez elegidas las fotos, las guardaremos en una carpeta, para tener todo más a mano.

Tendremos que adaptar el tamaño de la foto al espacio del que dispongamos. Esto lo veremos en el tutorial, pero os lo aviso, para que os vayáis preparando. Yo lo haré con picmonkey, pero podéis usar pixlr, por ejemplo.

Una vez que hayamos escrito los posts que queremos incluir, hayamos guardado las fotos que ilustren los posts en una carpeta, es el momento de elegir la disposición. Yo os voy a dejar 4 disposiciones diferentes, vosotros podéis elegir la que queráis. En el vídeo os contaré cómo hacer las modificaciones. Y ahora os hago el resumen:
escribimos los posts
en un papel o en un word
elegimos las fotos que
queremos incluir en el índice
guardamos todas
las fotos en una carpeta
ajustamos el tamaño de
las fotos para que todas sean iguales
vemos el tutorial
colorzilla 
para sacar colores
fotor
para ajustar fotos
el tutorial


solo 4 fotos

<table style="font-family: arial; font-size: 10px; letter-spacing: 2px; margin: 3px auto; text-align: center; text-transform: uppercase; width: 100%; cellpadding="10" cellspacing="2""><tbody>
<tr>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>

solo 3 fotos


<table style="font-family: arial; font-size: 10px; letter-spacing: 2px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%; cellpadding="10" cellspacing="2""><tbody>
<tr>
<td style="border:1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border:1px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>

4 fotos con texto debajo

<table 10="" cellspacing="2" style="font-family: arial; font-size: 10px; letter-spacing: 2px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%;"><tbody>
<tr>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto </td>
</tr>
</tbody></table>
<table 10="" cellspacing="2" style="font-family: arial; font-size: 10px; letter-spacing: 2px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%;"><tbody>
<tr>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
</tr>
</tbody></table>

3 fotos con texto


<table 10="" cellspacing="2" style="font-family: arial; font-size: 10px; letter-spacing: 2px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%;"><tbody>
<tr>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto </td>
</tr>
</tbody></table>
<table 10="" cellspacing="2" style="font-family: arial; font-size: 9px; letter-spacing: 2px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%;"><tbody>
<tr>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
</tr>
</tbody></table>

  • -En color rojo: el tipo de letra. Yo creo que la Arial quedará bien en cualquier blog, queremos que se vea, no una tipografía con mil historias.
  • -El color verde: es el tamaño de la tipografía. En este caso la he puesto en un tamaño 11, suficiente para que se vea bien.
  • -El color azul: es el espacio entre las letras. Si no queréis espacio poned un 0, si queréis menos espacio poned 1,2, etc.
  • -El color naranja: es el ancho de la línea. Podéis aumentar el tamaño lo queráis, pero yo no pondría más de 3.
  • -El color morado: es el color del borde. En este caso tiene un color gris, pero en esta página podéis elegir el color que más os guste. 
  • -El color amarillo: es el estilo de la línea. Solid significa línea sólida, sin puntos ni nada. Podéis cambiarlo por dashed (líneas) o dotted (puntitos)
aprende a montar una tienda online
en blogger
cursos para mejorar tu blog
MEGA PACK DISEÑA TODO Y MÁS PACK DISEÑA BONITO Curso diseño corporativo pack emprendedor
75€
+INFO 
27,99€
+INFO 
25€
+INFO
43€
+INFO
catálogo completo 
de cursos online
Bueno, y esto es todo por esta semana. Yo creo que tenéis tarea para rato y espero que os pongáis a trabajar en cuanto podáis. Y recordad que, si os gusta, podéis compartirlo, que es gratis. Recordad que aquí tenéis la primera parte del tutorial, por si os la habéis perdido

Un besazo majos
N E W S L E T T E R


NO TE VAYAS SIN DESCARGAR 
EL EBOOK GRATIS PARA EMPEZAR A DISEÑAR

SI TE HA GUSTADO ¡COMPÁRTELO!


Share to Facebook Share to Twitter Email This Pin This Share on Google Plus

17 comentarios:

  1. Madre mía May, contigo he muerto y resucitado de nuevo. Pero que montón de cosas nos enseñas y compartes.....una pasada, aun estoy en shock.
    Gracias¡¡¡

    ResponderEliminar
  2. Lo estoy haciendo! Ya tengo todo el texto y los enlaces, y ahora comienzo la recopilación de imágenes. Es mucho más sencillo de lo que en principio puede parecer. A mi me está resultando bastante rápido, porque ya utilizaba un índice simple, con texto enlazado, por lo que el cambio está siendo sencillo. Es como dar forma bonita a lo que ya había. En cuanto lo termine te aviso por si quieres verlo! Mil gracias por este tutorial tan chulo!!!

    ResponderEliminar
  3. Hola May, que buen tutorial! Me ha encantado porque el otro día estaba pensando en algo así, me lo guardo a buen resguardo porque por el momento voy a dejar descansar mi plantilla. Gracias por compartir!

    ResponderEliminar
  4. El tutorial es lo que necesito, que buen post! Tus tutoriales me han servido, sobre todo el de picmonkey, que fué asi como llegué a este blog y me quede. Un beso .

    ResponderEliminar
  5. Impresionante el tutorial. Aquí me tienes un sábado a la una de la madrugada revisando los posts, preparando cajetines, modificando imágenes,... no sé cuando voy a terminarlo pero va a quedar súper molón. Muchas gracias por este tuto tan completo!!!
    Bss,

    ResponderEliminar
  6. Eres buenísima May...!! Muchísimas gracias por este tutorial!! vale que acabo de empezar y no tengo casi posts, pero así ya está todo listo para el futuro... ;-) Un beso!!

    ResponderEliminar
  7. Hola!! te conocí hace unas semanas por este post y lo he puesto en práctica, aunque no para un índice del blog, sino para un post, sobre otras entradas: http://elretrogusto.es/los-10-mandamientos-del-vino-y-la-cerveza-artesana/
    Lo próximo currarme el índice, sin dudarlo! Muchas gracias May ;-)

    ResponderEliminar
  8. gracias may , ya termine de hacer el indice hice una parte con fotos y la otra sin te dejo el enlace y haber que te parece y felicidades aprendo mucho contigo te dejo mi enlace espero que me des tu opinion un abrazate fuerte

    http://saludesvidacuidemonos.blogspot.com.es/2015/10/indice.html

    ResponderEliminar
  9. ¡Por fin he encontrado un hueco para hacer el índice de post! Y creo que no me ha quedado nada mal. Yo en verdad he hecho varios. Tengo un blog de viajes y he creado uno por país :-) Me ha costado, pero ahora está perfecto :-)
    Por si quieres ver lo que hacen tus alumnas, te pongo un ejemplo (de los que más post tiene) http://flaviaroundtheworld.blogspot.com/p/myanmar.html

    ResponderEliminar
  10. Madre mía May, no dejo de descubrir cosas contigo. Pensando en cómo organizar mis posts y recordaba que habías hecho tutos, pero no había visto los vídeos aún. Los acabo de ver.
    Me pongo manos a la obra en cuanto pueda, ¡¡qué guay!! A ver si lo consigo.
    Saludos ^^

    ResponderEliminar
  11. Hola May, pues te cuento que no pude resistirme aunque apenaaaaasss voy a publicar y ¡LO HICE!....En cuanto tenga todo listo, te comparto pues estoy atascada porque la tipografía no me coge y no he podido publicar ya. Estoy que me arranco los pelos...
    Muchísimas gracias.
    Abrazos.

    ResponderEliminar
  12. muchas gracias me sirvió de mucho ya que ahora comenzare a poner el indice de recetas con imágenes y se ve mucho mas atractivo ahora!
    si quieres puedes pasar a verlo :) http://lovely-nutrition.blogspot.cl/p/recetas.html

    ResponderEliminar
  13. Muchas gracias!El tutorial está genial y muy bien explicado, hasta para una inexperta ha sido posible! :D Gracias!

    ResponderEliminar
  14. ¡Hola May! Lo primero de todo, muchísimas gracias por todo lo que haces, me es de gran ayuda ya que te puedes morir buscando tutoriales buenos y que se expliquen bien ¡vaya!
    Aprovecho para hacerte una preguntilla, cuando haces el índice, ¿cómo puedo cambiar la letra? Supongo que será modificando el código html pero no me atrevo. Lo que busco es cambiar de mayúsculas a minúsculas, solo eso.
    Muchas gracias y sigue así! Un beso.

    ResponderEliminar
  15. Hola May! Como puedo hacer para saber el ancho de mi plantilla? Gracias!

    ResponderEliminar

Muchas gracias por escribirme!! Si quieres puedes hacer alguna petición, recomendación... ¡¡Me encanta leeros!!