1.- Cómo poner un menú desplegable en tu página

Para disponerlas dentro de un menú desplegable, debemos elegir, en primer lugar el lugar de nuestra página donde deseamos incluirlo (te recomendamos, por su visibilidad, la esquina superior derecha). Una vez hecho esto, pega allí el siguiente código HTML EN WIDGED/HTLM QUE TE MUESTRO EN LA IMAGEN , PEGAS ESTE CODIGO:

 

<form>
<SELECT NAME="urldestino">
<option selected>--- M E N U ---
<option value="inicio.html" >Inicio
<option value="seccion1.html">Album de fotos
<option value="seccion2.html">Textos interesantes
<option value="seccion3.html">Noticias
<option value="seccion4.html">Novedades
<option value="seccion5.html">Mi diario
</SELECT>
<input type="button" value="IR" onClick="location=this.form.urldestino.value" name="button">
</form>

 

OK - EL RESULTADO SERIA EL SIGUIENTE ....

CÓMO HACER DE TU WEB LA PÁGINA DE INICIO DE TUS USUARIOS


Se entiende por página de inicio aquella que, por defecto, está establecida en el navegador (Explorer, Netscape, etc...) como la primera que se carga en el mismo al conectarse el usuario a Internet.

La importancia de que un usuario elija tu web como su página de inicio es digna de ser tenida en cuenta ya que eso te garantiza un buen número de visitas extra. Además, al ser una página que verá cada vez que se conecte, en primer lugar, las posibilidades de que se decida a navegar por tu site son elevadas (sobre todo, si haces actualizaciones frecuentes en tu página).

Cómo conseguirlo
Si quieres que un usuario configure su navegador para que la tuya sea su página de inicio, pónselo fácil: coloca en tu página un link que realice esa función para que el usuario sólo tenga que pulsar sobre él.

Para ello basta con que emplees este código:

 

<a href="http://www.TheVixar.jimdo.com" class="chlnk" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.TheVixar.jimdo.com');" style="cursor: hand">Haz de esta web tu página de inicio</a>

 

Las modificaciones que debes realizar en el código para que funcione correctamente en tu web son las siguientes:

1.- Sustituye la parte del código de color verde (http://www.TheVixar.jimdo.com) por la URL de la página que quieres que se descargue en el navegador del usuario cuando pulse el enlace (te recomendamos que sea la dirección de tu propia página)
2.- En la parte de color magenta (http://www.TheVixar.jimdo.com) escribe la dirección de tu página.
3.- En la parte de color rojo (Haz de esta web tu página de inicio) escribe el texto que desees (es el que leerá el usuario en el link) o déjalo tal y como está. Te recuerdo que también puedes sustituirlo por una imagen, si lo deseas.

HAZ QUE TUS USUARIOS INCLUYAN TU PÁGINA EN "FAVORITOS"

copia este codigo y pegalo en un nuevo widget/HTMl

 

<a href="javascript:window.external.AddFavorite('http://www.sitio.com','Titulo del sitio');">Añadir esta página a mis favoritos</a>

CÓMO INSERTAR UN RELOJ DIGITAL

CÓDIGO A COPIAR:

<form name="Tick">
<input type="text" size="11" name="Clock">
</form>
<script>
<!--
/*By George Chiang (WA's JavaScript tutorial)Credit must stay intact for use*/
function show(){
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="AM" 
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
document.Tick.Clock.value=hours+":"+minutes+":"
+seconds+" "+dn
setTimeout("show()",1000)
}
show()
//-->
</script>

----------------------------------------------

reloj sin borde: simplemente cambiando esta línea <input type="text" size="11" name="Clock"> por esta otra <input type="text" size="11" name="Clock" style="border:none;" > 

 

CÓMO COLOCAR UN MENSAJE EN LA BARRA DE ESTADO


CÓDIGO A COPIAR:

<a href="http://www.aqui_tu_pagina.com" onmouseout="window.status=''" onmouseover="window.status='Aqui Va tu mensaje';return true ">

<img src="http://aqui_va_la_URL_de_tu imagen.com/nombre_de_la_imagen.jpg" width="170" height="40" border="0">

</a> 

 

CREA UN "TERREMOTO" EN TU WEB

CÓDIGO A COPIAR:

<input onClick=shake(40) type=button value="Terremoto"Terremoto name="button""">
<script language=JavaScript1.2>
function shake(n) {
if (n==1)
{document.body.bgColor = "#0000DA";
}
else
{document.body.bgColor = "#FFFFFF"
}

if (self.moveBy) {
for (i = 15; i > 0; i--) {
for (j = n; j > 0; j--) {
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);
}
}
}
}
</script>

 

CÓMO LOGRAR QUE EL CURSOR SEA "PERSEGUIDO" POR LAS IMÁGENES QUE DESEES

Código a copiar:

 

<div id="dot0" style="position: absolute; visibility: hidden; height: 11; width: 11; left: 12; top: 0"><img src="http://URL _DE_TU_IMAGEN.com/nmbre_de_la_imagen.gif" height=21 width=19></div>
<div id="dot1" style="position: absolute; height: 11; width: 11;"><img src=
"http://URL _DE_TU_IMAGEN.com/nmbre_de_la_imagen.gif" height=21 width=19></div>
<div id="dot2" style="position: absolute; height: 11; width: 11;"><img src=
"http://URL _DE_TU_IMAGEN.com/nmbre_de_la_imagen.gif" height=21 width=19></div>
<div id="dot3" style="position: absolute; height: 11; width: 11;"><img src=
"http://URL _DE_TU_IMAGEN.com/nmbre_de_la_imagen.gif" height=21 width=19></div>
<div id="dot4" style="position: absolute; height: 11; width: 11;"><img src=
"http://URL _DE_TU_IMAGEN.com/nmbre_de_la_imagen.gif" height=21 width=19></div>
<div id="dot5" style="position: absolute; height: 11; width: 11;"><img src=
"http://URL _DE_TU_IMAGEN.com/nmbre_de_la_imagen.gif" height=21 width=19></div>
<div id="dot6" style="position: absolute; height: 11; width: 11;"><img src=
"http://URL _DE_TU_IMAGEN.com/nmbre_de_la_imagen.gif" height=21 width=19></div>
<div id="dot7" style="position: absolute; height: 11; width: 11;"><img src=
"http://URL _DE_TU_IMAGEN.com/nmbre_de_la_imagen.gif" height=21 width=19></div>
<div id="dot8" style="position: absolute; height: 11; width: 11;"><img src=
"http://URL _DE_TU_IMAGEN.com/nmbre_de_la_imagen.gif" height=21 width=19></div>

<script LANGUAGE="JavaScript">
<!-- hide code

var nDots = 9;
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
var Xpos = 0;
var Ypos = 0;

// Time variable
var DELTAT = .01;
// space between images
var SEGLEN = 4;
// Elasticity variable
var SPRINGK = 10;

// physical variable (simulation)
var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;

var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;

var BOUNCE = 0.75;

var isNetscape = navigator.appName=="Netscape";

var followmouse = true;

var dots = new Array();
init();

function init()
{
var i = 0;
for (i = 0; i < nDots; i++) {
dots[i] = new dot(i);
}

if (!isNetscape) {
// I only know how to read the locations of the 
// <LI> items in IE
//skip this for now
// setInitPositions(dots)
}

// set their positions
for (i = 0; i < nDots; i++) {
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;
}


if (isNetscape) {
// start right away since they are positioned
// at 0, 0
startanimate();
} else {
// let dots sit there for a few seconds
// since they're hiding on the real bullets
setTimeout("startanimate()", 2000);
}
}

 

function dot(i) 
{
this.X = Xpos;
this.Y = Ypos;
this.dx = 0;
this.dy = 0;
if (isNetscape) { 
this.obj = eval("document.dot" + i);
} else {
this.obj = eval("dot" + i + ".style");
}
}


function startanimate() { 
setInterval("animate()", 20);
}


// This is to line up the bullets with actual LI tags on the page
// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why
// Still doesn't work great
function setInitPositions(dots)
{
// initialize dot positions to be on top 
// of the bullets in the <ul>
var startloc = document.all.tags("LI");
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
dots[i+1].X = startloc[i].offsetLeft
startloc[i].offsetParent.offsetLeft - DOTSIZE;
dots[i+1].Y = startloc[i].offsetTop +
startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
}
// put 0th dot above 1st (it is hidden)
dots[0].X = dots[1].X;
dots[0].Y = dots[1].Y - SEGLEN;
}

// just save mouse position for animate() to use
function MoveHandler(e)
{
Xpos = e.pageX;
Ypos = e.pageY; 
return true;
}

// just save mouse position for animate() to use
function MoveHandlerIE() {
Xpos = window.event.x + document.body.scrollLeft;
Ypos = window.event.y + document.body.scrollTop; 
}

if (isNetscape) {
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = MoveHandler;
} else {
document.onmousemove = MoveHandlerIE;
}


function vec(X, Y)
{
this.X = X;
this.Y = Y;
}

// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN) {
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;
}
}


function animate() { 
// dots[0] follows the mouse,
// though no dot is drawn there
var start = 0;
if (followmouse) {
dots[0].X = Xpos;
dots[0].Y = Ypos; 
start = 1;
}

for (i = start ; i < nDots; i++ ) {

var spring = new vec(0, 0);
if (i > 0) {
springForce(i-1, i, spring);
}
if (i < (nDots - 1)) {
springForce(i+1, i, spring);
}

// air resisitance/friction
var resist = new vec(-dots[i].dx * RESISTANCE,
-dots[i].dy * RESISTANCE);

// compute new accel, including gravity
var accel = new vec((spring.X + resist.X)/ MASS,
(spring.Y + resist.Y)/ MASS + GRAVITY);

// compute new velocity
dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);

// stop dead so it doesn't jitter when nearly still
if (Math.abs(dots[i].dx) < STOPVEL &&
Math.abs(dots[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
dots[i].dx = 0;
dots[i].dy = 0;
}

// move to new position
dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;

// get size of window
var height, width;
if (isNetscape) {
height = window.innerHeight + document.scrollTop;
width = window.innerWidth + document.scrollLeft;
} else { 
height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft;
}

// bounce of 3 walls (leave ceiling open)
if (dots[i].Y >= height - DOTSIZE - 1) {
if (dots[i].dy > 0) {
dots[i].dy = BOUNCE * -dots[i].dy;
}
dots[i].Y = height - DOTSIZE - 1;
}
if (dots[i].X >= width - DOTSIZE) {
if (dots[i].dx > 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = width - DOTSIZE - 1;
}
if (dots[i].X < 0) {
if (dots[i].dx < 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = 0;
}

// move img to new position
dots[i].obj.left = dots[i].X; 
dots[i].obj.top = dots[i].Y; 
}
}

// end code hiding -->
</script>

CAMBIA EL COLOR DE LAS BARRAS DE DESPLAZAMIENTO DE TU WEB

Es posible que, en más de una ocasión, te hayas planteado la posibilidad de efectuar cambios en las barras de desplazamiento de tu página web para que queden integradas de forma mucho más armónica con el diseño general de tu site.

Para darle un toque más personal a las siempre anodinas barras de desplazamiento grises, puedes utilizar este sencillo truco: 

Basta con incluir en el código de la página las modificaciones que deseamos hacer respecto al color de las barras de desplazamiento, pegando este código entre los tags <BODY> y</BODY>:

<style>
<!--
BODY { scrollbar-base-color : #FF9900;
scrollbar-arrow-color : #0000FF; }
.nav {
color : #FFCC00;
font-size : 8pt;}
-->
</style>

Las partes del código coloreadas de naranja y azul son las que hemos cambiado para modificar la apariencia de nuestra barra de desplazamiento. La parte naranja (correspondiente al "scrollbar-base-color") define el color predominante de la barra de desplazamiento. La parteazul (correspondiente al "scrollbar-arrow-color") define el color de las pequeñas flechas de los extremos. El resultado, gráficamente, es éste:

 

Texto en movimiento en Titulo y barra de estado

Aqui unos buenos codigos para hacer que el titulo se mueva de diferentes formas, al igual que la barra de estado, donde ademas del movimiento, un codigo para mostrar varios mensajes en ella.

Movimiento en el Titulo de la Pagina

Codigo 1. De derecha a izquierda - (Mira el ejemplo)
Pegalo dentro de las etiquetas<HEAD> y </HEAD>

Nota: Solo puedes editar lo que esta en Rojo!

____________________________________________________________________

 

<script type="text/JavaScript">
var repeat=1 //enter 0 to not repeat scrolling after 1 run, othersise, enter 1
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {
start=0
if (repeat==0)
return
}
setTimeout("titlemove()",150)
}
if (document.title)
titlemove()
</script>


----------------------------------
setTimeout("titlemove()",150), esta línea se refiere a la velocidad del movimiento del titulo.

____________________________________________________________________

Codigo 2. Flechas hacia el titulo - 
Pegalo dentro de las etiquetas <HEAD> y </HEAD>

<Script>
var titletext="CreandoWeb.cl.nu"
var thetext=""
var started=false
var step=0
var times=1

function welcometext()
{
times--
if (times==0)
{
if (started==false)
{
started = true;
document.title = titletext;
setTimeout("anim()",1);
}
thetext = titletext;
}
}

function showstatustext(txt)
{
thetext = txt;
setTimeout("welcometext()",4000)
times++
}

function anim()
{
step++
if (step==7) {step=1}
if (step==1) {document.title='>==='+thetext+'===<'}
if (step==2) {document.title='=>=='+thetext+'==<='}
if (step==3) {document.title='==>='+thetext+'=<=='}
if (step==4) {document.title='=>=>'+thetext+'<=<='}
if (step==5) {document.title='==>='+thetext+'=<=='}
if (step==6) {document.title='===>'+thetext+'<==='}
setTimeout("anim()",200);
}

if (document.title)
window.onload=onload=welcometext
</script>

_____________________________________________________________________

Barra de Estado
Nota: Solo funcionan en IExplorer!!

Codigo 1. Mensaje en la Barra de Estado con Efecto - 
Pegalo dentro de las etiquetas <HEAD> y </HEAD>

<script language="JavaScript">
function snapIn(jumpSpaces,position)
{
var msg = "CREANDOWEB - CODIGOS Y RECURSOS"
var out = ""
if (killScroll) {return false}
for (var i=0; i<position; i++)
{out += msg.charAt(i)}
for (i=1;i<jumpSpaces;i++)
{out += " "}
out += msg.charAt(position)
window.status = out
if (jumpSpaces <= 1)
{
position++
if (msg.charAt(position) == ' ') {position++}
jumpSpaces = 100-position
}
else if (jumpSpaces > 3) {jumpSpaces *= .75}
else {jumpSpaces--}
if (position != msg.length) {
var cmd = "snapIn(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,5);
} else {
scrolling = false
return false
}
return true
}

function snapSetup() {
if (scrolling)
if (!confirm('Re-initialize snapIn?'))
return false
killScroll = true
scrolling = true
var killID = window.setTimeout('killScroll=false',6)
scrollID = window.setTimeout('snapIn(100,0)',10)
return true
}
//-------------------------------------------------------------
var scrollID = Object
var scrolling = false
var killScroll = false
//-------------------------------------------------------------
</script>
<body onload="snapSetup()">

RELOG DIGITAL

COPIA Y PEGA ESTE CODIGO :

 

<script src="http://thevixar.jimdo.com/trucos-para-tu-web/" type="text/javascript"></script><script type="text/javascript" language="JavaScript">//<![CDATA[obj=new Object;obj.clockfile="tawhill001-blue.swf";obj.TimeZone="MX-CST";obj.width=150;obj.height=150;obj.wmode="transparent";showClock(obj);//]]></script>

 

IDENTIFICADOR DE IP

<a href="http://thevixar.jimdo.com/trucos-para-tu-web/"><img src="http://www.wieistmeineip.de/ip-address/" border="0" width="125" height="125" alt="IP" /></a>