¿Quieres escuchar musica mientras lees esta 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
CODIGO PERSONALIZADO DE CARGAR LA PAGINA
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.
CODIGO HTML
<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>
//<![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>
Añadele una foto grande y divertida y te hara un efecto de pagina que desaparece
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.
Poner una imagen en linea para saber la url
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
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.....
Como se la url de la imagen en los diferentes navegadores
¿ que es la url de una imagen?
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
Texto dentro de cajitas de colores
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>
<tr>
<td>
COSAS INTERESANTES PARA TU WEB
</td>
</tr>
</table>
Primer paso
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.
<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>
Segundo paso
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..
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..
Resultado final
PARTICIPA EN MI WEB |
TRUCOS, PROGRAMAS, CODIGOS, AYUDA ON-LINE... |
PARTICIPA EN MI WEB PARA OBTENER TU BANNER O FONDO PERSONIFICADO |
DALE AL BOTON DE ME GUSTA, ME ANIMA A CONTINUAR TRABAJANDO, PARA MEJORAR NUESTRAS WEB |
GRACIAS POR TU VISITA |
Codigo
<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>
<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>
<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.
<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
Como hago un codigo personalizado para decorar mi pagina
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;">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
<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
SI QUIERES MAS GIF DE OJITOS, O
GIF DIVERTIDOS, OS DEJO AQUI, UNOS CUANTOS, YA SABEIS COMO SE UTILIZAN
CORRECTAMENTAMENTE ASI QUE A
DISFRUTARLOS...
Asi quedaria el codigo completo CON UN OJITO A CADA LADO
<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>
Texto en movimiento con color personalizado
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.
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.
GRACIAS POR VISITAR MI WEB
AHORA LO PERSONALIZAMOS COMO MAS NOS GUSTE
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>
GRACIAS POR VISITAR MI WEB
Vale, esta bien...pero yo quiero un texto que ademas suba o baje y ponerle el color
HOLA A TOD@S LOS QUE VEIS MI WEB
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="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
Asi quedaria el codigo
<marquee behavior="" direction="up" scrollamount="6"
height="20"><font color="blue">aqui tu
texto</font></marquee>
MERIYO
Como hago una foto con enlace en html
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.
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
Ahora creamos un enlace 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
Codigo entero
<a href="URL DE LA WEB"><img src="URL DE LA IMAGEM" alt="" /></a>
Sirve para publicitar nuestras web, que nos enlacen, vale para todo tipo de archivos de imagen, jpg, gif y png, y lo mas importante es que lo hacemos a nuestro gusto
CODIGO ENLACEN MI WEB
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.
Codigo
<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>
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>
Si te apetece seguir mi web copia y pega este codigo
<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>
AHORA DENTRO DE UNA CAJITA
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
Codigo
<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;">
<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
Como alinear varias imagenes en una sola
Me encantaria que me mandarais algun codigo hecho por vosotrosTruco cuatro imagenes a diferentes lados de tu web
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
Codigo de dos imagenes de ñukis al aldo izquierdo 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; 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>
Modificar el codigo
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......
Codigo de dos imagenes de ñukis al lado derecho 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>
Codigo de cuatro imagenes de ñukis en cuatro lados 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; 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>
Como cambio el tamaño a una imagen
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
Codigo para cambiar de tamaño una imagen
<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="" />
Codigo del ejemplo que os pongo
<img src="Aqui la url de la imagen" width="800" height="240" alt="" />
PARA ENCONTAR IMAGENES PARA PONER EN LOS CODIGOS, PODEIS IR AQUI
Imagenes en movimiento en html
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
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
Codigo de imagen fija
<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
Ahora el codigo de foto lo ponemos entre las etiquetas marquee
CODIGO
<marquee><img
src="http://u.jimdo.com/www20/o/s9b8e7b427c6eadc9/img/i8beb795308ab9de5/1311163294/thumb/image.gif"
alt="" /></marquee>
Ahora con texto
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
Codigo
<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
Si te gusta la imagen de este codigo la tienes AQUI
Cambiar el texto que aparece en la foto
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
Ahora os dejo un ejemplo, juntando varias etiquetas marquee y cambiando el texto
Codigo
<!-- 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 -->
Esto es un animagif : CLICK a la imagen y veras mas TRUCOS PARA TU PAGINA
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
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
¿Como se cuantas personas hay on-line en cada pagina de mi web?
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.
CODIGO
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>
Poner un fondo interactivo o que cambie en mi web
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 background debemos
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)
Vamos a darle movimiento a este codigo
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.....
Codigo para cambiar el fondo de mi web
<style type="text/css">
/*<![CDATA[*/
<!--
.body {background-image: url(http://jpg); }
-->
/*]]>*/
</style>
/*<![CDATA[*/
<!--
.body {background-image: url(http://jpg); }
-->
/*]]>*/
</style>
Efecto texto que solo aparece al pasar el raton
Pasa el raton por este texto PARA VER SU EFECTO
CODIGO
<a style="cursor: help">AQUI EL TEXTO QUE DESEES QUE TENGA ESTE EFECTO</a>
Personalizar el Codigo de subir pagina
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,
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,
Aqui os dejo unos codigos que he hecho con mucho afecto para vosotros que tanto apoyais esta web
Como hago un codigo de objetos cayendo por mi web
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>
Codigo que voy a utilizar
<marquee behavior="scroll" direction="down" style="position:
absolute; left: 100px; top: 0px; width: 16px; height: 700px;"
scrollamount="5"><span style="color:
#fff;"></span></marquee>
Explicacion facilita del codigo de objetos cayendo por la pagina
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
*
Ahora le voy a cambiar el color
<span style="color: #FF0000">*</span> <span style="color: #FF00FF">*</span>
* *
Os dejo unos unicodes para que vayais probando con ellos
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
Podéis encontrar mas en ; http://www.okelmann.com/homepage/unicode.htm
Os pongo el ejemplo del codigo con unicode de corazon
<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
Y ahora podeis pensar
VALE, MUY BIEN PERO YO QUIERO UNA IMAGEN PARA UN EFECTO CONCRETO
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
Codigo de mariposas de colores volando por la pagina
ESTA ES SOLO UNA LINEA DEL CODIGO AÑADE TODAS LAS QUE QUIERAS
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 lo dejo entero, mas abajo
<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>
Os he marcado en rojo los valores numericos que debeis cambiar.
Si os resulta muy complicado o latoso de hacer......
Os lo dejo entero, mas abajo
<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>
Codigo de imagen que saluda o da la bienvenida
Os dejo un codigo quea mi me resulta divertido y original, para saludar a tus visitantes
Recordar que podeis cambiarlo y modificarlo como mas os guste
Codigo
<div style="text-align: right;"> <a
href="http://meriyo.jimdo.com/" style="right: 50px; position: fixed;
top: 50px;"><img
src="http://u.jimdo.com/www43/o/s9ba2a343a6498106/img/i2a014d2aa2930a88/1336931426/std/image.gif"
alt= "" /></a></div>
Podeis ver mas codigos divertidos AQUI
Read more: http://meriyo.jimdo.com/trucos-y-truquitos/#ixzz2AROIJFNr
No hay comentarios:
Publicar un comentario