COMO PONER UN PLAYLIST COMO ESTE EN MI PAGINA
Esta sección es para que podáis poner vuestros trucos y sugerencias, que conozcáis para mejorar nuestras web , se publicara, vuestro truco con un enlace a vuestra web y especificando de quien es cada nueva idea.
Voy a empezar yo con algunos que me parecen bastante divertidos
Al final de esta pagina encontraras como hacer el codigo de objetos cayendo por la web
Cuando ponemos mucho contenido, o elementos pesados en cargar com los banner, los flash etc, nuestra pagina se queda parada hasta que carga por lo que nuestros visitantes se pueden aburrir de esperar a que cargue y abandonar nuestra web.
Os voy a dejar un código y la explicacion de como personalizarlo con la imagen que mas te guste para que aparezca al cargar la pagina y cuando ya esta cargada desaparece.
<script type='text/javascript'>
//<![CDATA[
window.onload = detectarCarga;
function detectarCarga(){
document.getElementById("imgLOAD").style.display="none";
}
//]]>
</script>
<div id='imgLOAD' style="TEXT-ALIGN:center">
<b>ESTA CARGANDO LA PAGINA, ESPERA UNOS SEGUNDOS</b>
<center>
<img src="" />
</center>
</div>
Lo primero que hacemos es poner nuestro propio texto en lo que os he marcado en rojo,( no os olvidéis que cuando la pagina este cargada desaparecerá, tanto el texto como la imagen.)
Elegimos la imagen que queremos que aparezca cuando se este cargando la pagina, tenemos que saber la dirección URL de la imagen, ya he explicado en esta web como saber la dirección URL de una imagen.
Explico un poquito mas abajo en esta misma pagina como se sabe la url de una imagen en los diferentes Navegadors
- Ahora vamos a ponerla en el código , vamos a <img src="" />, y entre las comillas pegamos la dirección url.
EJEMPLO.
<img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/iacad83da5d6aec96/1305048448/std/image.gif" />
Este código nos centra la imagen a la derecha ( center).
Si lo quieres a la izquierda o a la derecha puedes cambiarlo pero siempre con la palabra en ingles ( left o right).
Y ya tenemos un bonito y original código de cargando la pagina.
Este es un tema del que hablo en diferentes paginas de mi web, doy por hecho que todo el mundo sabe que no se copia la url una imagen directamente de ninguna web, o blog que no sea la tuya.
Tambien explicar, que si se copia el contenido de una pagina web o blog( sin consentimiento de su autor),, para ponerlo en la suya, se considera Plagio, se deben hacer los temas a nuestra manera y aprender del trabajo que nos ofrecen los demas, para asi disfrutar del nuestro
Fallo mio pensar eso ya que quizás much@s no sepáis que NO SE COPIA , ni la url de las imagenes de otros siios en la red, ni el contenido de sus paginas
Vamos paso a paso para saber como utilizar una imagen
Hay paginas que ofrecen imagenes o gif gratuitos, y a ti te interesa uno para ponerlo en la tuya.
Lo que hacemos
- Botón derecho del ratón sobre la imagen.
- Guardar imagen en tu PC.
- Subir a tu pagina, o alojarla en un host de imagenes gratuito ( te da la url de la imagen).
- Ya puedes saber la direccion url de la imagen como os explico a continuación.
- Como todo lo que se baja de la red, revisar por si tiene virus
- Recordar que no se copia la url de la imagen de ninguna web o blog.....
La url de la imagen para que todos me entendeis es como si fuera un nombre propio , cada imagen tiene uno, y para los codigos que queramos que aparezca una imagen siempre nos pediran la identidad de esta, es su manera de identificarla
Aunque ya lo he explicado en muchas ocasiones, se que algunos teneis dificultad en saber y encontrar la url de una imagen para poner en los codigos, como cada navegador tiene una opcion diferente os unos cuantos y asi os sera super sencillo poner la url de la imagen
- Con Internet Explorer. Botón derecho del ratón sobre la imagen, nos abrirá un cuadro en el que al final veremos propiedades, bueno pues esa es la url de la imagen que se copia y pega en el lugar del código que te solicitó una url de imagen.
- Con Google Chrome.Al hacer click con el ratón sobre la imagen, veremos como un cuadrito ( menú contextual) y pone copiar la url de la imagen.
- Con Safari puedes copiar enlace.
- Con Mozilla es copiar ruta de imagen
COSAS INTERESANTES PARA TU WEB |
Vamos a aprender a modificar este codigo a nuestro gusto y nos quedara algo mas original y bonito, que es de lo que se trata.
Asi que vamos a hacer de un simple codigo, uno algo mas complejo y vistoso.
Os ponder tambien el codigo para que al pinchar en la cajita nos lleva a otra pagina o a otra web
<table width="000" border="1" bgcolor="#FFCCFF">
<tr>
<td>
COSAS INTERESANTES PARA TU WEB
</td>
</tr>
</table>
Ahora voy a modificar el codigo de manera que se quede a mi gusto, no solo voy a cambiar el texto y el color, sino que voy a añadirle mas cajitas con texto para eso hago lo siguiente.
Copio el codigo original y lo pego debajo del que acabo de poner, y le modifico el texto el color y esta vez tambien el tamaño.
<table width="000" border="1" bgcolor="#FFCCFF">
<tr>
<td>
COSAS INTERESANTES PARA TU WEB
</td>
</tr>
</table>
<table width="400" border="1" bgcolor="#FFCC33">
<tr>
<td>
TRUCOS, PROGRAMAS, CODIGOS, AYUDA ON-LINE...
</td>
</tr>
</table>
Podemos añadir todas las lineas que queramos, y cambiar el tamaño el texto y el color.
Pero ¿por que no hacemos que en algunas cajitas el texto aparezca en movimiento....?
Vamos a ello.
Para los que leis mi web habitualmente ya sabeis como se pone un codigo con texto en movimiento, es tan sencilo como poner el texto dentro de las etiquetas <marquee></marquee>, que es lo que voy a hacer ahora con el texto de el codigo, al que quiero que se mueva le pongo delante y detras( de mi texto) <marquee>.
<marquee>DALE AL BOTON DE ME GUSTA, ME ANIMA A CONTINUAR TRABAJANDO, PARA MEJORAR NUESTRAS WEB</marquee>
Acuerdate que todo el texto que metas entre esas etiquetas saldra en movimiento.
Asi el resultado final de mi codigo seria este..
TRUCOS, PROGRAMAS, CODIGOS, AYUDA ON-LINE... |
PARTICIPA EN MI WEB PARA OBTENER TU BANNER O FONDO PERSONIFICADO |
|
<table width="200" border="1" bgcolor="#FFCCFF">
<tr>
<td>
<marquee>PARTICIPA EN MI WEB</marquee>
</td>
</tr>
</table>
<table width="400" border="1" bgcolor="#FFCC33">
<tr>
<td>
TRUCOS, PROGRAMAS, CODIGOS, AYUDA ON-LINE...
</td>
</tr>
</table>
<table width="600" border="1" bgcolor="#99CC33">
<tr>
<td>
PARTICIPA EN MI WEB PARA OBTENER TU BANNER O FONDO PERSONIFICADO
</td>
</tr>
</table>
<table width="800" border="1" bgcolor="#CEE3F6">
<tr>
<td>
<marquee>DALE AL BOTON DE ME GUSTA, ME ANIMA A CONTINUAR TRABAJANDO, PARA MEJORAR NUESTRAS WEB</marquee>
</td>
</tr>
</table>
<table width="400" border="1" bgcolor="#CC99FF">
<tr>
<td>
GRACIAS POR TU VISITA
</td>
</tr>
</table>
Ahora le vamos a añadir un enlace, para hacer que al pinchar en la cajita, podamos desplazarmos a doferentes paginas, vamos a ello
Vamos a añadir una linea al codigo que nos haga crear un enlace.
<a href="AQUI LA URL DE LA IMAGEN"></a>
Las direcciones url empiezan con http:// y luego el nombre de la pagina, se pueden ver en la parte de arriba del navegador, en tu web Jimdo debes copiarla cuando estes en Vista Previa o con la sesion cerrada, si la copias y la pegas cuando estas editando la web los enlaces no funcionaran.
CODIGO DE CAJITA CON ENLACE
<table width="170" border="1" bgcolor="#FFCC33">
<tr>
<td>
<a href="Aqui la url de la pagina"><marquee>AQUI EL TITULO</marquee></a>
</td>
</tr>
</table>
Ahora ya es cosa vuestra ser mas o menos creativos ya que como veis tiene muchas posibilidades.....
Como todo lo que aqui pongo espero que os guste
IMAGEN QUE UTILIZO PARA EL CODIGO
Hoy os voy a enseñar como hacer un código para que aparezcan imagenes decorando nuestra pagina.
- Lo primero que hacemos es seleccionar la imagen que vamos a poner en el código yo he elegido una de unos ojos rojos.
- Como ya os he explicado muchas veces, para saber la dirección URL de una foto tiene que estar on-line.
- Es decir tiene que estar publicada en internet, si es una foto propia la subimos a nuestra web y si no la alojamos en un hosting de imagenes ( jimdo hace poco nos ofrecía uno se llama Dropbox), te da la opción de hospedar la foto al subir una imagen.
- Una vez la foto en linea, ponemos el ratón encima le damos al lado derecho y te aparece la dirección URL de la foto.
Dicho esto vamos al código
Vamos a poner todo el contenido del código entre el atributo div ' asi que el código es
<div style="text-align: center;">
<a href="" style="center: 0px; position: fixed; top: 0px;"><img src="" alt=
"" /></a>
</div>
Aqui lo que he puesto es el estilo del código, su tamaño, su posición, pues vamos a completarlo juntos.
img src="" alt( entre las comillas no hay nada y hay tenemos que poner la dirección url de la foto o gif que ya tengamos decida en mi caso es esta.
http://u.jimdo.com/www30/o/sd503c4244c1edaa9/img/i8f8eee6f1b8fb780/1308235790/std/image.gif
Y así me quedaría el código
<div style="text-align: center;">
<a href="" style="center: 0px; position: fixed; top: 0px;"><img src="http://u.jimdo.com/www30/o/sd503c4244c1edaa9/img/i8f8eee6f1b8fb780/1308235790/std/image.gif" alt=
"" /></a>
</div>
Vale, ahora vamos a darle en enlace a nuestro código, como lo hacemos????, pues muy sencillo pones la dirección url de tu web a la dirección que quieras que vayan cuando pinchen en la imagen
La mía es http://meriyo.jimdo.com/, así que esto lo tengo que poner a href="" style ( dentro de las comillas).
Así el codigo completo
<div style="text-align: center;">
<a href="http://meriyo.jimdo.com/" style="center: 0px; position: fixed; top: 0px;"><img src="http://u.jimdo.com/www30/o/sd503c4244c1edaa9/img/i8f8eee6f1b8fb780/1308235790/std/image.gif" alt=
"" /></a>
</div>
Pero no os parece un poco sencillo?????.
Vamos a hacerlo diferente y mas original.Ahora voy a cambiar la posición y el tamaño
<div style="text-align: left;">
<a href="http://meriyo.jimdo.com/" style="left: 0px; position: fixed; top: 0px;"><img src="http://u.jimdo.com/www30/o/sd503c4244c1edaa9/img/i8f8eee6f1b8fb780/1308235790/std/image.gif" alt=
"" /></a>
</div>
Una mas
<div style="text-align: right;">
<a href="http://meriyo.jimdo.com/" style="right: 50px; position: fixed; top: 50px;"><img src="http://u.jimdo.com/www30/o/sd503c4244c1edaa9/img/i8f8eee6f1b8fb780/1308235790/std/image.gif" alt=
"" /></a>
</div>
Puedes repetir esta accion todas las veces que quieras que aparezca la imagen, y en un mismo codigo puedes poner diferentes imagenes
<div style="text-align: left;">
<a href="http://meriyo.jimdo.com/" style="left: 0px; position: fixed; top: 0px;"><img src="http://u.jimdo.com/www30/o/sd503c4244c1edaa9/img/i8f8eee6f1b8fb780/1308235790/std/image.gif" alt=
"" /></a>
</div>
<div style="text-align: right;">
<a href="http://meriyo.jimdo.com/" style="right: 50px; position: fixed; top: 50px;"><img src="http://u.jimdo.com/www30/o/sd503c4244c1edaa9/img/i8f8eee6f1b8fb780/1308235790/std/image.gif" alt=
"" /></a>
</div>
Ya os he explicado como hacer un sencillo codigo de texto en moviniento utilizando la etiqueta <marquee </marquee>.
Bueno pues hoy vamos a darle un poco de color a nuestro texto, lo que voy ha hacer es añadir un par de etiquetas mas al codigo para darle un aspecto diferente.
<marquee scrolldelay="700" scrollamount="400">
<font color="red"><b>Texto en forma de blink</b></font>
</marquee>
Lo que he hecho es cambiarle el movimiento y el color añadiendo lo que esta en rojo, asi quedaria de esta manera.
Ahora solo es modificar el movimiento y el color, asi se puede poner como mejor nos quede en nuestra web, os enseño como queda el codigo modificado y no olvideis que el nombre de los colores tienen que ponerse en ingles.
<marquee scrolldelay="900" scrollamount="700"><font color="black"><b>GRACIAS POR VISITAR MI WEB</b></font></marquee>
Sin salirmos de la ETIQUETA marquee, vamos a cambiar un poco el codigo.
<marquee behavior="" direction="down" scrollamount="1" height="10"><font color="magenta">HOLA A TOD@S LOS QUE VEIS MI WEB</font></marquee>
Lo que he hecho es añadir la posicion del texto, si queremos que vaya en otra posicion , solo debemos modificar esto (down), por la posicion que nos interes por ejemplo arriba seria ( up) y cambiar su movimiento y su color. y ahora lo que voy a hacer es cambiarle el efecto a texto parpadenate solo modificando eso (scrollamount="1), cuanto mas aumentes el munero mas rapido ira el texto
<marquee behavior="" direction="up" scrollamount="6" height="20"><font color="blue">aqui tu texto</font></marquee>
Los que tenemos una web Jimdo tenemos la suerte de poder subir imagenes solo con el menu de edicion, al igual que poner enlaces, subir textos o elementos en flash.
Eso en mi caso que yo uso Jimdo como servidor de mi web, nos hace un poco comodones y muchas veces nos quedamos con las opciones que nos da la pagina.
Pero si yo quiero una imagen propia que enlace en mi web, y si quiero un texto diferente para mis titulos, y si quiero un enlace en mi titulo, y si y si......,
Voy a hacer algo diferente con mi web y para eso lo primero que tengo que saber es como hago una imagen en html.
<img src="URL DE LA FOTO" alt="" />
Ese es el codigo, an sencillo y facil como esto, acordaos que cuando en un codigo veias img ( es la etiqueta para la imagen), un poquito mas adelante cuando ya sepamos hacer codigos sencillos os explicare los atributos basicos para darles estilos diferentes a las imagenes en HTML.
Asi que ahora vamos con algo sencillito.
Pongo la foto en html
<a href="Url de donde quieras enlazar la foto/"></a>
Ya solo nos queda unir los dos codigos y tendremos una imagen enlazada con un codigo html, que podemos dejar visible en nuestra web para que nos enlacen, si pinchas en la foto veras que te lleva a otra web
<a href="URL DE LA WEB"><img src="URL DE LA IMAGEM" alt="" /></a>
Con un poquito de imaginacion y tiempo podemos hacer cosas muy vistosas para que otras web, presenten nuestra pagina, daros cuenta que cuanto mas nivel adquiramos para nuestro sitio, mas nos pediran enlazarmos desde web con mucho trafico.
<a href="URL DEL ENLCE"><img src="URL DE LA FOTO" alt="" /></a>
EL CODIGO DE MI BANNER ES ESTE:
<script src="http://h1.flashvortex.com/display.php?id=2_1337115093_48901_774_18719_728_90_10_1_14" type="text/javascript"></script>
<a href="http://www.meriyo.jimdo.com" target="_blank"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i80ad7d6a5d504f60/1337088555/std/http-meriyo-jimdo-com-mas-cosas.gif" alt="" /> Seguir a Meriyo</a>
Podemos ponerlo dentro de una cajita y solo se tendra que copiar el codigo que hay dentro de ella, y asi ya nos pueden enlazar
<span id="Caja1" class="Caja1"><a href="AQUI LA URL DEL ENLACE" target="_blank"><img src="AQUI LA URL DE LA IMAGEN" border="0"alt="" /></a><br /></span>
<textarea onclick="<p> <span class=" style="display: inline! important; float: none; word-spacing: 0px; font: 12px/18px Arial, Helvetica, sans-serif; text-transform: none; color: #000000; text-indent: 0px; white-space: normal; letter-spacing: normal; orphans: 2; widows: 2;">
Si queremos añadirle texto, y mas de una image al codigo teneis que ir a la pagina de esta web
Me encantaria que me mandarais algun codigo hecho por vosotros
Algunas veces , cuando piensas en algo que te gustaría hacer para tu web, y no encuentras la manera y la explicaciones que vemos ( no es que estén mal), pero al no saber mucho, no nos enteramos de NA de NA, es ahí cuando dices, " lo voy a hacer yo", y vas a por uvas y te coges manzanas, pues esta es la historia de este código, que no esta hecho para este fin, pero como no me salia lo que quería hacer, pensé....., pero mira que chulo queda así......Después del rollo, el código
<a href='http://meriyo.jimdo.com/trucos-y-truquitos/'><img border='0' src='http://i43.tinypic.com/2u9k6r4.gif' style='position:fixed; top:0; right:20;' title='Besitos' alt="" /></a><a href='http://meriyo.jimdo.com/trucos-y-truquitos/'><img border='0' src='http://i43.tinypic.com/2u9k6r4.gif' style='position:fixed; bottom:0; right:20;' title='MUAA' alt="" /></a>
Este código lo vamos a utilizar para poner imagenes que nos acompañen toda la pagina, tanto a derecha como a izquierda, y tanto arriba como abajo, lo único que tenéis que hacer es poner la dirección url de la imagen( es lo que he puesto en rojo), que queréis que aparezca ( OJO LAS WEB DE JIMDO, de poner una imagen demasiado grande , que tape el inicio de sesión)..Podéis cambiar el texto y el enlace(es lo que esta en azul) por el vuestro, y ya tendrias el código listo para poner en tu web.Ahora ya dejo como siempre a vuestra imaginacion el sacarle el máximo partido a este código y os pongo el código entero de los ñukis besitos, para que aparezcan a los cuatro lados de tu pagina
Que os guste chic@s y si es asi hablar bien de mi web......
<a href='http://meriyo.jimdo.com/trucos-y-truquitos/'><img border='0' src='http://i43.tinypic.com/2u9k6r4.gif' style='position:fixed; bottom:0; right:0;' title='MUAA' alt="" /></a><a href='http://meriyo.jimdo.com/trucos-y-truquitos/'><img border='0' src='http://i43.tinypic.com/2u9k6r4.gif' style='position:fixed; top:0; right:0;' title='Besitos' alt="" /></a>
<a href='http://meriyo.jimdo.com/trucos-y-truquitos/'><img border='0' src='http://i43.tinypic.com/2u9k6r4.gif' style='position:fixed; bottom:0; right:0;' title='MUAA' alt="" /></a><a href='http://meriyo.jimdo.com/trucos-y-truquitos/'><img border='0' src='http://i43.tinypic.com/2u9k6r4.gif' style='position:fixed; top:0; right:0;' title='Besitos' alt="" /></a>
<a href='http://meriyo.jimdo.com/trucos-y-truquitos/'><img border='0' src='http://i43.tinypic.com/2u9k6r4.gif' style='position:fixed; top:0; right:20;' title='Besitos' alt="" /></a><a href='http://meriyo.jimdo.com/trucos-y-truquitos/'><img border='0' src='http://i43.tinypic.com/2u9k6r4.gif' style='position:fixed; bottom:0; right:20;' title='MUAA' alt="" /></a>
Hace poco me preguntabais , como se cambia el tamaño de una imagen y hoy que tengo un ratito os lo voy a explicar, que como todas las cosas que pongo en esta web es muy facil de hacer
Lo primero que debeis recordar es que la imagen tiene que estar on-line, para que podais saber su url ( ya os he contado un poquito mas arriba de esta misma pagina como saberlo.
Una vez elegida la foto vamos a usar este codigo, que nos servira tanto para hacer una imagen mas grande, o mas pequeña, segun nos interese
<img src="AQUI LA URL DE LA IMAGEN" width="AQUI EN NUMEROS EL ANCHO DE LA IMAGEN" height="AQUI EN NUMEROS EL ALTO DE LA IMAGEN" alt="" />
<img src="Aqui la url de la imagen" width="800" height="240" alt="" />
Si te gusta esta imagen para el codigo la puedes encontrar AQUI
Mi ya amigo, Juan Carlos que tiene una web Jimdo en la que esta trabajando mucho (http://iglesiadedioshaina.jimdo.com/) y además es super buena gente.
Me ha preguntado como pone imagenes en html en movimiento, así que lo voy a explicar para que sea fácil hacerlo.
Ya sabemos como poner una imagen en html, ya sabemos hacer un banner con imagenes en movimiento y ponerlo con enlace a donde queremos, también sabemos como darle movimiento a un texto, así que esto es tan sencillo como , poner nuestras ya conocidas etiquetas
.<marquee></marquee>
Y entre ellas vamos a poner el código html de la imagen que queramos poner, yo para el ejemplo voy a utilizar esta que esta en gif
<img src="Url de la imagen" alt="" />
Si os gusta el codigo con esta imagen. os dejo el link donde podeis encontrarla para ponerla en el codigo
AQUI
<marquee><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i8beb795308ab9de5/1311163294/thumb/image.gif" alt="" /></marquee>
Siempre sin salirmos de la etiqueta que estamos utilizando, añadimos el texo que queramos que aparezca en moviento en la foto, le damos otro movimiento( rigth) a la imagen y algo de velocidad
<marquee direction="RIGHT" scrollamount="8"><img src="aqui la url de la imagen" alt="" />TU TEXTO AQUI</marquee>
Si te gusta la imagen de este codigo la tienes AQUI
Para cambiar el texto que aparece en la imagen, podemos añadirle las etiquetas correspondientes, en la seccion de como hago, modifico y edito mi plantilla, podeis ver la cantidad de cosas que podemos hacer con el texto.
Ahora os dejo un ejemplo, juntando varias etiquetas marquee y cambiando el texto
<!-- Inicio enlace meriyo.jimdo.com --><marquee direction="RIGHT"><img src="http://u.jimdo.com/www7/o/s9ef11cd6999540f3/img/i19cc132fbf22155a/1337262168/std/image.gif" alt="" /></marquee><h1> <marquee hspace="50" vspace="30"><a href="http://meriyo.jimdo.com/codigos/codigos-divertidos/" target="_blank"><img src= "http://u.jimdo.com/www7/o/s9ef11cd6999540f3/img/iac06d873a0e56a1f/1337262533/std/http-meriyo-jimdo-com-codigos-codigos-divertidos.gif" alt="" /></a><strong><a href= "http://meriyo.jimdo.com/codigos/codigos-divertidos/" target="_red">Sorpresa!!!!</a></strong></marquee></h1><!-- Final enlace meriyo.jimdo.com -->
meriyo.jimdo.com
Un aminagif es una buena , divertida y muy poco pesada en cargar para poner en el encabezado( SE SUBE AL ENCABEZADO DE LAS WEB JIMDO COMO IMAGEN PROPIA), de nuestras paginas, a veces nos complicando subiendo archivos demasiado pesados cuando con un archivo de imagen podemos hacer algo deferente.
Ya os explique en otra de mis paginas como hacerlo, si no lo recuerdas Pincha AQUI, y si quieres banners y encabezados gratis para tu pagina entonce toca pinchar AQUI
Os voy a dejar un sencillo y efectivo codigo para saber cuantas personas estan on.line en cada pagina de tu web.
Solo tienes que copiar y pegar el codigo que os dejo a continuacion al final ( o donde quieras), de cada pagina diferente de tu web.
Podeis encontrar este y mas en esta pagina
<script>var _wau = _wau || []; _wau.push(["tab", "5s91fryulwbl", "v80", "left-middle"]);(function() { var s=document.createElement("script"); s.async=true; s.src="http://widgets.amung.us/tab.js";document.getElementsByTagName("head")[0].appendChild(s);})();</script>
Seguro que ya lo habreis visto porque este codigo es facil de encontar, pero que significa y como lo amoldo a mis necesidades, siempre que veais el termino backgrounddebemos saber que es el atributo que se utiliza en HTML, para establecer la imagen de fondo ya que dicho atributo, indicaremos la ruta donde esta el archivo (URL)
Aqui voy a dejar uno de estos truquillos que tanto me gustan ya que permite hacer cosas diferentes con mi web.
Anibal, me pregunto ayer como habia hecho una imagen de fondo de mi web interactiva ( podeis ver el ejemplo aqui )y yo os lo voy a explicar a todos , pero con especial cariño a el que desde casi el principio de esta web me ha apoyado con sus comentarios.)
Asi que como dicen los toreros.....
Va por usted
<style type="text/css">
/*<![CDATA[*/
<!--
.body {background-image: url(http://jpg); }
-->
/*]]>*/
</style>
Algunas veces tendemos a copiar y pegar códigos, whigets, etc etc, que encontramos por internet y que no conocemos. Al ponerlos en nuestra web, y luego querer borrarlos nos resulta imposible, unos porque son muy grandes y nos tapan el elemento BORRAR, y otras muchas veces porque son muy malos de borrar. Lo que tenemos que hacer es abrir el cuadro donde pegamos el código, seleccionarlo todo el texto de dicho codigo con el ratón y una vez todo seleccionado,lo borras y le damos a guardar ya con el cuadro vació, automaticamente aparecerá la opción de borrar. Otra opción es borrar el código de la misma manera y pegar uno que ya haya sido comprobado por nosotros, al darle a guardar ya nos saldrá el nuevo elemento
<a style="cursor: help">AQUI EL TEXTO QUE DESEES QUE TENGA ESTE EFECTO</a>
Para personalizar el codigo de subir pagina, lo unico que hacemos es cambiar lo que os voy a marcar en rojo en el codigo .
Si quereis mas codigos ya hechos de subir pagina PINCHAR AQUI
Codigo
<a href='#' title='SUBIR'><img src='Url de la imagen' border='0' alt="" /></a><p> SUBIR</p>.
El texto de subir que os he marcado en rojo dentro del codigo, es el que podemos cambiar por el que mas nos guste( Ir arriba, Subir pagina....)
Ademas con la etiquetas marquee, que os he enseñado podeis darle movimiento al titulo,
<a href='#' title='Ir arriba'><img src='http://u.jimdo.com/www43/o/s80bbe8d6265e2374/img/iaf6233296762621f/1336780295/std/http-meriyo-jimdo-com-trucos-y-truquitos.gif' border='0' alt="" /></a>
<a href='#' title='Ir arriba'><img src='http://u.jimdo.com/www43/o/s80bbe8d6265e2374/img/i63f108a27180bfec/1336780311/std/http-meriyo-jimdo-com-trucos-y-truquitos.gif' border='0' alt="" /></a>
<div style="img-align: center;"> <a href="#"><img src="http://u.jimdo.com/www43/o/s80bbe8d6265e2374/img/i8437695dbe3486e0/1336780318/std/http-meriyo-jimdo-com-trucos-y-truquitos.gif" alt="blue" /></a></div>
<a href='#' title='Ir arriba'><img src='http://u.jimdo.com/www43/o/s80bbe8d6265e2374/img/ibe2d802ceabe7b39/1336780654/std/http-meriyo-jimdo-com-trucos-y-truquitos.gif' border='0' alt="" /></a>
En mas de una ocasión me habéis pedido algún código de corazones cayendo por la web, o de nieve, de estrellas y he puesto en cada apartado el código correspondiente, ahora Angela que tiene un blog muy bonito, me ha pedido un código de lluvia cayendo por la web.Así que como me parece un tema interesante voy a explicar de que manera hacemos para que caigan objetos por la web.
Lo que voy a poner a continuación es el código que usaremos y como ir modificando a nuestro gusto, es un código que empieza y acaba( como casi todo que tenga movimiento en html) con la etiqueta <marquee> </marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 100px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;"></span></marquee>
Añadiendo las etiquetas necesarias para crear un objeto que caiga ( down), en la posición que yo decida, y que su caída y tamaño por la web tenga x sección de caída (px) y x tamaño (width y heigt) hasta que lugar de la web quiero que baje el objeto), definiendo la velocidad de bajada y el color del objeto
Vamos a probar ahora el código añadiéndole un unicode, resumiendo ( un unicode es un símbolo para añadir a nuestro código determinados caracteres o iconos, ).
Por ejemplo os voy a poner el del efecto de nieve, es solo el unicode ya que para darle el efecto de nieve tendríamos que darle el color blanco
*
<span style="color: #FF0000">*</span> <span style="color: #FF00FF">*</span>
* *
Unicode de Cozazon, estrella, musica, diamantes, treboles
♥ ★♣ ♦ ♫
Para ponerlos en tu código solo tienes que copiarlos y pegarlos en el lugar correspondiente que ahora os indicare.
Podéis encontrar mas en ; http://www.okelmann.com/homepage/unicode.htm
<marquee behavior="scroll" direction="down" style="position: absolute; left: 100px; top: 0px; width: 36px; height: 700px;" scrollamount="15"><span style="color: #FF0000">♥</span></marquee>
Esta seria la primera linea, así que añadiendo, lineas como esta al código, cambiándole posición, velocidad, color y unicode, hemos hecho el primer código con unicodes de cayendo objetos por la web.
AÑADE unas cuantas lineas mas, con unicodes diferentes , diferentes colores, velocidad etc... Y LISTO
Si quieres como en este caso Angeles, hacer un efecto de lluvia, deberemos modificar el código para poder añadir gotas de lluvia.
Yo voy a hacer el ejemplo con unas mariposas
.Lo que hago es cambiar el lugar donde ponía el unicode ponerle la imagen que yo decida.
Así que añado esto al código<img src="AQUI URL DE LA IMAGEN SELECCIONADA" alt="" />
CAMBIO SU TAMAÑO POSICION ETC ETC Y ASI ME QUEDARIA EL CODIGO
Recuerda que ienes que cambiar, velocidad, posicion, anchura y altura como os he explicado antes.
Os he marcado en rojo los valores numericos que debeis cambiar.
Si os resulta muy complicado o latoso de hacer...... Os he preparado AQUI, un monton de codigos nuevos
<marquee behavior="scroll" direction="down" style="position: absolute; left: 100px; top: 200px; width: 616px; height: 700px;" scrollamount="5"><span style="color: #FF0000"><img src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i194b470e00022ea3/1302967049/thumb/image.gif" alt="" /></span></marquee>
VER CODIGO COMPLETO
A mi es un efecto que me gusta mucho ya que podemos hacer que caigan diferentes imagenes a la vez,e incluso texto, así que empezar a hacer cosas divertidas y porque no originales para nuestras web y blog.
VER EFECTO DE CORAZONES CAYENDO POR LA WEB
Para obtener este efecto solo tenéis que quitar la imagen o el unicode y añadirle el texto que queráis.