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.



Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: