Luis Chávez
add

Como insertar una Galería de imágenes en Blogger o Wordpress


Las galerías de imágenes son realmente extraordinarias para las páginas web, obtener nuevos trucos para blogger es lo que aprenderás en este grandioso tutorial para blogger. Aprenderán a insertar una galería de imágenes con un simple código que realmente no le causara ningún daño a la estructura de su blog. Solo van a utilizar un código con el cual hará el grandioso truco para mostrar una galería de imágenes fácil en su blog, lo podrán utilizar en un widget y ubicarlo donde ustedes quieran o  lo podrán poner dentro de un post. Voy a explicar algunas formas de utilizar este código de galería de imágenes. No se olviden de visitar algunos trucos para blogger que publique anteriormente:

Como insertar una Galería de imágenes en Blogger o Wordpress


1 Widget galería de imágenes para blogger

A continuación mire su demostración en la siguiente página web, la galería de imágenes está ubicado en un widget al final de la página web y lleva el nombre de “HOTELES EN LAS VEGAS”.


Si quieren insertar una galería de imágenes en un widget y que muestre hasta 9 imágenes incluyendo una URL en cada una de ellas y que se abra en una nueva página, tendrán que copiar el siguiente código en un widget.

Da un clic en “Diseño

Como insertar una Galería de imágenes en Blogger o Wordpress

Abre un gadget “Añadir un gadget

Como insertar una Galería de imágenes en Blogger o Wordpress

Busca el widget que dice “HTML/Javascript” ábrelo e inserta el siguiente código en su interior

Como insertar una Galería de imágenes en Blogger o Wordpress

<table cellpadding="3">
<tbody>
<tr>
<td align="center" width="33%"><a href="http://www.increibleviaje.com/2013/08/turismo-en-las-vegas.html" target="_blank"> <img height="60" src="http://3.bp.blogspot.com/-W2sCRaj6iWU/UiEN__ffVzI/AAAAAAAAGI8/dvw5S0cy0wM/s1600/turismo+en+las+vegas.JPG" width="60" /><br /></a></td>

<td align="center" width="33%"><a href="http://www.increibleviaje.com/2013/08/las-vegas.html" target="_blank"> <img height="60" src="http://3.bp.blogspot.com/-pb3CbUqsZO0/UiED68diN1I/AAAAAAAAGIQ/mopS_jq9ebk/s400/informacion+de+las+vegas.JPG" width="60" /><br /></a></td>

<td align="center" width="33%"><a href="http://www.increibleviaje.com/" target="_blank"> <img height="60" src="http://1.bp.blogspot.com/-pRlPpJab5IU/UiEEL0CJ_bI/AAAAAAAAGIY/u715fYYMEcc/s400/las+vegas.JPG" width="60" /><br /></a></td></tr>
</tbody>
</table>
<table cellpadding="3">
<tbody>
<tr>
<td align="center" width="33%"><a href="http://www.increibleviaje.com/2013/08/hoteles-en-las-vegas-hotel-caesars-palace.html" target="_blank"> <img height="60" src="http://4.bp.blogspot.com/-DJPBhkF-eQc/Uh_dXQJtnaI/AAAAAAAAF_g/9q6UEJCPAqM/s400/las+vegas+hoteles.JPG" width="60" /><br /></a></td>

<td align="center" width="33%"><a href="http://www.increibleviaje.com/2013/08/hoteles-en-las-vegas-hotel-the-venetian.html" target="_blank"> <img height="60" src="http://2.bp.blogspot.com/-Xw1YnMqPkDU/UiDG2-O0_dI/AAAAAAAAGAY/7FLffoPjnXI/s400/las+vegas+hoteles.JPG" width="60" /><br /></a></td>

<td align="center" width="33%"><a href="http://www.increibleviaje.com/2013/08/hoteles-en-las-vegas-hotel-new-york-new-york.html" target="_blank"> <img height="60" src="http://4.bp.blogspot.com/-ue40dxDn3rw/UiDQOrmqD8I/AAAAAAAAGB8/KTx0tWoyi1k/s400/las+vegas+hoteles.JPG" width="60" /><br /></a></td></tr>
</tbody>
</table>
<table cellpadding="3">
<tbody>
<tr>
<td align="center" width="33%"><a href="http://www.increibleviaje.com/2013/08/hoteles-en-las-vegas-hotel-luxor.html" target="_blank"> <img height="60" src="http://2.bp.blogspot.com/-K0znqw_VgMg/UiDYlRgXIVI/AAAAAAAAGDE/5-SXWUsWKyY/s400/las+vegas+hoteles.JPG" width="60" /><br /></a></td>

<td align="center" width="33%"><a href="http://www.increibleviaje.com/2013/08/hoteles-baratos-en-las-vegas-hotel-paris.html" target="_blank"> <img height="60" src="http://4.bp.blogspot.com/-sNdWZp1qgws/UiDfcEBYsII/AAAAAAAAGEU/2qFbeToTbgw/s400/las+vegas+hoteles.JPG" width="60" /><br /></a></td>

<td align="center" width="33%"><a href="http://www.increibleviaje.com/2013/08/las-vegas-hotel-circus-circus.html" target="_blank"> <img height="60" src="http://4.bp.blogspot.com/-HEMY3vlcZ_8/UiDtGq90crI/AAAAAAAAGF0/kgWbYn4ZYgE/s400/las+vegas+hoteles.JPG" width="60" /><br /></a></td></tr>
</tbody>
</table>

Realiza estos cambios:

He marcado de dos colores, en los cuales ustedes tendrán que realizar sus diferentes cambios.

Borra las URLs que están marcadas de color azul e inserta ahí las URLs correspondientes de los post que quieras dar a conocer.

Las URLs que están marcadas de color rojo, son las responsables de mostrar las imágenes, tienes que borrar todas y poner la URL correspondiente de tu imagen en cada una de ellas.

Eso es todo, ahora dale un clic en “Guardar” y ubica tu nuevo widget galería de imágenes donde quieras.

2 Insertar la galería de imágenes en un widget o en un post

Puedes ver su demostración en este post a continuación
Este código lo podrás insertar en un widget o en un post para mostrar las categorías que tu quieras.

Inserta el siguiente código en un post o en un widget

<table cellpadding="3">
<tbody>
<tr>
<td align="center" width="25%"><a href="http://www.increibleviaje.com/" target="_blank"> <img height="140" src="http://3.bp.blogspot.com/-W2sCRaj6iWU/UiEN__ffVzI/AAAAAAAAGI8/dvw5S0cy0wM/s1600/turismo+en+las+vegas.JPG" width="140" /><br />La descripción del texto aqui</a></td>

<td align="center" width="25%"><a href="http://www.increibleviaje.com/" target="_blank"> <img height="140" src="http://3.bp.blogspot.com/-pb3CbUqsZO0/UiED68diN1I/AAAAAAAAGIQ/mopS_jq9ebk/s400/informacion+de+las+vegas.JPG" width="140" /><br />La descripción del texto aqui</a></td>

<td align="center" width="25%"><a href="http://www.increibleviaje.com/" target="_blank"> <img height="140" src="http://1.bp.blogspot.com/-pRlPpJab5IU/UiEEL0CJ_bI/AAAAAAAAGIY/u715fYYMEcc/s400/las+vegas.JPG" width="140" /><br />La descripción del texto aqui</a></td>

<td align="center" width="25%"><a href="http://www.increibleviaje.com/" target="_blank"> <img height="140" src="http://4.bp.blogspot.com/-DJPBhkF-eQc/Uh_dXQJtnaI/AAAAAAAAF_g/9q6UEJCPAqM/s400/las+vegas+hoteles.JPG" width="140" /><br />La descripción del texto aqui</a></td>

</tr>
</tbody>
</table>

Realiza estos cambios:

He marcado de 3 diferentes colores en los lugares que deberán cambiar.

Las URLs que están marcadas de color azul, cámbialas por las URLs de tus post

Borra las URLs que están marcadas de color rojo, están son las URLs de las imágenes y es donde debes poner las URLs de tus imágenes.

Además, existe un texto que está marcado de color verde, bórralo y pon el texto que tú quieras.

Eso es todo.

Fácil verdad

Espero que les haya servido de mucha ayuda este grandioso tutorial, recuerda suscribirte para que recibas mis nuevas actualizaciones directamente en tu correo electrónico.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos.

3 comentarios:

  1. Muchísimas gracias. Una pregunta sobere la opción 2: ¿es posible seguir poniendo imágenes pero en vertical? Lo he intentado pero siguen el patroón horizontal que no me sirve para poner en un lateral del Blog. Gracias

    ResponderEliminar
    Respuestas
    1. Hola para realizar ese truco con la segunda opcion copia dos veces el codigo y veras que te resulta hasta que llegues al tope de donde tu quieres mostrar con eso se mostrara como la opcion 1 de este post. Recuerda hacerle mas pequeña a las imagenes en esta parte del codigo width="140"
      Saludos..

      Eliminar

Ayudadeblogger.com
Luis Chávez person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios