En esta ocasión la personita que colabora con nosotras prestándonos uno de sus posts es Marta, de 2nd Funniest Thing, un blog la mar de molón lleno de Tutoriales y DIY relacionados principalmente con el diseño y la customización de ropa. Si entráis en su blog encontraréis un diseño minimalista, limpio, de fácil acceso y usabilidad, un muy buen blog la verdad, tanto en estética como en contenido, que es lo fundamental! :)
Marta escribió un post muy interesante sobre como crear una galería de proyectos para incrustarlo en vuestro blog, y como yo sé que a vosotras el HTML os da miedete… pues aquí un mascaito para que podáis hacer una galería genial sin tener que sudar la gota gorda!
Os dejo pues, con esta entrada, y os recomiendo que visitéis en blog de Marta y la conozcáis un poquito más :)
Y si la queréis seguir en redes sociales… aquí está su facebook y twitter!
Sigo disfrutando de Mi Día!!
Elia
MEJORA TU BLOG CON UNA GALERÍA DE PROYECTOS
Incluir una galería de imágenes con todos nuestros proyectos mejora la navegabilidad de nuestros blogs. Hacerlo con HTML es sencillo, sólo necesitarás dedicarle un poco de atención y conseguirás facilitar la experiencia del lector porque podrá ver todos nuestros inventos de un plumazo. Recordemos que nos movemos por un mundo muy visual en el que más que leer, devoramos imágenes. Pongámoslo fácil pues!
Necesitamos: Un blog, imágenes de los proyectos que queramos mostrar y un ratito tranquilo. Es recomendable que todas las imágenes sean pequeñas (las mías por ejemplo hacen 180 x 198 px) y también que las hayamos colgado previamente para tener su URL. Si alguien no sabe cómo conseguir la URL de una imagen que se dirija al punto 1 de este enlace.
Vamos a crear una entrada, clicamos sobre el botón de HTML y allí escribimos el siguiente código para crear la tabla que contendrá todas las imágenes. Cada imagen funcionará como un botón para ir directamente a ese post en concreto. (Dejo aquí el código para que lo podáis copiar)
<table border=”0″ cellpadding=”4″><tbody>
<tr>
<td> <a href=”URL DESTINO” target=”_self”><img src=”URL IMAGEN” alt=””/></a> </td>
<td> <a href=”URL DESTINO” target=”_self”><img src=”URL IMAGEN” alt=””/></a> </td>
<td> <a href=”URL DESTINO” target=”_self”><img src=”URL IMAGEN” alt=””/></a> </td>
</tr>
</tbody></table>
A continuación analizaremos el significado de todo ese código. Esta es la explicación para una tabla de 1 fila y 3 columnas, a partir de estas indicaciones podrás diseñar la tuya con tantas filas y columnas como quieras.
¡Espero que le saquéis mucho provecho compañer@s! Si os surge cualquier duda la podéis dejar en los comentarios de este post y os responderé encantada :)
Otros posts relacionados...
Cómo integrar botones en tu blog (I) + set de iconos para descargar!
HTML: cómo alinear botones de redes sociales en el blog.
Cómo crear un Catálogo Virtual para tu web o blog. (Con ebook descargable)
Cómo personalizar tu firma de mail (tutorial)
Wunderlist: gestiona tus tareas diarias
Mailchimp, tus primeros pasos de e‐mail marketing
Aimm como me va a gustar este post… ahora ando liada estudiando pero mañana con el café me lo leo despacito y concienzudamente.. que mira que he intentado hacer esto en mi blog y no hay manera…
Un besote
Ver a Marta aquí me hace muchísisisima ilusión!! Es genial, su blog es genial, sus ideas son geniales y ella es la leche!!! Marta vale millones y los superyuppies también!!
Buenos lunes! Es justo lo que queria. Cuando tenga un ratito tranquilo me pongo a ello! Muchas gracias por la info!
Creo que a lo mejor me voy a atrever con el código HTLM..jejeje.
Gracias por compartirlo
muchas gracias, me lo guardo a la espera de encontrar un momento tranquilo (espero que llegue algún día)
que chulo1! muchísimas gracias por compartirlo ;)
Un beso https://www.facebook.com/LittleSpecialThings
Me encanta la idea de tener una galería en el blog, por eso creé la mía, jajajaja, pero no sería capaz de explicarlo con esta precisión, sin aburrir ni dormir al personal, y además haciéndolo bien, menos aún con html, así que mi enhorabuena Marta, porque todo lo que te digamos al respecto va a ser poco, y desde luego que si no la tuviera acudiría a ti corrrrrrriendo.
Pasad un buen lunes
La idea de tener una galería es genial, a mi me encanta, por eso me la puse hace tiempo jejeje, pero mira que soy de pubicar tutoriales y me declaro de antemano total y absolutamente incapaz de explicar esto con precisión, brevedad, menos con HTML, y lo que es más, sin aburrir al personal ni dejarles roncando a la segunda línea, así que enhorabuena Marta, sólo puedo felicitarte, felicitarte una y otra vez ;)
No sabes como me viene. Andaba dando vueltas al coco para incluir en el blog una sección de producto disponible y proximos productos y estaba ya medio loca.
Ya tengo la solución, ahora solo me falta el momento tranquilo. Un besote. Que genial!!!
Marta es una fenómena!
un tuto genial!!
♥
Muchísimas gracias Elia!! Qué alegría empezar el Lunes así!! Si alguien tiene cualquier duda sobre el tutorial que comente aquí y le responderé encantada.
Un beso a toda la familia de valientes de Superyuppies
♥
Hombre Marta, qué guay!!, me alegro mucho por ti guapa!!, saludetes!!!
Igualmente mamá supermanitas!! Besos
Me ha encantado!! muy muy util, :)
Es que Marta es la leche!!!
hehe gracias apañera!!
Muchas gracias a ti Marta , lo intentaré, aunque no se yo.
Y porsupuesto a Superyupis.
lasideasdeyoli,blogspot.com
Me gusta, me gusta mucho la idea. Solo me falta aprenderlo bien, jejeje. En cuanto consiga un ratito tranquila, ¡me pongo a ello!
Buenos días a todas, que tutorial más interesante. Es súper util, lo que no sé es donde lo podría poner yo, ya que tengo un menu desplegable con mis productos… A ver, seguro se me ocurre algo.! Esta genial tu blog Marta. Elia, todavía tengo pendiente de poner la firma en el email que comentaste… No me da tiempo de nada…
Un beso
Gracias Elia y Marta por este nuevo post que acabará de dejar nuestros blogs niquelados :D.
Y sí, Èlia, es importante encontrar un equilibrio para que nuestras parejas no vayan a comisaria a denunciar nuestra desaparición por los vericuetos virtuales, momentos de abducción de superideas, etc. Yo estoy en el intento también :D
jajajajjajaj, menos mla que no soy la única… :))
Hola!
me encanta!, hace días que me estoy volviendo loca par poder tener galerías de éste tipo en el blog y que todas las fotos se vean ordenadas y fáciles de encontrar.
Muchas gracias!!
Y para añadir el texto inferior o una leyenda?
Saludos!!
Hola Marta, me ha parecido super útil y ya estoy practicando!
Pero como principiante que soy tengo dos dudas:
1.- la url de destino por qué queremos meterla? Si esa imagen no quiero que vaya a ningun lado
2.- Como añadir el nombre del producto o la leyenda?
gracias
Anna
Hola Anna,
si no quieres que las miniaturas de tus proyectos funcionen como un botón que lleve a ese proyecto/producto en cuestión, no hace falta que escribas ninguna URL de destino
En mi caso la leyenda de cada imagen es parte del jpg pero déjame buscar porque seguro que se puede insertar como texto en el mismo HTML. Te vuelvo a escribir por la tarde
Marta
Hola otra vez,
aquí va el código para una tabla con textos e imágenes estáticas (uséase que no llevan a ningún sitio porque no funcionan como un botón):
texto imagen 1
texto imagen 2
texto imagen 3
Si el texto no aparece donde tu quieres, también puedes hacerlo con el siguiente código y añadiendo una leyenda a cada imagen desde la vista de redactar
Cachins…en comentarios no puedo dejar escrito el código. Si lo necesitas envíame un email please!!
Ya he sido inspirada! Ya sé donde voy a poner la galería!!! En las páginas de mi menu en “imprimibles” e “DIY”, va a quedar super ordenado, y se verá en seguida todas las posibilidades. Que bien!
Gracias de nuevo!
Un beso
Justo estaba pensando hacer algo así :D gracias!
En la URL de destino que ponemos ? Muchas gracias,
Muy buenas,
La URL de destino es la dirección del post al cual quieres que lleve cada imagen en miniatura
Mola.. creo que a Wonderones le hace falta una galeria así como mínimo para tratar muchos de los post que tenemos.. es que están hecho trizas..jeje
muchisimas gracias marta!! me sera de gran ayuda!!
mi duda es que me sale de bajo de cada imagen /a> como puedo quitarla e insertar un nombre muchisimas gracias!!
Hola Montse!
te respondo lo mismo que en mi blog por si a alguien más le surge la misma duda:
En el caso de mi galería el texto debajo de cada foto es parte del mismo jpg. Lo hice así para poder utilizar mi tipografía (Mira: https://99930b2d-a-62cb3a1a-s-sites.googlegroups.com/site/2ndfunniestthing/serum-antiarrugas-diy.png)
Si tú prefieres hacerlo con html y no tener que modificar tus imágenes….en comentarios no puedo escribir código pero intentaré explicarme. Lo que describo ahora entre paréntesis son estos símbolos:
Escribe tu palabra o leyenda tal cual, justo delante del último (símbolo de paréntesis angular o menor que) /td (símbolo de paréntesis angular/mayor que, que cierra cada linea
En cuanto a la /a> , al revisar el código que me has enviado por fb hemos visto que poniendo una URL correcta de imagen (colgada en google sites) desaparece.
Besos!!
Buenísimo! A ver si me pongo manos a la obra! Y se hacerlo!
Enhorabuena y gracias por compartirlo
Justo ayer empecé a crear galerías en mi blog y como no encontraba una explicación legible de cómo hacerlo con HTML decidí usar inlink pero me parecía un poco rollo eso de que cada vez que quisiera añadir una nueva imagen tuviera que crear una galería nueva. Intentaré seguir los pasos que dices aquí, pero mi pregunta es: ¿Se pueden recortar las imágenes para que aparezcan todas del mismo tamaño? Es que las mías son cada una de su padre y de su madre
Lo he intentado mil veces y no funciona…. ¿Se puede hacer algo?
a mí tampoco me sale, se forman los espacios pero no parecen las fotos. ¿Qué estaré haciendo mal?
a mi tampoco me funciona el código, no sé porqué, en fin, gracias de todas maneras!!
Madre mía si es que sois una caja de sorpresas. Desde que os descubrí por el Twitter estoy enamorada de la página en sí y todos vuestros posts, no sé cuál de ellos me gusta más, los he marcado de favoritos.
Siempre que me meto a curiosear lo nuevo que colgáis ya sé de primera mano que me va a gustar y me vais a aportar miles de buenas ideas. Sois geniales :)
Cuando tenga un rato de paz me pondré a ello, a ver qué tal queda.
Que gracia leerte Carmen! Me alegra que te gusten los posts y que te sean de ayuda y gracias mil por compartir nuestro contenido en TW ;)
Si ves que necesitas ayudita en algo… para eso estamos aquí, del otro lado, ok?
Un abrazo!
Èlia
hola que tal? creo ser la mas novata en esto del blogg, y creanme que la estoy guerreando todo lo que puedo. Copie el codigo para crear las columnas y las hice! pero no tengo idea como cargarle las fotos! jajajaja me quedaron ahi chiquitas y vacias… ayuda por favor…
Gracias,
ya mismo me pongo a trabajar un exito!
besos.
http://www.elrincondesarah.net