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.

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”

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 dice “HTML/Javascript” ábrelo

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>

<h2>AQUI EL TITULO 1</h2>

<p>Diseño | Tecnología | CSS | Ayudadeblogger</p>

</div>

<h2>AQUI EL TITULO 2</h2>

<p>Diseño | Tecnología | CSS | Ayudadeblogger</p>

</div>

<h2>AQUI EL TITULO 3</h2>

<p>Diseño | Tecnología | CSS | Ayudadeblogger</p>

</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

Crear un widget de suscripciones para mi blog de blogger

Formulario de contacto para blogger con un simple widget

Imágenes de artículos destacados con thumbnail

Me gusta Facebook Google + y Twitter Popout para blogger

Mostrar un widget desplegable de categorías para blogger

Nuevo estilo de etiquetas con menu desplegable para blogger

Publicar un Widget por etiquetas con imágenes en blogger

Trucos para blogger Widget de imágenes para blogger