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


La facilidad con la que se puede realizar un espectacular widget y utilizarlo en nuestro blog de Blogger es lo mejor que podrán obtener en este sitio web. Utilizar nuevos Widgets para Blogger en nuestro blog y ubicarlos en donde más nos convenga, es una forma de dar a conocer nuestros post más populares y así tener más tráfico web gracias a las ubicaciones y creaciones de nuevos puesto. Esta nueva galería de imágenes funciona perfectamente en todos los navegadores web, tiene una carga ligera apta para un diseño web profesional. El código no lo vamos a insertar en el Editor HTML de nuestra plantillas, lo que aremos es copiar y pegar el código en un widget HTML/Javascript, que hace que sea más fácil para cambiar las imágenes y las direcciones URLs.

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

Luego de esta corta explicación pueden ver su demostración en mi blog de demos, el widget galería de imágenes tiene como nombre “GALERIA ESTILOS 1

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

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño

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

3 Abre un gadget “Añadir un gadget

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

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

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

5 Inserta las siguientes líneas de código en su interior

<style>
.ayudadeblogger {
width: 275px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #000;
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,.view .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-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-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-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
.view-first a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-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-first:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
</style>
<div class="ayudadeblogger view-first">
<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-first">
<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-first">
<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:

Este widget muestra 3 imágenes con sus respectivas descripciones y direcciones URLs. He marcado de 4 diferentes colores en los lugares que ustedes tendrán que realizar sus diferentes cambios.

Por ejemplo:

Las tres direcciones URLs que están marcadas de color rojo, son las responsables de mostrar las imágenes, debes borrar cada una de ellas y remplazarlas por las direcciones URLs de tus imágenes, las imágenes tienen que tener una dimensión de 280x208.

Elimina los tres nombres que dicen AQUI EL TITULO y remplázalos por el título del artículo destacado que vayas a dar a conocer

También, tienes que eliminar las palabras que dicen Diseño | Tecnología | CSS | Ayudadeblogger por una pequeña descripción del artículo que vayas  a destacar.

Y por último, elimina las tres direcciones URLs que están marcadas de color azul http://www.ecuador-turistico.com/2014/01/turismo-en-ecuador-banos-de-agua-santa.html, estas son las responsables de mostrar el articulo destacado, cámbialas por tus direcciones URLs

Eso es todo, es momento de dar un clic en “Guardar” y ubica tu nuevo widget debajo de la cabecera principal de tu blog o donde mejor te parezca

Fácil verdad!

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

No se olviden de visitar algunos Widgets para Blogger que publique anteriormente


¿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

1 comentario:

  1. Hola ¿Cómo estas? Dos preguntotas

    1.-Si quiero dejar el efecto de la imagen (zoom) y el color (amarillo) pero las letras fijas (visibles) ¿Cómo le podría hacer?

    2.- Si lo quisiera crear por medio de las entradas (de forma no manual) ¿Cómo podría hacerlo?

    De antemano gracias =)

    ResponderEliminar