Delicious LinkedIn Facebook Twitter RSS Feed
Showing posts with label Web. Show all posts
Showing posts with label Web. Show all posts

Crear un peeling (esquina doblada) a la izquierda


Ya vimos en otra entrada cómo crear el efecto en la parte superior derecha.

Ahora veremos cómo se hace para mostrar el efecto en la parte superior izquierda.

Ver ejemplo:

Los cambios con el anterior son los siguientes:

  • Se muestra a la izquierda.
  • Podemos elegir la distancia a mostrar desde arriba y desde la izquierda.
  • Podemos dejarla fija arriba y que se deslize con la página.
  • Podemos mostrar un texto desplazandose por la imagen chica.
  • Podemos mostrar un texto desplazandose por la imagen grande.

¿Cómo se hace...?

Ahora copiaremos todo el contenido del siguiente código:


Lo copiaremos en un editor de texto. (puede ser el Bloc de notas)

Lo personalizamos de la siguiente forma:

// Distancia desde arriba
var top = "0px"
//
// Distancia desde la izquierda
var left = "0px"
//
//
// cambiar: absolute: fijo arriba - fixed: se mueve con la página
var position = "position:fixed;"
//
// Flash pequeño
var smallflash ="http://img61.xooimage.com/files/1/9/4/smalltopl-23d29d8.swf"
//
// Imagen pequeña
var smallimg ="http://img61.xooimage.com/files/1/2/6/rss-0-23d2a54.png"
//
// Texto en la imagen pequeña
var scrolltxtsmall = "Suscribete"
//
// Tamaño del texto en imagen pequeña
var txtsizesmall = "20"
//
// Color del texto en imagen pequeña
var textcolorsmall = "FFFFFF"
//
//                            IMAGEN GRANDE CUANDO ABRIMOS
//
// Flash grande
var bigflash = "http://img51.xooimage.com/files/7/7/0/bigtopl-23d29cb.swf"
//
// Imagen grande
var bigimg = "http://img52.xooimage.com/files/8/5/4/rss-1-23d2a4f.jpg"
//
// URL al darle clic a la imagen grande
var urlval = "http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qygH"
//
// Forma de abrir
var owindow = "blank" // blank: nueva pestaña - self: en la misma
//
// Texto en imagen grande
var scrolltxtbig = " Suscribete para estar siempre actualizado..."
//
// Tamaño del texto en imagen grande
var txtsizebig = "50"
//
// Color del texto en imagen grande
var textcolorbig = "ff0000"
//

Los archivos flash pueden descargarlos y subirlos a su propio servidor:


Ya terminado de personalizar cambiando imágenes, texto, link, etc..., lo guardamos.

Al guardarlo ponerle el nombre con terminación "js"

Ejemplo: peel-top-left.js

Ahora lo subimos a un servidor.

Puede ser Xooimage.com

Si no saben como, ver el siguiente manual: Tutorial Xooimage

Ya subiro el archivo "js"

Vamos a Diseño, Edición de HTML y justo arriba de </body>

Poner el código así:

<script src='URL del archivo.js'/>

Cambiar: URL del archivo.js por el link propio.

Hacer Vista Previa y si todo quedo bien Guardar.

Tener en cuenta que la URL tiene que terminar en .js y no en .js/

Si lo suben a xooimage.com es el link generado al hacer clic sobre "Télécharger".

Cursores del mouse

Lista de los cursores disponibles por defecto en Windows:
  • default (flecha)
  • crosshair (cruz)
  • e-resize (flecha que apunta a la derecha)
  • hand (mano) Solo IE
  • help (signo de pregunta)
  • move (cruz con flechas en los extremos)
  • n-resize (flecha que apunta hacia arriba)
  • ne-resize (flecha que apunta al noreste)
  • nw-resize (flecha que apunta al noroeste)
  • pointer (mano)
  • s-resize (flecha que apunta hacia abajo)
  • se-resize (flecha que apunta hacia el sudeste)
  • sw-resize (flecha que apunta hacia el sudoeste)
  • text (I-beam)
  • w-resize (flecha que apunta a la izquierda)
  • wait (reloj de arena)
  • progress (flecha con reloj de arena)

Para cambiarlos se tiene que agregar un estilo CSS.

Ejemplo: style="cursor: pointer"


Acá sin ser un link, cambia por una mano


El código que utilicé fue el siguiente:

<h5 style="cursor: pointer">Acá sin ser un link, cambia por una mano</h5>

Se puede utilizar en un texto o imagen.


Fuente:

17 de mayo Día de Internet

Día Mundial de las Telecomunicaciones y de la Sociedad de la Información

Comentarios condicionales en Internet Explorer



El motor del Internet Explorer es capaz de reconocer dentro de un
<!-- comentario --> un condicional con el cuál indicarle hacer una acción determinada si el navegador usado es el que se especifica.
El formato es el siguiente:
<!--[if (condicional) IE (versión)]>

... código HTML ...

<![endif]-->
Donde condicional es:

  • gte : mayor o igual que
  • gt : mayor que
  • lt : menor que
  • lte : menor o igual que
  • [if IE] (nada) : todos

Y en versión podemos indicar la versión del Internet Explorer deseada. Así podrían quedar cosas como las siguientes:
Si nuestro navegador es anterior al IE6...
<!--[if lt IE 6 ]>

Tu versión de Internet Explorer es demasiado antigua.

<![endif]-->
Si nuestro navegador es superior al IE5.5 carga una hoja de estilos determinada...
<!--[if gte IE 5.500 ]>

<link rel="stylesheet" type="text/css" href="estilosIE.css">

<![endif]-->
Si nuestro navegador es IE en cualquier versión...
<!--[if IE]>

¡Estás usando Internet Explorer!

<![endif]-->

Crea un Botón de tu blog para la Barra de Google


Puedes darles a tus lectores la posibilidad de añadir un botón de tu blog en la barra de Google así pueden tener acceso directo o realizar búsquedas en tu blog.

Para empezar descargar el archivo que tenemos que modificar con nuestros propios datos para después alojarlo a un servidor.

Descargar slashdot_button.xml

Acá mostraré de que se trata el archivo slashdot_button.xml y que modificar.

<?xml version="1.0" encoding="UTF-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<title>¿Cómo se Hace...?</title>
<feed>http://loseasi.blogspot.com/feeds/posts/default?alt=rss</feed>
<description>¿Cómo se Hace...?</description>
<search charset="UTF-8">http://loseasi.blogspot.com/search?q={query}</search>
<site>http://loseasi.blogspot.com/</site>
<icon mode="base64" type="image/x-icon">
AAABAAYAEBAAAAEACABoBQAAZgAAACAgAAABAAgAqAgAAM4FAAAwM
AAAAQAIAKgOAAB2DgAAEBAA
AAEAIABoBAAAHh0AACAgAAABACAAqBA
AAIYhAAAwMAAAAQAgAKglAAAuMgAAKAAAABAAAAAgAAAA

AQAIAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAGpti/8JGaf/ChvA/wkbsv8GEYH/BxFm/0BFcf9JTGv/BQ+B/w0fvf8ZLdL/Gymx//Dw8P/Nzc7/LTm9/1xp6P8RIsb/CBmr/wobs/9cYpT/gIOc/wgW
mf8ZJ8X/ZnHh/3t/qP+8vcL/cXWo/2htpf8wPLf/TVTI/8TEyP/r6+v/g4ap/2lupv/HyMv/v728......................mucho mas...........................................AAAAAAAA==
</icon>
</button>
</custombuttons>


Todo lo que esta en rojo hay que cambiarlos por sus datos e imagen.

Para que se entienda que son cada una.

Entre las etiquetas <title></title> ahí va el titulo del blog.

Entre las etiquetas <feed></feed> ahí va la URL Feed del blog.

Esto es para que salgan en el botón las ultimas entradas y así poder ver las actualizaciones del blog.(En lo personal no lo utilizo.)

Entre las etiquetas <description></description> ahí va la descripción que mostraremos al colocar el puntero del ratón encima del botón.

Entre las etiquetas <search></search> ahí va la URL del blog seguido de /search?q={query} para el buscador.

Entre las etiquetas <site></site> ahí va la URL del blog.

Entre las etiquetas <icon></icon> ahí va imagen que se mostrara en el botón.

Como verán la imagen lleva una codificación base64 (texto plano). (esta codificación también se utiliza en diseño web para que no se puedan robar las imágenes.)

Pueden ser imágenes BMP, ICO, GIF y JPEG de 16 x 16 (si es mas grande no importa); tan sólo deberás codificarlas en texto ASCII mediante base64. (página online para hacerlo.)
Solo subirla donde dice "examinar" y apretar en "Convert the source data" luego copiar y pegar el código generado.

Se modifica abriendo el archivo slashdot_button.xml con un editor que puede ser el bloc de notas.

Guardar los cambios.

Después de hacerle sus propias modificaciones ya hay que alojarlo al servidor.

Ahora solo queda crear un enlace para poder añadir el botón con tan sólo un clic.

Cómo enlazar tu sitio a tu botón:
http://toolbar.google.com/buttons/add?url=url

Donde url señala el archivo XML del botón personalizado.

Ejemplo:
<a href="http://toolbar.google.com/buttons/add?url=http://página del olojamiento/slashdot_button.xml">Añadir botón</a>

Este es solo un ejemplo ustedes pueden crear otro tipo de enlaces como un botón, etc...


Dedicado a Rosa del Escaparate.

Y no se olviden de visitar DeJoTaS Radio.

Consejo para cargar la página mas rapido

Evita sobrecargar tus archivos CSS

Cuando desarrollamos un sitio en XHTML y CSS seguro que alguna vez te ha ocurrido que al añadir líneas y más líneas terminas con un CSS sobrecargado.
En un primer momento esta manera de organizar tus archivos CSS te puede parecer fea, pero cuando lo piensas te vas dando cuenta que a la larga es más efectivo debido al tiempo que ahorrarás a la hora de localizar los diferentes estilos.
No estoy seguro del porqué pero muchos diseñadores estan empeñados en desaprovechar el espacio en su código, usando un montón de innecesarios saltos de línea. Recuerda que eso sólo lo verás tu y estas haciendo un uso excesivo de ancho de banda. Tambien tu código será más facil de leer puesto que tendrá menos "boquetes".
Por supuesto es sabio dejar un cierto espacio para mantenerlo legible, aunque a algunos les encanta condensar todo, no dejando ningún espacio.
#wrapper {
width:800px;
margin:0 auto;
}
#header {
height:100px;
position:relative;
}
#feature .post {
width:490px;
float:left;
}
#feature .link {
width:195px;
display:inline;
margin:0 10px 0 0;
float:right;
}
#footer {
clear:both;
font-size:93%;
float:none;
}
Todo parece correcto y tu puedes localizar los elementos de una manera sencilla, pero imagina por un momento que tienes unos 200 elementos, cada uno con unos cuantos atributos, te costará muchisimo localizar los elementos deseados.
Por esos motivos para archivos CSS grandes es mucho más efectiva este tipo de organización:
Leer más ▽

Diseñar para distintos navegadores

Que difícil que es pero no imposible.
El problema es entender los distintos estándares que utilizan cada navegador.
Hoy en día hay una gran variedad de navegadores y cada día van cambiando o actualizandose.
Por eso cada ves se hace mas difícil el diseño de nuestras páginas.



Yo acá voy a mostrar unas formas de diseño para distintos navegadores.

Aplicando unos cambios en nuestro CSS (Lenguaje de hojas de estilo en cascada (cascade style sheets) utilizadas para definir la presentación de un documento HTML o XML).
Acá un manual para entender un poco de CSS

También hay otras entradas donde pueden ver distintas formas de diseñar para distintos navegadores Acá, Acá, Acá, Acá y Acá.

Hacks CSS.

Para poder aplicar diferentes diseños en una misma hoja de estilo tendremos que usar los Hacks, que no es otra cosa de utilizar reglas que únicamente las entiendan uno de los dos navegadores.
Ejemplo:

Leer más ▽

Post-it de aviso

Me pregunta Ascesino96: por intermedio del chat.
"quiero saber como poner ese mensaje de bienvenida que dice eso del firefox"
Bueno acá esta la respuesta:

Entré <body> y </body> poner este código:
<!--[if IE]>
<div id="postit" style="left:100px;top:120px">
<div align="right"><a href="javascript:closeit()"><img src="http://alojamiento/close_large.png" border="0"/></a></div><hr color=blue>
<center><b><font color="#FF0000" size="4">AVISO</font></b></center>
<p><font color="blue" size="3">Este blog está diseñado para que se visualice un 100% con firefox.</p>
<p>Este aviso aparece solo si se entra con Internet Explorer, una vez visto lo puede cerrar sin problemas.</p>
<p><strong>Es únicamente informativo.</strong> No le digo que utilice otro navegador, pero si quiere usted puede probar otra alternativa QUE LE RECOMIENDO.</font></p><p><center><font size="2" face="Arial"><a href="http://www.mozilla-europe.org/es/" target="_BLANK"><font face="Verdana" size="1">DESCARGAR MOZILLA FIREFOX GRATIS.</font></a></center></p><hr color=blue></div>
<script src='http://alojamiento/post.js' type='text/javascript'></script>
<![endif]-->

Lo que esta en azul es para que solo se vea cuando entran con Internet Explorer, si lo quitan se vera en todos los navegadores.
Después pueden cambiar a su gusto el mensaje del aviso, texto, color y medida del texto y la posición del post-it.
Donde dice alojamiento, ahí va el lugar en donde colocaron la imagen y el archivo post.js.
Acá les dejo ambos para descargar y subir a su servidor.

Y por ultimo entré <head> y </head> poner este código:
<style>
#postit{
position:absolute;
width:350px;
padding:5px;
background-color:lightyellow;
visibility:hidden;
text-align:justify;
z-index:500;
}
</style>

Ahí pueden cambiar el tamaño y color de fondo, pueden agregarle un borde.

¿Cómo mejorar la atención al público en su servicio técnico?

La razón principal por la que las empresas pierden clientes es la mala atención, o indiferencia, por parte de cualquiera de los miembros del personal de la empresa. Según estudios sobre el tema, un 68 % de los clientes perdidos fueron mal atendidos. Aquí se ve algo de forma muy clara, los servicios técnicos ya no deben preocuparse sólo por dar una reparación de calidad, sino que, si realmente quieren retener a sus clientes, deben lograr calidad en la atención a los mismos.


Consejos para lograr una atención eficaz y de calidad.

Lo primero que usted debe recordar es que las personas que van a su negocio tienen una necesidad insatisfecha, por eso recurren a usted, para que los ayude.


Cuando la persona llega al negocio, quizás las personas que atienden el mostrador (usted o sus empleados.), estén ansiosos por hacer el recibo, tomar el equipo y mandarlo directo a los técnicos. Esto visto con ojos simplistas es bueno, porque agiliza el trabajo y la atención, pero si miramos el asunto un poco más profundamente, vemos que quizás esta atención apurada no sea la mejor. El cliente considera su equipo como MUY VALIOSO, por lo que al dejarlo pretende que le digan por lo menos que van a hacer con él.


Si es necesaria la preparación de un presupuesto, se le puede explicar al cliente que los técnicos lo van a examinar para encontrar dónde están las fallas, y que tan pronto como se hayan detectado y estimado las reparaciones correspondientes, se le llamará con el presupuesto.


Si la falla es detectada en el momento o el trabajo es simplemente un chequeo de rutina, también se puede explicar al cliente qué es lo que se va a hacer con el equipo. Una de las cosas importantes al dar explicaciones es el lenguaje que se utiliza, el mismo no debe subestimar al cliente pero tampoco debe ser tan técnico que el cliente no entienda nada.


Leer más ▽

Cargando imágenes...

Hay veces que tenemos en nuestro sitio varias imágenes, y la carga de las mismas puede demorarse bastante.
Este código se utiliza para mostrar a quien acede a nuestra página que las imágenes se van cargando poco a poco (por favor tengan en cuenta que dependiendo de su velocidad de conexión y la carga del servidor puede que la imagen de progreso se mueva demasiado lento o demasiado rápido).
El cual muestra una imagen al iniciar la carga y desaparece al terminar de cargar todas las imágenes que posee nuestra página.

El siguiente código va entre las etiquetas <HEAD> y </HEAD>
<!-- Cargando imágenes... -->
<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga(){
document.getElementById("imgLOAD").style.display="none";
}
</script>

El segundo código va entre las etiquetas <BODY> y </BODY>
<!-- Cargando imágenes... -->
<div align='center' id='imgLOAD' style='color: blue;position:relative;top:7px;z-index:1'>
<b>Cargando imágenes...</b><br/>
<img src='http://dondeestaalogadalaimagen/loader.gif'/></div><!-- fin -->

El segundo código es el que podemos modificar a su gusto.

"center": por left o right, o ponerle una posición fija.

"top:7px;": la distancia desde arriba.

"blue": es el color de las letras.

"Cargando imágenes...": ahí lo que les guste, ej: espere a que terminen de cargar las imágenes,
o directamente no poner nada.

"http://dondeestaalogadalaimagen/loader.gif": bueno se entiende "no".

Un interesante link, una página donde puedes crear tus propios indicadores en GIF animado.



¿Donde puedo alojar mis archivos? Leer aquí.

Cambiar el icono de barra de dirección

Llamado como favicon.
El favicon es preferible que sea de medida 16x16.
Puede ser .ico, .gif o .png.

Luego de que hemos elegido nuestro favicon lo alojamos en algún servidor.

Ahora vamos a nuestro Blog y nos dirigimos a Diseño y ahí Edición en Html.

Buscamos el siguiente código </head>.

Y justo arriba colocamos el siguiente código.
<link href='http://tuweb.com/favicon.ico' rel='shortcut icon'/>

Donde dice "http://tuweb.com/favicon.ico ", colocamos el link donde hemos alojado nuestro favicon.

Crear un peeling (esquina doblada)

Pelar una página web es muy divertido de hacer y lo más fácil es que llamar la atención de sus usuarios.

Usted puede utilizar para llamar la atención sobre un artículo caliente en su propio sitio web.

Aquí voy a explicar cómo crear un efecto de ese tipo en su sitio web.

Utiliza Flash y JavaScript, y es muy fácil de instalar.

Una demostración en vivo para el efecto puede ser visto en la esquina superior derecha.

Cuando pasa el ratón sobre la imagen, se va a ampliar y revelar más información.

Para lograrlo, simplemente ejecuta los siguientes pasos para insertar un peeling esquina en su sitio web.

var jaaspeel = new Object();
jaaspeel.ad_url = escape('http://loseasi.blogspot.com');
jaaspeel.small_path = ' http://img5.xooimage.com/files/7/9/7/small-1e8e2b.swf';
jaaspeel.small_image = escape(' http://img1.xooimage.com/files/a/d/c/tmundo1-1016123.jpg');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;
jaaspeel.big_path = ' http://img26.xooimage.com/files/5/7/a/large-1016114.swf';
jaaspeel.big_image = escape(' http://img5.xooimage.com/files/8/6/a/mundo-1016120.jpg');
jaaspeel.big_width = '600';
jaaspeel.big_height = '600';
jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&ad_url=' + jaaspeel.ad_url;
function sizeup987(){
document.getElementById('jcornerBig').style.top = '0px';
document.getElementById('jcornerSmall').style.top = '-1000px';
}
function sizedown987(){
document.getElementById("jcornerSmall").style.top = "0px";
document.getElementById("jcornerBig").style.top = "-1000px";
}
jaaspeel.putObjects = function () {
// <jcornerSmall>
document.write('<div id="jcornerSmall" style="position:absolute;width:'+ jaaspeel.small_width +'px;height:'+ jaaspeel.small_height +'px;z-index:9999;right:0px;top:0px;">');
// object
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="jcornerSmallObject" width="'+jaaspeel.small_width+'" height="'+jaaspeel.small_height+'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ jaaspeel.small_path +'?'+ jaaspeel.small_params +'"/>');
document.write(' <param name="wmode" value="transparent" />');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+jaaspeel.small_params+'"/>');
// embed
document.write('<embed src="'+ jaaspeel.small_path + '?' + jaaspeel.small_params +'" name="jcornerSmallObject" wmode="transparent" quality="high" width="'+ jaaspeel.small_width +'" height="'+ jaaspeel.small_height +'" flashvars="'+ jaaspeel.small_params +'" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
document.write('</script>');
// </jcornerSmall>
// <jcornerBig>
document.write('<div id="jcornerBig" style="position:absolute;width:'+ jaaspeel.big_width +'px;height:'+ jaaspeel.big_height +'px;z-index:9999;right:0px;top:0px;">');
// object
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="jcornerBigObject" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ jaaspeel.big_path +'?'+ jaaspeel.big_params +'"/>');
document.write(' <param name="wmode" value="transparent"/>');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+ jaaspeel.big_params +'"/>');
// embed
document.write('<embed src="'+ jaaspeel.big_path + '?' + jaaspeel.big_params +'" id="jcornerBigEmbed" name="jcornerBigObject" wmode="transparent" quality="high" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'" flashvars="'+ jaaspeel.big_params +'" swliveconnect="true" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
// </jcornerBig>
setTimeout('document.getElementById("jcornerBig").style.top = "-1000px";',1000);
}
jaaspeel.putObjects();

Ver peel.js

Seleccione el código anterior y guárdelo como peel.js

Ahora edite el archivo con tu editor de programación (el Bloc de notas también funcionará).

Buscar la siguiente línea de código:

jaaspeel.ad_url = escape('http://loseasi.blogspot.com');

Cambie el valor entre las comillas que esta en rojo(en este ejemplo es 'http://loseasi.blogspot.com') a la página web que desea que su esquina para volver a dirigir, cuando los usuarios hagan clic en él.

Salvar su peel.js archivo.

Como se puede ver en el código JavaScript, este efecto utiliza dos imágenes.

1. tmundo1-1016123.jpg Una imagen de 100x100 px, se utiliza cuando el efecto está inactivo.
2. mundo-1016120.jpg Una imagen de 600x600 px, se mostrará cuando un usuario pasa el ratón por la piel.

En este ejemplo, estoy usando este tmundo1-1016123.jpg y este mundo-1016120.jpg.

Crear sus propias imágenes que se mostrarán en la piel.

Este proyecto utiliza Flash para crear el efecto real.

Ahora añada la siguiente línea a su página web despues de <body>.

<script src='http://img7.xooimage.com/files/c/0/9/peel-101612a.js' type='text/javascript'></script>


Asegúrese de que su fuente (imagen.jpg), (peel.js), (.swf) sean la dirección correcta.

Descargar archivos para modificar y subir a su servidor.

¿Donde puedo alojar mis archivos? Leer aquí.

Ver para ponerlo del lado izquierdo.

Solución activar flash

Generarmente cuando tenemos en nuestro sitio un archivo flash, en Internet Explorer nos sale al pasar el cursor sobre él "haga clic aquí para activar y usar este control" para evitar esto hay una solución muy sencilla, solo hay que poner un código JavaScript antes de </head>.

Código: (copiar y pegar)
Ver código

Pegar el código en el bloc de notas y guardarlo como embeddedcontent.js para subirlo a nuestro servidor.
O descargarlo de: Acá
Luego antes de </head> pegar lo siguiente:
<!-- activar flash -->
<!--[if IE]>
<script type="text/javascript" src="nuestroservidor/embeddedcontent.js" defer="defer"></script>
<![endif]-->
<!-- Fin activar flash -->
Cambiando por el sitio que se subio.

Cambiar estilos CSS con JavaScript (3)

Estos son otro ejemplos de como hacer cambios:
Ejemplo 1:
<head>

<script>
function cambiaColor(){
var i
for (i=0;i<document.fcolores.colorin.length;i++){
if (document.fcolores.colorin[i].checked)
break;
}
document.bgColor = document.fcolores.colorin[i].value
}
</script>
</head>

<body>
<form name=fcolores>
<input type="Radio" name="colorin" value="ffffff" checked> Blanco
<br>
<input type="Radio" name="colorin" value="ff0000"> Rojo
<br>
<input type="Radio" name="colorin" value="00ff00"> Verde
<br>
<input type="Radio" name="colorin" value="0000ff"> Azul
<br>
<input type="Radio" name="colorin" value="ffff00"> Amarillo
<br>
<input type="Radio" name="colorin" value="00ff00"> Turquesa
<br>
<input type="Radio" name="colorin" value="ff00ff"> Morado
<br>
<input type="Radio" name="colorin" value="000000"> Negro
<br>
<br>
<input type="Button" name="" value="Cambia Color" onclick="cambiaColor()">
</form>
</body>

Ver ejemplo 1:

Ejemplo 2:
<head>

<script>
function cambiaColor(colorin){
document.bgColor = colorin
}
</script>
</head>

<body>
<form>
<input type="Button" value="Rojo" onclick="cambiaColor('ff0000')">
<input type="Button" value="Verde" onclick="cambiaColor('00ff00')">
<input type="Button" value="Azul" onclick="cambiaColor('0000ff')">
</form>
</body>

Ver ejemplo 2:

Ejemplo 3:
<head>

<style type="text/css">

.CustomStyle {
font-family: Courier New;
font-size: 16px;
font-weight: bold;
font-style: normal;
text-decoration: none;
color: #0000ff;
background-color:#FFFF00;
}

</style>


<script type="text/javascript">
function cambiaColor(color) {
if (document.body.style.backgroundColor!=color)
document.body.style.backgroundColor=color;
else
document.body.style.backgroundColor=color; }
</script>

</head>

<body>
<select name='sel' class="CustomStyle" style="width:209px;">
<option selected>Elegir color</option>
<option onclick="cambiaColor('green');">"Cambiar a verde"</option>
<option value="Cambiar a blanco" name="colorin" onclick="cambiaColor('#ffffff');" />"Cambiar a blanco"
<option value="Cambiar a rojo" name="colorin" onclick="cambiaColor('red');" />"Cambiar a rojo"
<option value="Cambiar a azul" name="colorin" onclick="cambiaColor('blue');" />"Cambiar a azul"
</select>
</body>

Ver ejemplo 3:

Cambiar estilos CSS con JavaScript (2)

entre <head> y </head> poner el siguiente código:
<script type="text/javascript">
function cambiar()
{
document.getElementById('par').className = 'invertir'
}
</script>
<style type="text/css">
.estandar {
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #ccc;
border: thin ridge #006666;
}
.invertir {
font-family: Arial;
font-size: 8px;
font-weight: bold;
color: #999999;
background-color: #ff0000;
border: thin inset #00CC66;
}
</style>

y este código es lo que cambia:
<p class="estandar" id="par">
Poner lo que quieras y adaptar el código css a su gusto.
</p>

Ver ejemplo:

Cambiar estilos CSS con JavaScript (1)

Es para poner a disposición de los visitantes varios estilos CSS.
Código:
<SCRIPT>
<!--
function estilo(arquivo) {
document.getElementById('estilo').href=arquivo;
}
//-->
</SCRIPT>

Llamar a la función desde un enlace o botón.
<input type="button" value="Cambiar Estilo negro" onClick="estilo('negro.css');">
<input type="button" value="Cambiar Estilo imagen" onClick="estilo('defecto.css');">

Ver ejemplo:

Identificar resolución

Con este código podemos identificar la resolución que se esta utilizando para entrar a tú página y redimencionarla según sea 1024x768 o 800x600.
<script language="JavaScript">
if (screen.width >= 1024)
document.location='http://www.tusitio.com/pagina1024x768.html';
else
document.location='http://www.tusitio.com/pagina800x600.html';
</script>

Identificar navegador

Con este código podemos identificar el navegador que se esta utilizando para entrar a tú página y redimencionarla según sea Internet Explorer o Firefox.
<script language="JavaScript">
var navegador = navigator.appName
if (navegador == "Microsoft Internet Explorer")
direccion=("http://tupaginahechaparaexplorer.com");
else
direccion=("http://tupaginahechaparafirefox.com/")
window.location=direccion;
</script>

Saber la resolución del que entra en tu página

Código JavaScript:
<script language="JavaScript1.2">
document.writeln("<b>Tú resolución es de:</b> " + screen.width + " x " + screen.height +"");
</script>

Ver ejemplo:
Ver tú Resolución

Redimencionar página en 5 segundos

Código JavaScript:
<head>
<script type="text/javascript">

var pagina = 'http://tupagina.com';
var segundos = 5000;

function redireccion() {

document.location.href=pagina;

}

setTimeout("redireccion()",segundos);

</script>
</head>

Otro código:
<head>
<META HTTP-EQUIV="REFRESH" CONTENT="5;URL=http://yupagina.com">
</head>

Se puede cambiar los segundos.