GALERÍA DE IMÁGENES GIRATORIA PARA BLOGGER

Si buscas una manera diferente de presentar imagenes, aqui te traigo otra alternativa mas de las muchas que he presentado en este blog.
Como se puede apreciar, las imagenes van pasando sin parar, rotando como si de una noria de feria se tratase.

Esta galeria esta integramente realizada con CSS3, utilizando propiedades como perspective y transform-style que le dan este aspecto 3D.

Solo tienes que ponerlo en un Gadget “HTML-Javascript” y colocrlo donde mas te interese.

Modo de instalarlo:

1-Un clic en “Diseño”
                                                                         

2-Clic en “Añadir un gadget”
                                                                 

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

4-Coloca el siguiente codigo en el interior
                   
                                                                                   

Despues de haber insertado el código, un clic en  "Guardar"

                                                                             

"Stu Nicholls" es su creador y te puedes descargar el codigo completo haciendo click aqui

Si no quieres Descargarlo y quieres Copiarlo Aquí te lo dejo:

<div class="container">
<div class="rotate">
<img class="p1" src="URL DE LA IMAGEN" alt="" />
<img class="p2" src="URL DE LA IMAGEN" alt="" />
<img class="p3" src="URL DE LA IMAGEN" alt="" />
<img class="p4" src="URL DE LA IMAGEN" alt="" />
<img class="p5" src="URL DE LA IMAGEN" alt="" />
<img class="p6" src="URL DE LA IMAGEN" alt="" />
<img class="p7" src="URL DE LA IMAGEN" alt="" />
<img class="p8" src="URL DE LA IMAGEN" alt="" />
<img class="p9" src="URL DE LA IMAGEN" alt="" />
</div>
</div>

<style type="text/css">
.container {width:480px; height:280px; margin:250px 0;
-webkit-perspective:1200px;
perspective:1200px;
}
.rotate {width:480px; height:280px; position:relative;
-webkit-transform-style:preserve-3d; /* for Chrome */
transform-style:preserve-3d; /* for Firefox */
/* IE10 does not support preserve-3d so will ignore the above */
-webkit-transform: translate3d(0,0,-700px);
-webkit-perspective:1200px;
transform: translate3d(0,0,-700px);
perspective:1200px;
}
.rotate img {width:480px; height:280px; position:absolute; left:0; top:0; perspective:1200px;}

.p1 {
-webkit-animation:spin1 10s infinite linear;
animation:spin1 10s infinite linear;
}
.p2 {
-webkit-animation:spin2 10s infinite linear;
animation:spin2 10s infinite linear;
}
.p3 {
-webkit-animation:spin3 10s infinite linear;
animation:spin3 10s infinite linear;
}
.p4 {
-webkit-animation:spin4 10s infinite linear;
animation:spin4 10s infinite linear;
}
.p5 {
-webkit-animation:spin5 10s infinite linear;
animation:spin5 10s infinite linear;
}
.p6 {
-webkit-animation:spin6 10s infinite linear;
animation:spin6 10s infinite linear;
}
.p7 {
-webkit-animation:spin7 10s infinite linear;
animation:spin7 10s infinite linear;
}
.p8 {
-webkit-animation:spin8 10s infinite linear;
animation:spin8 10s infinite linear;
}
.p9 {
-webkit-animation:spin9 10s infinite linear;
animation:spin9 10s infinite linear;
}

/* for Chrome */
@-webkit-keyframes spin1 {
0% {-webkit-transform: rotateY(40deg) rotateX(0deg) translate3d(0,0,350px) rotateX(0deg) rotateY(-40deg); opacity:1;}
55% {opacity:0.5;}
100% {-webkit-transform: rotateY(40deg) rotateX(360deg) translate3d(0,0,350px) rotateX(-360deg) rotateY(-40deg); opacity:1;}
}
@-webkit-keyframes spin2 {
0% {-webkit-transform: rotateY(40deg) rotateX(40deg) translate3d(0,0,350px) rotateX(-40deg) rotateY(-40deg); opacity:0.9;}
44% {opacity:0.5;}
88% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(400deg) translate3d(0,0,350px) rotateX(-400deg) rotateY(-40deg); opacity:0.9;}
}
@-webkit-keyframes spin3 {
0% {-webkit-transform: rotateY(40deg) rotateX(80deg) translate3d(0,0,350px) rotateX(-80deg) rotateY(-40deg); opacity:0.8;}
33% {opacity:0.5;}
77% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(440deg) translate3d(0,0,350px) rotateX(-440deg) rotateY(-40deg); opacity:0.8;}
}
@-webkit-keyframes spin4 {
0% {-webkit-transform: rotateY(40deg) rotateX(120deg) translate3d(0,0,350px) rotateX(-120deg) rotateY(-40deg); opacity:0.7;}
22% {opacity:0.5;}
66% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(480deg) translate3d(0,0,350px) rotateX(-480deg) rotateY(-40deg); opacity:0.7;}
}
@-webkit-keyframes spin5 {
0% {-webkit-transform: rotateY(40deg) rotateX(160deg) translate3d(0,0,350px) rotateX(-160deg) rotateY(-40deg); opacity:0.6;}
11% {opacity:0.5;}
55% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(520deg) translate3d(0,0,350px) rotateX(-520deg) rotateY(-40deg); opacity:0.6;}
}
@-webkit-keyframes spin6 {
0% {-webkit-transform: rotateY(40deg) rotateX(200deg) translate3d(0,0,350px) rotateX(-200deg) rotateY(-40deg); opacity:0.6;}
44% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(560deg) translate3d(0,0,350px) rotateX(-560deg) rotateY(-40deg); opacity:0.6;}
}
@-webkit-keyframes spin7 {
0% {-webkit-transform: rotateY(40deg) rotateX(240deg) translate3d(0,0,350px) rotateX(-240deg) rotateY(-40deg); opacity:0.7;}
33% {opacity:1;}
88% {opacity:0.5;}
100% {-webkit-transform: rotateY(40deg) rotateX(600deg) translate3d(0,0,350px) rotateX(-600deg) rotateY(-40deg); opacity:0.7;}
}
@-webkit-keyframes spin8 {
0% {-webkit-transform: rotateY(40deg) rotateX(280deg) translate3d(0,0,350px) rotateX(-280deg) rotateY(-40deg); opacity:0.8;}
22% {opacity:1;}
77% {opacity:0.5;}
100% {-webkit-transform: rotateY(40deg) rotateX(640deg) translate3d(0,0,350px) rotateX(-640deg) rotateY(-40deg); opacity:0.8;}
}
@-webkit-keyframes spin9 {
0% {-webkit-transform: rotateY(40deg) rotateX(320deg) translate3d(0,0,350px) rotateX(-320deg) rotateY(-40deg); opacity:0.9;}
11% {opacity:1;}
66% {opacity:0.5;}
100% {-webkit-transform: rotateY(40deg) rotateX(680deg) translate3d(0,0,350px) rotateX(-680deg) rotateY(-40deg); opacity:0.9;}
}

/* IE10 require z-index to stack the images in the right order - other browsers use preserve-3d */
@keyframes spin1 {
0% {transform: rotateY(40deg) rotateX(0deg) translate3d(0,0,350px) rotateX(0deg) rotateY(-40deg); z-index:10; opacity:1;}
11% {opacity:1; z-index:10;}
55% {opacity:0.6; z-index:6;}
100% {transform: rotateY(40deg) rotateX(360deg) translate3d(0,0,350px) rotateX(-360deg) rotateY(-40deg); z-index:10; opacity:1;}
}
@keyframes spin2 {
0% {transform: rotateY(40deg) rotateX(40deg) translate3d(0,0,350px) rotateX(-40deg) rotateY(-40deg); z-index:9; opacity:0.9;}
44% {opacity:0.5; z-index:6;}
88% {opacity:1; z-index:10;}
100% {transform: rotateY(40deg) rotateX(400deg) translate3d(0,0,350px) rotateX(-400deg) rotateY(-40deg); z-index:9; opacity:0.9;}
}
@keyframes spin3 {
0% {transform: rotateY(40deg) rotateX(80deg) translate3d(0,0,350px) rotateX(-80deg) rotateY(-40deg); z-index:8; opacity:0.8;}
33% {opacity:0.5; z-index:6;}
77% {opacity:1; z-index:10;}
100% {transform: rotateY(40deg) rotateX(440deg) translate3d(0,0,350px) rotateX(-440deg) rotateY(-40deg); z-index:8; opacity:0.8;}
}
@keyframes spin4 {
0% {transform: rotateY(40deg) rotateX(120deg) translate3d(0,0,350px) rotateX(-120deg) rotateY(-40deg); z-index:7; opacity:0.7;}
22% {opacity:0.5; z-index:6;}
66% {opacity:1; z-index:10;}
100% {transform: rotateY(40deg) rotateX(480deg) translate3d(0,0,350px) rotateX(-480deg) rotateY(-40deg); z-index:7; opacity:0.7;}
}
@keyframes spin5 {
0% {transform: rotateY(40deg) rotateX(160deg) translate3d(0,0,350px) rotateX(-160deg) rotateY(-40deg); z-index:6; opacity:0.6;}
11% {opacity:0.5; z-index:6;}
55% {opacity:1; z-index:10;}
100% {transform: rotateY(40deg) rotateX(520deg) translate3d(0,0,350px) rotateX(-520deg) rotateY(-40deg); z-index:6; opacity:0.6;}
}
@keyframes spin6 {
0% {transform: rotateY(40deg) rotateX(200deg) translate3d(0,0,350px) rotateX(-200deg) rotateY(-40deg); z-index:6; opacity:0.6;}
44% {opacity:1; z-index:10;}
88% {opacity:0.5; z-index:6;}
100% {transform: rotateY(40deg) rotateX(560deg) translate3d(0,0,350px) rotateX(-560deg) rotateY(-40deg); z-index:6; opacity:0.6;}
}
@keyframes spin7 {
0% {transform: rotateY(40deg) rotateX(240deg) translate3d(0,0,350px) rotateX(-240deg) rotateY(-40deg); z-index:7; opacity:0.7;}
33% {opacity:1; z-index:10;}
77% {opacity:0.5; z-index:6;}
100% {transform: rotateY(40deg) rotateX(600deg) translate3d(0,0,350px) rotateX(-600deg) rotateY(-40deg); z-index:7; opacity:0.7;}
}
@keyframes spin8 {
0% {transform: rotateY(40deg) rotateX(280deg) translate3d(0,0,350px) rotateX(-280deg) rotateY(-40deg); z-index:8; opacity:0.8;}
22% {opacity:1; z-index:10;}
66% {opacity:0.5; z-index:6;}
100% {transform: rotateY(40deg) rotateX(640deg) translate3d(0,0,350px) rotateX(-640deg) rotateY(-40deg); z-index:8; opacity:0.8;}
}
@keyframes spin9 {
0% {transform: rotateY(40deg) rotateX(320deg) translate3d(0,0,350px) rotateX(-320deg) rotateY(-40deg); z-index:9; opacity:0.9;}
11% {opacity:1; z-index:10;}
55% {opacity:0.5; z-index:6;}
100% {transform: rotateY(40deg) rotateX(680deg) translate3d(0,0,350px) rotateX(-680deg) rotateY(-40deg); z-index:9; opacity:0.9;}
}

</style>

Fecha de la Publicación; 23-07-2019

 Fuente; redeando

 Publicado por;                                                                           

CAMBIAR LAS ETIQUETAS POR UN MENÚ DESPLEGABLE .

Es momento de traerles nuevas formas de embellecer a nuestro blog de Blogger, con un widget de etiquetas, el cual nos mostrara un menú desplegable de todas sus etiquetas de blog de Blogger. Este servicio solo sirve para los que usan la plataforma de Blogger. Ahora la configuración de la etiqueta y para transformarlo en un menú desplegable es tan simple como abrir su blog de blogger. Los pasos son muy sencillos, he tratado de ser lo mas explicativo posible.

OPCIONES DE PAGINACIÓN PARA BLOGGER .

Una de las mayores utilidades cuando empiezas a tener muchas páginas con una misma etiqueta (y que además le da un toque muy profesional a tu blog)
es agregar un sistema de Paginación, en esta oportunidad  ESCAPARATE DIGITAL 2019 te trae un código para agregar una Paginación para Blogger.

Una de las grandes ventajas que busco con este sistema de Paginación para el blog es que sea sencillo de instalar y que no requiera modificar elcódigo fuente de la plantilla de tu blog como otros sistemas de Paginación para blogger disponibles, es decir que se coloque en tu blog de la misma forma que cualquier otro gadgets o widgets.

BOTON DE IR ARRIBA Y IR ABAJO PARA BLOGGER. 

Un gadget muy útil que puedes agregar a tu blog es el popular botón de Ir arriba o Ir abajo, o sea un gadget que le agregará a tu blogger la posibilidad de que los visitantes puedan moverse del inicio del blog al final de la página sin problemas.

¿Quieres saber exactamente de que se trata este gadget? Mira la esquina inferior derecha de esta página y puedes probar como funciona.