add

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="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-first">
<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-first">
<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:

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

1 comentarios:

  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

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