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="http://4.bp.blogspot.com/-rsoF8CKF-4g/UuA4_Zl-koI/AAAAAAAAGZY/VUlik3poODU/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="http://3.bp.blogspot.com/-X4kMz03d2dA/UuA5RKOqJ0I/AAAAAAAAGZg/9F2d9eT1AcU/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="http://4.bp.blogspot.com/-2pcMlMZZMQE/UuA5bGsYvKI/AAAAAAAAGZo/qfETuqdODKI/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




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: