add

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


¿Necesitabas nuevos estilos en las imágenes de presentación de tu blog de Blogger? Ayudadeblogger.com te ayuda con un código CSS que realiza una función muy importante para darle un estilo diferente a una galería de imágenes. Lo que vamos a ser es mostrar las imágenes más destacadas de nuestras publicaciones en una galería centrada en el sidebar de nuestro blog de Blogger. Podemos ubicar las imágenes que nosotros queramos al igual si queremos mostrar solo una imagen, 5 imágenes o más.

Características importantes

Muestra la imagen
Al pasar el cursor por la galería de cualquier imagen, dará un efecto envolvente de la imagen y luego mostrara, el título del post, una pequeña descripción de su artículo y un link dirigido hacia el post que queramos destacar y dar a conocer.

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

Este widget para Blogger nos ayudara a destacar los artículos más destacados de nuestro blog, ayudando a aumentar las vistas de los artículos.

A continuación pueden ver su demostración en el siguiente demo, el widget está ubicado al final del sidebar y tiene como nombre “Galería

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

Les gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño


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

3 Abre un gadget “Añadir un gadget


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

4 Busca el widget que dice “HTML/Javascript” ábrelo

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

5 Inserta el siguiente código en su interior

<style>
.ayudadeblogger { /* 300x188 */
    border: 10px solid #FFF;
    cursor: pointer;
    height: 188px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 300px;
  }
  .ayudadeblogger img { /* la imagen */
    display: block;
    position: relative;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .ayudadeblogger:hover img {
    -moz-transform: rotate(720deg) scale(0);
    -webkit-transform: rotate(720deg) scale(0);
    -o-transform: rotate(720deg) scale(0);
    -ms-transform: rotate(720deg) scale(0);
    transform: rotate(720deg) scale(0);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  .ayudadeblogger .mask {
    background-color: #094B8D;
    height: 188px;
    left: 0;
    position: absolute;
    overflow: hidden;
    top: 0;
    width: 300px;
    -moz-transform: rotate(0deg) scale(1);
    -webkit-transform: rotate(0deg) scale(1);
    -o-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    opacity: 0;
    filter: alpha(opacity=0);
  }
  .ayudadeblogger:hover .mask {
    -moz-transform: translateY(0px) rotate(0deg);
    -webkit-transform: translateY(0px) rotate(0deg);
    -o-transform: translateY(0px) rotate(0deg);
    -ms-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
    -moz-transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .ayudadeblogger h4 { /* ecuador-turistico.com */
    background-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    text-align: center;
    position: relative;
    font-family: Georgia;
    font-size: 20px;
    margin: 20px 0 0 0;
    padding: 5px 0;
    text-shadow: 0 3px 1px #000;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .ayudadeblogger:hover h4 {
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.7s;
    -webkit-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    transition-delay: 0.7s;
  }
  .ayudadeblogger p {
    color: #000;
    font-family: Tahoma;
    font-size: 13px;
    margin: 0;
    padding: 15px;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 1px #FFF;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .ayudadeblogger:hover p {
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }
  .ayudadeblogger a.info {
    background-color: #456;
    border-radius: 5px;
    box-shadow: 0 0 2px #FFF, 0 0 5px #FFF inset;
    color: #FFF;
    display: inline-block;
    padding: 7px 14px;
    text-decoration: none;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .ayudadeblogger a.info:hover {
    box-shadow: 0 0 5px #FFF;
  }
  .ayudadeblogger:hover a.info {
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
</style>
<div class="ayudadeblogger">
  <img src="http://2.bp.blogspot.com/-Gq2l0jEt4yg/Ut7ekTlpSbI/AAAAAAAAGWs/Jzh7T1mxmsU/s1600/ayudadeblogger+1.jpg" />
  <div class="mask">
    <h4> AQUI EL TITULO </h4>
    <p> Aquí su texto resumido </p>
    <a href="http://www.increibleviaje.com/" class="info"> LEER MAS </a>
</div>
</div>
<div class="ayudadeblogger">
<img src="http://1.bp.blogspot.com/--7C9MyKqalQ/Ut7ez6YEHNI/AAAAAAAAGW0/vS946WwZVEg/s1600/ayudadeblogger+1.jpg" />
  <div class="mask">
    <h4> AQUI EL TITULO </h4>
    <p> Aquí su texto resumido </p>
    <a href="http://www.increibleviaje.com/" class="info"> LEER MAS </a>
</div>
</div>
<div class="ayudadeblogger">
<img src="http://1.bp.blogspot.com/-EOfRD__y4JQ/Ut7fFMsX1iI/AAAAAAAAGW8/IOWcHTAAMmQ/s1600/ayudadeblogger+1.jpg" />
  <div class="mask">
    <h4> AQUI EL TITULO </h4>
    <p> Aquí su texto resumido </p>
    <a href="http://www.increibleviaje.com/" class="info"> LEER MAS </a>
</div>
</div>
<div class="ayudadeblogger">
<img src="http://1.bp.blogspot.com/-n3oJT9QJv-k/Ut7fqRow1mI/AAAAAAAAGXE/T2BahCJffcY/s1600/ayudadeblogger+1.jpg" />
  <div class="mask">
    <h4> AQUI EL TITULO </h4>
    <p> Aquí su texto resumido </p>
    <a href="http://www.increibleviaje.com/" class="info"> LEER MAS </a>
</div>
</div>

Realiza estos cambios:

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

La URL que está marcada de color rojo representa a cada una de las imágenes a mostrar, recuerda publicar una imagen que tenga una dimensión de 300x200 prixeles, y todas deberán tener esa misma dimensión para que no se salga de contexto las imágenes.

Cambia las URLs que están marcadas de color azul, por la dirección URL del artículo que quieras a conocer.

Borra las palabras que están marcadas de color verde, por el título de algún post en particular

Y por último, borra el texto que está marcado de color anaranjado y cámbialo por un pequeño resumen del artículo que estés dando a conocer.

Eso es todo, ahora dale un clic en “Guardar” y ubica tu nuevo widget de imágenes el sidebar de tu blog de Blogger

Nota: Si quieres disminuir el puesto de imágenes a mostrar o si solo quieres mostrar una sola imagen basta con borrar a partir del código que está marcado de color púrpura hasta el último código que es el termino de </div>, con esto solo se mostrara una imagen.

Fácil verdad!

Además, pueden visitar más Widgets para Blogger de los siguientes links


Recuerda suscribirte y recibirás mis nuevas actualizaciones diarias directamente en tu correo electrónico

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos

4 comentarios:

  1. Buenisimo!!!!....Te queria consultar: La plantilla teatro que utilizaste la tenes disponible para bajar?....si es asi, donde esta, el link de descarga?....Espero tu respuesta y muchisimas gracias por todo como siempre!!!! Gabriel

    ResponderEliminar
    Respuestas
    1. Hola Gabriel, en estos dias publicare el tutorial de la plantila Teatro, mientras tanto mantente atento a mis nuevas actualizaciones, te recomiendo que te suscribas, y en estos dias lo reicibiras directamente en tu correo electronico.
      Saludos.

      Eliminar
  2. Grande Luis!....Si suscripto ya estoy....la espero entonces! Gracias como siempre por tu pronta y amable respuesta! Un gran abrazo!!!

    ResponderEliminar
  3. Ando buscando algo como eso pero en horizontal.

    ResponderEliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios