PÁGINA DE BIENVENIDA
Banner
Bienvenida
Ultimas Entradas
Para ello utilizaremos un sencillo código CSS3, utilizando sus propiedades de animación sin utilizar ningún tipo de Javascript, lo que nos dara un efecto suave, facilita la carga y no retardara nuestro blog para nada.
Tened en cuenta que solo hay que poner una imagen, que sea más bien larga y estrecha para que de esta apariencia de cinta transportadora.
¿Para que nos puede servir este efecto? Pues le podemos dar muchas utilidades, como para el titulo del blog o para anunciar algún evento, por ejemplo.
Para añadirla a tu blog o web, tan solo tienes que copiar este código y pegarlo allí donde quieras mostrarlo.
Puedes cambiar el tamaño de la altura donde está en color rojo, por el ancho no te preocupes porque se adapta automáticamente.
En la linea en color Azul, tienes que añadir la URL de la imagen que aparecerá moviéndose.
Para instalarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
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
<div id="cintaimagen"></div>
<style>
#cintaimagen {
width:98%;
height:100px;/* ALTO CINTA */
background:url(URL DE LA IMAGEN) repeat-x transparent;
display:block;
border:5px solid gainsboro;
box-shadow:0 0 8px silver;m
-webkit-animation-name: cintaimagen;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: cintaimagen;
-moz-animation-duration: 20s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: cintaimagen;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-webkit-keyframes cintaimagen{ 0% {background-position:0 0;} 100% { background-position:-960px 0; } }
@-moz-keyframes cintaimagen { 0% {background-position:0 0;} 100% { background-position:-960px 0; } }
@keyframes cintaimagen { 0% {background-position:0 0;} 100% { background-position:-960px 0; } }
</style>
<style>
#cintaimagen {
width:98%;
height:100px;/* ALTO CINTA */
background:url(URL DE LA IMAGEN) repeat-x transparent;
display:block;
border:5px solid gainsboro;
box-shadow:0 0 8px silver;m
-webkit-animation-name: cintaimagen;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: cintaimagen;
-moz-animation-duration: 20s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: cintaimagen;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-webkit-keyframes cintaimagen{ 0% {background-position:0 0;} 100% { background-position:-960px 0; } }
@-moz-keyframes cintaimagen { 0% {background-position:0 0;} 100% { background-position:-960px 0; } }
@keyframes cintaimagen { 0% {background-position:0 0;} 100% { background-position:-960px 0; } }
</style>
Despues de haber insertado el código, un clic en "Guardar"
Fecha de la Publicación;04-08-2019
Fuente; redeando
Publicado por;
domingo, agosto 04, 2019
No comentarios
martes, enero 15, 2019
No comentarios
Imagen flotante en Blogger
Para lograr este efecto nos dirigimos a: Diseño, Agregar Gadget, seleccionamos "HTML-Java SCRIPT" y pegamos el siguiente código:
<a style="display:scroll;position:fixed;bottom:0px;right:0px;" href=" http://programas-gratis-pc-full.blogspot.com/p/videos.html"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZjzdgoSOS1N19IdvTu4Dvy2vNJ96Lr7H444ts2TViUZVUcb9KkKpFwm6s3RlML2X9CjOvQVxlbbL2tYMSmpNL2PsBq188TJ6RcPjlqpOJJ65LTmrxZJJiA_kQskMRm57f6-FfJZgTp1L9/s320/123.jpg "/></a>
Nota.- en las lineas de color azul ustedes las cambian por sus datos: Url de la imagen y Url a donde
redireccionara la imagen al hacer click en ella. Les quedara tal como la que tengo en la parte de abajo del lado derecho,pueden cambiarla al lado izquierdo solo cambian: right por left.
Fuente;
Fecha:19/01/2017
Publicado por:
jueves, enero 19, 2017
No comentarios
Colocar una una flexa en una esquina de nuestro Blog para que nos lleve arriba
Un ejemplo lo pueden ver en esta misma entrada, en la esquina inferior derecha.Yo puse una flecha hacia arriba, que si la clickean verán cómo los conduce hacia arriba. Lo mismo pasará con la imágen que ustedes elijan, no importa si es un libro, una pelota, una persona lo que pongais, al clickearla os va a conducir hacia la parte superior de nuestro blog.
Si lo quieren colocar en una entrada lo pueden hacer como lo hice yo, pero, si quieren que esa imágen aparezca en todas las entradas, es decir, en todo el blog, simplemente colocan el código en su plantilla antes de la etiqueta </body> .
<a href='#'><img alt='ir arriba' border='0' src='URL de la imágen' style='position:fixed; bottom:0; right:0;'/></a>
Simplemente reemplacen ahora lo que está en rojo por la URL de la imágen que quieren mostrar y, si
quieren que aparezca a la izquierda en vez de la derecha simplemente cambien right por left.
jueves, enero 19, 2017
No comentarios
Caja para imagen y texto
Hola este cantante es Kurt Cobain de Nirvana
Tutoriales Blogger Kiradober
Aquí os traigo una cajita para colocar una imagen con un texto en la parte posterior con link para redireccionar al que clique en la imagen.
<div id="textarea ">
Hola esta caja CSS emula a un textarea de HTML<br />
<a href="Aqui la URL del Vinculo">Hola es un hipervinculo</a><br />
<img src="imagen.jpg" alt="imagen" title="imagen" border="0" />
</div>
Hola esta caja CSS emula a un textarea de HTML<br />
<a href="Aqui la URL del Vinculo">Hola es un hipervinculo</a><br />
<img src="imagen.jpg" alt="imagen" title="imagen" border="0" />
</div>
Lo que se tiene que cambiar:
imagen.jpg Aqui pones la URL de la imagen
Aqui la URL del Vinculo Donde quieras que lo dirija cuando de clic en el vinculo
Hola es un hipervinculo Nombre del vinculo pagina o lo que quieras
imagen Titulo imagen
Hola esta caja CSS emula a un textarea de HTML Aqui pon el texto que tu quieras
Fecha:01/01/2017
Publicado por:
domingo, enero 01, 2017
No comentarios
