Widgets para Blogger – Galería de imágenes nuevos estilos V4

Compartir con la comunidad Blogger nuevos Widgets para Blogger y utilizarlos con estilos diferentes para mostrar nuestras categorías más populares y así obtener mas trafico web hacia nuestro blog es una forma de optimizar nuestras publicaciones destacadas. A este nuevo widget para Blogger se lo conoce como galería de imágenes V4, lo que vamos hacer es copiar un código en un widget HTML/javascript y ubicarlo debajo de la cabecera principal de nuestro blog o al final del blog, todo depende de su gusto, nos mostrara tres puestos de imágenes con sus respectivas URLs de sus artículos a mostrar, tendremos que hacer todo este proceso de forma manual.

A continuación mire su demostración en el siguiente blog de demos

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño”

3 Abre un gadget “Añadir un gadget”

4 Busca el widget que tiene como nombre “HTML/Javascript” ábrelo

5 Ingresa el siguiente código en su interior

<style> .ayudadeblogger { width: 275px; height: 200px; margin: 5px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; -webkit-box-shadow: 1px 1px 2px #e6e6e6; -moz-box-shadow: 1px 1px 2px #e6e6e6; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background: #000 no-repeat center center; } .ayudadeblogger .mask,.ayudadeblogger .content { width: 275px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0; } .ayudadeblogger img { display: block; position: relative; } .ayudadeblogger h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0; } .ayudadeblogger p { font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center; } .ayudadeblogger a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; text-transform: uppercase; -webkit-box-shadow: 0 0 1px #000; -moz-box-shadow: 0 0 1px #000; box-shadow: 0 0 1px #000; } .ayudadeblogger a.info: hover { -webkit-box-shadow: 0 0 5px #000; -moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; } .view-third img { -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .view-third .mask { background-color: rgba(0,0,0,0.6); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: translate(460px, -100px) rotate(180deg); -moz-transform: translate(460px, -100px) rotate(180deg); -o-transform: translate(460px, -100px) rotate(180deg); -ms-transform: translate(460px, -100px) rotate(180deg); transform: translate(460px, -100px) rotate(180deg); -webkit-transition: all 0.2s 0.4s ease-in-out; -moz-transition: all 0.2s 0.4s ease-in-out; -o-transition: all 0.2s 0.4s ease-in-out; -ms-transition: all 0.2s 0.4s ease-in-out; transition: all 0.2s 0.4s ease-in-out; } .view-third h2 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .view-third p { -webkit-transform: translateX(300px) rotate(90deg); -moz-transform: translateX(300px) rotate(90deg); -o-transform: translateX(300px) rotate(90deg); -ms-transform: translateX(300px) rotate(90deg); transform: translateX(300px) rotate(90deg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .view-third a.info { -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .view-third:hover .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); } .view-third:hover h2 { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -ms-transition-delay: 0.5s; transition-delay: 0.5s; } .view-third:hover p { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; } .view-third:hover a.info { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; } </style> <div class="ayudadeblogger view-third"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1b8gh4kpl4zLsxEUtj1u4wHyzTpaHCCwy9xbE4ikJhdo8e2JNbCwsx3PK-hMQtG82rTGK6AtWnthRWZ-XRaFqZAxwygBBFm031NdPEyf6IO9EtBKfNR_A1r06DnQDkRke764dR6Pb_9I/s1600/ecuador.jpg" /> <div class="mask"> <h2>AQUI EL TITULO 1</h2> <p>Diseño | Tecnología | CSS | Ayudadeblogger</p> <a href="http://www.ecuador-turistico.com/2014/01/turismo-en-ecuador-banos-de-agua-santa.html" class="info">Leer más</a> </div> </div> <div class="ayudadeblogger view-third"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWyOgRTaJIMBQ7mwuDYTWrR-5WWVkJkLW2ZG4xnR5WDsfn3NbLAoSrHvtJCyMR7I6CreSsqDgmOBz1A4nplR8eeUFjhmjhSVSAH1-UZM8ZgBWzz1_3LVmLaffahbSrwW6GMs7_mz5xG_A/s1600/ecuador.jpg" /> <div class="mask"> <h2>AQUI EL TITULO 2</h2> <p>Diseño | Tecnología | CSS | Ayudadeblogger</p> <a href="http://www.ecuador-turistico.com/2014/01/turismo-en-ecuador-banos-de-agua-santa.html" class="info">Leer más</a> </div> </div> <div class="ayudadeblogger view-third"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEDi5v9ENcV6E1pgmDrZ9N_RhPe-tx3Lv5d04qN5Ya-cXIeHLQ_thcHoFR1sSTPMUW3XSSDubA_FbSodPdFTmkdYpG7nvs6HZsLoag_brcrGzXcyl7_tSJNXnET8jgg5smUsvZXTP4URc/s1600/ecuador.jpg" /> <div class="mask"> <h2>AQUI EL TITULO 3</h2> <p>Diseño | Tecnología | CSS | Ayudadeblogger</p> <a href="http://www.ecuador-turistico.com/2014/01/turismo-en-ecuador-banos-de-agua-santa.html" class="info">Leer más</a> </div> </div>

Realiza estos cambios:

He marcado de 4 diferentes colores, en los lugares que tendrán que realizar sus cambios

Por ejemplo:

Tienes que borrar las URLs que están marcadas de color rojo, por las URLs de las imágenes que quieras dar a conocer en cada una de ellas, además, la imagen debe tener una dimensión de 280x208.

Borra las palabras que dicen AQUI EL TITULO, por el título del post.

Y por último cambia las direcciones URLs http://www.ecuador-turistico.com/2014/01/turismo-en-ecuador-banos-de-agua-santa.html por las direcciones URLs de sus artículos destacados.

Eso es todo, ahora dale un clic en “Guardar” y ubica tu widget debajo de la cabecera principal de tu blog

Fácil verdad!

Además, pueden ver otros Widgets para Blogger en los siguientes links

Widget de redes sociales para blogger con efectos

Widget de suscripciones para blogger

Widget imágenes artículos destacados versión 2

Widget para blogger Acordeón Portafolio

Widget para blogger Mega Widget

Widget para blogger Menú de Redes Sociales

Widget social de suscripciones horizontal para blogger

Widgets para Blogger iconos sociales

Widgets para Blogger – Galería de imágenes nuevos estilos V2

Widgets para Blogger – Galería de imágenes nuevos estilos V3

Widgets para Blogger – Metro social

Widgets para Blogger – Multi Tabla

Widgets para Blogger – Nuevas Publicaciones

Widgets para Blogger – Nuevos estilos galería de imágenes

Widgets para Blogger – Slideshow automático V

Widgets para Blogger – Suscripciones V3

Widgets para Blogger – Suscripciones V4

Widgets para Blogger – Widget de suscripción social

Widgets para blogger Mega widget V2

Widgets para blogger nuevo marcador social para blogger

Recuerda suscribirte y recibirás mis nuevas actualizaciones directamente en tu bandeja de entrada

¿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

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Widgets para Blogger

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.