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:
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”
Abre un gadget “Añadir un gadget”
Busca el widget que dice “HTML/Javascript”
ábrelo e inserta el siguiente código en su interior
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgREhmpDMGU6KL7rTiJqRz6W4ClK62-qRux3E2Dqdhn8zp2stWDC5-X7qlaUFPSTf80xjyvfkPEFY5mVZ6Qb_wH6VFiUIKr2GDV0zPu5chwmwIW9PQnsOqVnwiTSsXMkd7E4qf7nZULVM-w/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitSlpaEt5LVxyGkswdihjx2okdV2YPGRBgJzcaEiBz8OwVrX3bMJcRTJzhGpoNDPoAJj59ORcr4WMiL0jjQUeUo4KhNmxfgYLoC9OFbWPiNgnCom6TAnejOuCAYbFce8QuoRlgut7vALi7/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxayXpkPblfvr-EWdUBSFA5jyejvIG7CIZQo5YoIlDmSPz4ZecCmZY2zRCk7cc9mgBENr-Iwms7C2yZWLAXHATOvV4kDMD_hDjo5MLglgfYqzxGr_bW4H5xHfyQsYqM6oVUpteBBC3yaIt/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9pNU83x38HKMwSEK5fFL2lROJqpBOD006T2An7pajVQXU-BmfSKyoueGj5cZJOAfIxcEAEixF4SOPQvN6GmX3fbDg6_kPtepZOWstHF_hWcG3hrqXtMXWxwm_0X8yg3cihD7TezNy16jj/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Au6BTFE-APBL6JCm25hQd9ku8QJUraRzHUSrXGbu3SqrzTbGS2jSqywOPfzPqxt2gfLt2qqNd-E_ivIDQlsK7AbzcNsEKZpWDqr7f1_-7pnzav7p6b67jsNu1JIGrFZum3nxGxTg1sWV/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJl8TIbzn7KxKFJMb-kO7U2HxU6CA9rZP_yXSmTMJ7582Ar9downLHjgDkpPSLJFAN5zZdJ200Vv3p6xpFXn_CB1l8wvXWiCnFsotBSgxGmQJQABBT8-p6ZLgE7eB_Z4pYXpGESAn-I3ya/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS-AHqUy-buGj2WW5gUdMPHLE1jS9ctYyOPvdRdmBWT2HviTBKTeDJ03KqzQxqaF2jaUjNPsINUUKyhsh8pHv1nr7NvT4GYCqqH3-HYdiqcIf4J3GM4MBPscmUM_AaqvTCI-YRTGVHyCQ6/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN9ZO2cV_cgKYtZ6tx4mdu_evHTRqocQQ4L-xF0dkZkn-S1brpHZHMtyOoO5am9RYPJZBkPVQkxX4l-O2DtWK16KMFs9619Ag6iHjzkTTS9ikbjvErHU_iJS3QQrYFVhocIs2pRlDSS-8-/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRf7A8XkvTYm5yN5Fsth4LpSOvUmNhzAcmc2MnvQrYrOcp8krprId7J6Uk7xYH5nu1B9fRdhkHeX5iUL_inctzz8LjiNuq7BrAMjQekuIcTaPUAWU_DPjoehXFiSFt7yCJZ-nxawhgyaOo/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgREhmpDMGU6KL7rTiJqRz6W4ClK62-qRux3E2Dqdhn8zp2stWDC5-X7qlaUFPSTf80xjyvfkPEFY5mVZ6Qb_wH6VFiUIKr2GDV0zPu5chwmwIW9PQnsOqVnwiTSsXMkd7E4qf7nZULVM-w/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitSlpaEt5LVxyGkswdihjx2okdV2YPGRBgJzcaEiBz8OwVrX3bMJcRTJzhGpoNDPoAJj59ORcr4WMiL0jjQUeUo4KhNmxfgYLoC9OFbWPiNgnCom6TAnejOuCAYbFce8QuoRlgut7vALi7/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxayXpkPblfvr-EWdUBSFA5jyejvIG7CIZQo5YoIlDmSPz4ZecCmZY2zRCk7cc9mgBENr-Iwms7C2yZWLAXHATOvV4kDMD_hDjo5MLglgfYqzxGr_bW4H5xHfyQsYqM6oVUpteBBC3yaIt/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9pNU83x38HKMwSEK5fFL2lROJqpBOD006T2An7pajVQXU-BmfSKyoueGj5cZJOAfIxcEAEixF4SOPQvN6GmX3fbDg6_kPtepZOWstHF_hWcG3hrqXtMXWxwm_0X8yg3cihD7TezNy16jj/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.
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
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
ResponderEliminarHola 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"
EliminarSaludos..
Eres todo un campeón GRACIAS MIL...
ResponderEliminar