Widgets y Plugins para Blogger


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.

Enviar por correo
  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

Discusión:

 

Inspiración

Tecnología

Contactos

+593 994589032