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.

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

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

DEMO

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño

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

3 Abre un gadget “Añadir un gadget

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

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

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

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


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



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.

Related post

Comentarios

6 comentarios:

  1. Hola Luis, muchas gracias por el Widget. Me encanta y logre ponerlo en un Blog, sin embargo mi plantilla es de 1200 de ancho y me gustaría saber como hago para agrandarlo. Ya intente poniendo otra imagen para que en total sean 4 y quedaría excelente solo que igual me sigue saliendo abajo y no va con el diseño. Alguna ayuda. Gracias

    ResponderEliminar
  2. Hola, Luis.
    Gracias por el widget. Está muy bueno. Una pregunta, se puede centrar? Es que no lo puse en la cabecera, sino abajo de las entradas, entonces sale cargado hacia la izquierda.

    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Miguel, sobre su pregunta seria bueno que me haga saber la dirección URL de su blog, específicamente donde inserto la galería, tal vez algún estilo de su blog este provocando lo que usted indica.

      Saludos

      Eliminar
  3. Hola, Luis, espero puedas ayudarme sobre si se puede centrar la galería. Gracias.

    ResponderEliminar
  4. Ah, ya. Gracias. No había visto la respuesta y por eso puse otro mensaje, lo siento.
    Este es el blog: http://www.oorales.blogspot.com

    ResponderEliminar
  5. Muchísimas gracias!!!Me encanta esté blog. Como se nota la profesionalidad.Las explicaciones son estupendas.Lo he puesto en el blog y queda de lujo.
    Gracias

    ResponderEliminar