Diseño Web Master,s

                                                        Probador De Codigos
                                          COMPRUEVA TUS CODIGOS AQUI
                                                                        ↓



Google maps (Google Gadget)

Esta es una aplicación online donde puedes ver imágenes satélitales con zoom + y -. Parecido al extra.

Ejemplo

[+] Coloquen el siguiente código donde quieran que aparezca.

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&ll=37.0625,-95.677068&spn=32.885543,56.513672&z=4&output=embed&s=AARTsJqzARj-Z8VnW5pkPMLMmZbqrJcYpw"></iframe><br /><small><a href="http://maps.google.com/?ie=UTF8&ll=37.0625,-95.677068&spn=32.885543,56.513672&z=4&source=embed" _fcksavedurl="http://maps.google.com/?ie=UTF8&ll=37.0625,-95.677068&spn=32.885543,56.513672&z=4&source=embed" style="color:#0000FF;text-align:left">Ver mapa más grande</a></small>


Traductor Google (Google Gadget)

Aquí pueden poner un traductor google que traduce su web al escoger un idioma dentro de una serie de opciones.

Ejemplo
 
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=es&w=160&h=60&title=&border=&output=js"></script>








Colores hexadecimales (Google Gadget)

Aquí dejo dos códigos para poner tablas de números hexadecimales de colores.

Ejemplos

[+] Recomiendo poner los colores en una página nueva. Controlar páginas => Agregar una nueva página, pon de título Colores hexadecimales, presionas Fuente HTML y pon alguno de los códigos o los tres.

<script type="text/javascript" src="http://widgetserver.com/syndication/subscriber/InsertPanel.js?panelId=3cc95145-3080-4fcf-bb61-511a89599af5"></script>

<script src="http://www.gmodules.com/ig/ifr?url=http://www.webge.it/gadgets/colores_hexadecimales/gadget.xml&amp;synd=open&amp;w=320&amp;h=120&amp;title=&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script>if (WIDGETBOX) WIDGETBOX.renderWidget('bd8b2bbb-5529-4a26-9a8d-ad2b89103bfc');</script>


Probador de códigos html

En lugar de estar creando una página nueva, alojandola nuevamente, pegando los códigos nuevamente y ver si funciona o cómo funciona el código, puedes hacerlo mediante un probador html donde insertes cualquier html que insertes, te crea una nueva ventana imaginaria con el resultado.

Ejemplo

[+] Recomiendo colocarlo en una nueva página. Controlar páginas => Agregar una nueva página, pones de título probador de códigos html, presionas Fuente HTML y pegas el siguiente código.

<script>
function probar(texto) {
ventana = window.open('', 'popup', '');
ventana.document.write(texto);
}
</script>
<form action="" name="probador"><input type="hidden" name="PHPSESSID" value="5fbe9a2af05042e0eafa4df578bd5e6c" />
Esto es un probador HTML. Inserta tu c&oacute;digo html y te mostrar&aacute; el resultado en una nueva ventana.<font color="#ffffff"><br />
<hr />
</font><textarea rows="14" cols="150" name="texto"></textarea><font face="Verdana" size="2"> <br /></font><input type="button" name="" onclick="probar(texto.value)" value="VER" /><font face="Verdana" size="2"> </font>
</form>


Calendarios flash de Bautizame.org

Son calendarios muy buenos en cuanto al diseño y al ser flash, es seguro.

Ejemplo:
<div align="center">
<EMBED src="http://bautizame.org/hi5/calendarios/calendar1.swf" quality="best" wmode="transparent" bgcolor="#ffffff" width="150" height="170" menu="false" type="application/x-shockwave-flash" pluginspage=" http://www.macromedia.com/go/getflashplayer" />
<br><small><a href="http://www.bautizame.org/hi5_calendario_para_hi5.php" target="_blank">www.bautizame.org</a></small></div>
<small><a target="_blank" href="http://www.bautizame.org/hi5_calendario_para_hi5.php">www.bautizame.org</a></small></div>

Ejemplo:
<div align="center"><embed height="170" width="150" pluginspage=" http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false" bgcolor="#ffffff" wmode="transparent" quality="best" src="http://bautizame.org/hi5/calendarios/calendar2.swf"></embed> <br />
<small><a target="_blank" href="http://www.bautizame.org/hi5_calendario_para_hi5.php">www.bautizame.org</a></small></div>


Saludo que indica las veces y la última vez que has visitado la página

Es un saludo personalizado. Donde, al entrar en tu web, sale una ventanita donde le pregunta el nombre al visitante (¿Cómo te llamas?) Y en cualquier lugar de tu página, saldrá esto:

Hola nombre. Usted ha estado en esta página XX veces. La última vez que nos visitó fue día, mes fecha at año.

Pueden modificar lo siguiente (cursiva o itálica), pero no recomiendo modifiar nada:

+ ¿Cómo te llamas? - */ Edita aquí, si quieres, la pregunta inicial /*
+ Hola " + Who() + ". Usted ha estado en esta p&aacute;gina " + Count() + " veces. La &uacute;ltima vez que nos visit&oacute; fue " + When() +" - */ Edita aquí, si quieres, la oración (menos las partes en negrita (boldeadas) /*

[+] Coloca el código donde quieras que aparezca la frase completa.

<script LANGUAGE="JavaScript">
var expDays = 30;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function Who(info){
var VisitorName = GetCookie('VisitorName')
if (VisitorName == null) {
VisitorName = prompt("¿Cómo te llamas?");
SetCookie ('VisitorName', VisitorName, exp);
}
return VisitorName;
}
function When(info){
var rightNow = new Date()
var WWHTime = 0;
WWHTime = GetCookie('WWhenH')
WWHTime = WWHTime * 1
var lastHereFormatting = new Date(WWHTime);
var intLastVisit = (lastHereFormatting.getYear() * 10000)+(lastHereFormatting.getMonth() * 100) + lastHereFormatting.getDate()
var lastHereInDateFormat = "" + lastHereFormatting;
var dayOfWeek = lastHereInDateFormat.substring(0,3)
var dateMonth = lastHereInDateFormat.substring(4,11)
var timeOfDay = lastHereInDateFormat.substring(11,16)
var year = lastHereInDateFormat.substring(23,25)
var WWHText = dayOfWeek + ", " + dateMonth + " at " + timeOfDay
SetCookie ("WWhenH", rightNow.getTime(), exp)
return WWHText
}
function Count(info){
var WWHCount = GetCookie('WWHCount')
if (WWHCount == null) {
WWHCount = 0;
}
else{
WWHCount++;
}
SetCookie ('WWHCount', WWHCount, exp);
return WWHCount;
}
function set(){
VisitorName = prompt("¿Cómo te llamas?");
SetCookie ('VisitorName', VisitorName, exp);
SetCookie ('WWHCount', 0, exp);
SetCookie ('WWhenH', 0, exp);
document.location="http://www.terra.es/personal8/webtrucos";
}
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
</script>
<base target="leftframe">
<body BGCOLOR="#ffffff" link="#CC0033" vlink="#333399" alink="#FF0000"
<table WIDTH="96%" BORDER="0" CELLSPACING="5" CELLPADDING="5">
<tr>
<script LANGUAGE="JavaScript">
document.write("Hola " + Who() + ". Usted ha estado en esta p&aacute;gina " + Count() + " veces. la &uacute;ltima vez que nos visit&oacute; fue " + When() +".");
</script>
</tr>
</table>


Forma divertida de abrir una pagina mediante un botón

Es para poner un botón, donde al hacerle clic, se abra una página en forma de ZOOM.

Ejemplo:
Modifica:

+ DIRECCION URL DE LA PAGINA A ABRIR - Pon la página que quieras abrir

[+] Pon el código donde quieras que aparezca el botón (box, controlar una página, etc)
<script language="JavaScript">
var ancho=100
var alto=100
var fin=300
var x=100
var y=100
function inicio()
{
ventana = window.open("DIRECCION URL DE LA PAGINA A ABRIR", "_blank", "resizable,height=1,width=1,top=x,left=y,screenX=x,screenY=y");
abre();
}
function abre()
{
if (ancho<=fin) {
ventana.moveTo(x,y);
ventana.resizeTo(ancho,alto);
x+=5
y+=5
ancho+=15
alto+=15
timer= setTimeout("abre()",1)
}
else {
clearTimeout(timer)
}
}
</script>
<form>
<input type="button" value="Abrir Ventana" onClick="inicio()"">
</form>


Botón de ver código fuente de una página o de la actual

Este código no es muy común en las páginas, ni muy recomendado ya que al hacer clic sobre un link, se abrirá el código fuente de cualquier página o incluso, de la página actual. (Si no sabes lo que es el código fuente, mejor). Aquí les dejo, les puede ser útil a cualquiera.

Lo que podemos modificar, es este renglón:

<a href="javascript:verFuente('http://www.hotmail.com');">Ver el código fuente de hotmail.com</a>

Modificamos la dirección de la página cuyo código fuente se verá al clickear y lo que dirá el link para clickear.

[+] Coloca el código donde quieras que aparezca el link.

<script type="text/javascript">
function verFuente(pagina){
window.location = "view-source:" + pagina ;
}
</script>
<a href="javascript:verFuente('http://www.hotmail.com');">Ver el código fuente de hotmail.com</a>

Aquí dejo otro pero este, esté donde esté puesto el link, verá la página actual (desde donde se clickea)

Lo que podemos modificar, es este renglón:

<a href="javascript:verFuente(window.location);">Ver el código fuente de esta página</a>

Solo debemos modificar lo que dirá el link para clickear.

[+] Coloca el código donde quieras que aparezca el link.

<script type="text/javascript">
function verFuente(pagina){
window.location = "view-source:" + pagina ;
}
</script> <a href="javascript:verFuente(window.location);">Ver el código fuente de esta página</a>


Cambiar imagen al pasar el cursor

Te permite colocar una imagen que cuando le pasas el cursor por encima, cambia a otra diferente. Al quitar el cursor de la imagen, vuelve a la imagen anterior e inicial.

Modifiquen:

+ URL DE IMAGEN 1 (Imagen inicial, la cual aparecerá primero)
+ URL DE IMAGEN 2 (Imagen que solo aparece si pasas el cursor sobre la inicial)

¿URL de imágenes? Tutoriales:
Link1, Link2, Link3, Link4, Link5, Link6, Link7, Link8, Link9

[+] Coloca el código donde quieras que aparezca la imagen.

<script language="javascript">
imagen1=new Image()
imagen1.src="URL DE IMAGEN 1"
imagen2=new Image()
imagen2.src="URL DE IMAGEN 2"
</script>
<img src="URL DE IMAGEN 1" name="ejemplo" onMouseover="document.images['ejemplo'].src=imagen2.src"
onMouseout="document.images['ejemplo'].src=imagen1.src">

Cambiar imagen al dar clic

Te permite colocar una imagen que cuando le haces clic, cambia a otra diferente. Al hacer clic nuevamente, vuelve a la imagen anterior e inicial.

Ejemplo:



Modifiquen:

+ URL DE IMAGEN 1 (Imagen inicial, la cual aparecerá primero)
+ URL DE IMAGEN 2 (Imagen que solo aparece si haces clic sobre la inicial)

¿URL de imágenes? Tutoriales:
Link1, Link2, Link3, Link4, Link5, Link6, Link7, Link8, Link9

[+] Coloca el código donde quieras que aparezca la imagen.

<script language="javascript">
imagen1=new Image
imagen1.src="URL DE IMAGEN 2"
imagen2=new Image
imagen2.src="URL DE IMAGEN 1"
var i=1;
function cambiar() {
if (i == 1)
{
document.images['ejemplo'].src=imagen2.src
i=2;
}
else
{
document.images['ejemplo'].src=imagen1.src;
i=1;
}
}
</script> <img src="URL DE IMAGEN 1" name="ejemplo" onMousedown="cambiar()"">

Popup si el visitante usa Internet Explorer

Este código sirve para que cuando un visitante entra a tu web con Internet Explorer, se abra una ventana o pestaña nueva (depende de las configuraciones del navegador), la que tu designes en el código (DIRECCIÓN DE PÁGINA QUE SE ABRIRÁ). Con los demás navegadores, el script no hace efecto.

Modifiquen:

+ DIRECCIÓN DE PÁGINA QUE SE ABRIRÁ - Coloquen aquí, la dirección url de la página que quieras que se abra aparte si un visitante entra con Internet Explorer.

[+] Si quieres que aparezca solo al entrar en tu web, colocalo en Home (Controlar páginas, seleccionas Home, presionas Fuente HTML y pegas el código arriba o abajo de todo lo que tienes). Si tienes intro / intro flash, ve a Controlar extras, buscas Intro / Intro flash, le das a Cambiar extras, escoges cualquier caja, presionas Fuente HTML y pegas el código arriba o abajo de todo lo que tienes.

<script LANGUAGE="JavaScript">
var nombre = navigator.appName
if (nombre == "Microsoft Internet Explorer")
window.open('DIRECCIÓN DE PÁGINA QUE SE ABRIRÁ');
</script>


Opciones con respuesta

Es una especie de encuesta donde al clickear en cada "radio" (círculo de cada opción para tildar) de una opción, salga un mensaje diferente cada una. No hay conteo de votos ni nada.

Ejemplo:

¿Qué zona de nuestra web, te parece que, esta mas padre?

Blog Halo
Programas y Juegos
Mejores recursos Web Master,s

<INPUT TYPE="radio" NAME="radio" value="Veo que te ha servido la lista de tutoriales del foro de pwg"
onClick="alert(value)"> Tutoriales externos<br>

Esa parte del código significa una opción. Como verán coloreado, las opciones que puedes modificar son el nombre de la opción (lo que dirá) y el mensaje que saldrá al tildar su radio.

¿Qué zona de nuestra web, te parece que, sirve más?<br><br>

Aquí, también, podemos editar la pregunta. Es opcional tenerla, si no la quieren, quiten el renglón

[+] Coloca el código donde quieras que aparezcan las opciones
<FORM> <p> ¿Qué zona de nuestra web, te parece que, sirve más?<br><br>
<INPUT TYPE="radio" NAME="radio" value="Nos alegramos que nuestro blog de artículos le haya servido" onClick="alert(value)""> Blog nixoweb<br>
<INPUT TYPE="radio" NAME="radio" value="Veo que te ha servido la lista de tutoriales del foro de pwg" onClick="alert(value)""> Tutoriales externos<br>
<INPUT TYPE="radio" NAME="radio" value="Parece que la recolección de recursos webmaster de toda la internet, no fue en vano" onClick="alert(value)""> Mejores recursos<br>
</form>


Evitar ingreso a menores de edad

El código es sencillo, al entrar en una página, abre una ventantia que pregunta la edad, si el usuario ingresa 18 o más, le saldrá un mensaje de que está aceptado y podrá entrar a la web sin ningún inconveniente. Pero si el usuario ingresa un valor menor a 18, le sale un cartel donde le avisa que no puede entrar y, al dar clic en Aceptar, en este último aviso, lo redireccionará a otro sitio.

Partes que puedes modificar del código:

¿Cuál es tu edad? Edita la pregunta del primer cartel
18 Edita el número mínimo que debe ingresar el visitante para entrar
Eres mayor de edad. Tienes permiso para entrar al sitio Edita el aviso que aparecerá si el usuario ingresa un valor mayor al indicado
Eres menor de edad. No puedes entrar Edita el aviso que aparecerá si el usuario ingresa un valor menor al indicado
http://www.nixoweb.es.tl Edita la dirección de la página que quieres abrir al dar clic en Aceptar del aviso de que no puede entrar.

[+] Pega el código en cualquier caja de Editar diseño
<script language="javascript">
var agePrompt=prompt("¿Cuál es tu edad?");
if (agePrompt>=18) alert('Eres mayor de edad. Tienes permiso para entrar al sitio')
else {
alert('Eres menor de edad. No puedes entrar')
document.location="http://www.nixoweb.es.tl";
}
</script>


Textarea. Cajita con codigos

Bueno, este es un código simple. Es una cajita donde, generalmente, dentro, se colocan códigos para que los tomen (como se hace en este blog) y en muchos mas.

Ejemplo:



Debes colocar el código exactamente como quieres que salga en el cuadro, sin realizarle ninguna modificación, donde dice aquí el código que quieres colocar:

<textarea rows="10" cols="78">Aquí el código que quieras colocar</textarea>

El número rows, es la cantidad de renglones que quieres que tenga la textarea.
El número cols, es la cantidad de caracteres que quieres que ocupe un renglón.

Puedes desactivar el cursor y evitar que se borre o modifique el texto que tiene dentro.

Ejemplo:



Solo debes agregarle este atributo, onFocus="this.blur()"

<textarea rows="10" cols="78" onFocus="this.blur()">Aquí el código que quieras colocar</textarea>

O bien, tienes la opción de colocar una textarea, que al hacer clic sobre el texto o código que está dentro, se seleccione.

Ejemplo:



Solo debes agregarle este atributo, onclick="select()"

<textarea rows="10" cols="78" onclick="select()">Aquí el código que quieras colocar</textarea><















Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis