GALERÍA DE IMÁGENES PARA BLOGGER NUEVOS ESTILOS

GALERÍA DE IMÁGENES PARA BLOGGER NUEVOS ESTILOS.

El día de hoy explicare un truco muy básico para todos los usuarios de Blogger.
Aprenderán a insertar un simple código con el cual se mostrara una galería de imágenes con un estilo diferente, y así destacar los artículos más importantes de su blog.
El código de esta nueva galería de imágenes funciona perfectamente en todos los navegadores web.

A continuación pueden ver su demostración en el siguiente blog de demos, el widget galería de imágenes tiene como nombre



Despues de ver su demostración vamos a instalar el código en un widget

Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:

Un clic en “Diseño”

Clic en “Añadir un gadget”

Busca el widget que dice “HTML-Javascript” y ábrelo       

Coloca el siguiente código en el interior     

     

Después de haber insertado el código, un clic en "Guardar

<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-second 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-second .mask {
background-color: rgba(115,146,184, 0.7);
width: 300px;
padding: 60px;
height: 300px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translate(265px, 145px) rotate(45deg);
-moz-transform: translate(265px, 145px) rotate(45deg);
-o-transform: translate(265px, 145px) rotate(45deg);
-ms-transform: translate(265px, 145px) rotate(45deg);
transform: translate(265px, 145px) rotate(45deg);
-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-second h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: translate(200px, -200px);
-moz-transform: translate(200px, -200px);
-o-transform: translate(200px, -200px);
-ms-transform: translate(200px, -200px);
transform: translate(200px, -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-second p {
-webkit-transform: translate(-200px, 200px);
-moz-transform: translate(-200px, 200px);
-o-transform: translate(-200px, 200px);
-ms-transform: translate(-200px, 200px);
transform: translate(-200px, 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-second a.info {
-webkit-transform: translate(0px, 100px);
-moz-transform: translate(0px, 100px);
-o-transform: translate(0px, 100px);
-ms-transform: translate(0px, 100px);
transform: translate(0px, 100px);
-webkit-transition: all 0.2s 0.1s ease-in-out;
-moz-transition: all 0.2s 0.1s ease-in-out;
-o-transition: all 0.2s 0.1s ease-in-out;
-ms-transition: all 0.2s 0.1s ease-in-out;
transition: all 0.2s 0.1s ease-in-out;
}
.view-second:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translate(-80px, -125px) rotate(45deg);
-moz-transform: translate(-80px, -125px) rotate(45deg);
-o-transform: translate(-80px, -125px) rotate(45deg);
-ms-transform: translate(-80px, -125px) rotate(45deg);
transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2 {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-o-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,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;
}
.view-second:hover p {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-o-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
-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-second:hover a.info {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-o-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,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;
}
</style>
<div class="ayudadeblogger view-second">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxoUXMjb8bLimMAjydAjGk_MnHnfQJkDuDrCrcwcHgMogJuCWOMrwaWQbf2Jr2QEX42kDg_8H8QEOzeX09vD0faB9ANzxfQxH2rT_ZwDq66JgXv3l2IST_BBYXBt2j3z-wtq2GBbdLYUg/s1600/ecuador.jpg" />
<div class="mask"></div>
<div class="content">
<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-second">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoI-gWaL_qdz7eSgSbNfpP8mDDEmvPJwqX7GulaWIGLhEfhdmnLJtV7YAAAFpyiBuQ_7nwhAzohxnELhA00vNGbtF7peqHyHGVwqhY7WnzHLYNkg2GinhzlqBGe_6bGTxeAe3V-yw0Bdo/s1600/ecuador.jpg" />
<div class="mask"></div>
<div class="content">
<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-second">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggqWIMnADLEf0_TDRpIYT9uYzzBq3eHJ4WszpQKXPn_Soo1usyKKZ46ElRilTLpInTOjhKxMohGm_zgc0dJ8wnhwXScvlLb1SA1Y_Don_MhY_SVf2zxHGB4lbylVjMdnWI5CCH_8slvjc/s1600/ecuador.jpg" />
<div class="mask"></div>
<div class="content">
<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

 Data de la Publicación; 28-04-2020

 Fuente;  ayudadeblogger

 Publicado por;