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>

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

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