"TINKERMASTER " diseños para Photoshop

tinkermaster

Codigos HTML

 

Aqui les dejo algunos codigos HTML para su pagina web.


 

 

Subrayar un Link al pasar el mouse:Con este código podemos lograr ese tan conocido efecto que al pasar el mouse sobre un link, este se subraye. Podemos hacer que tenga un color antes de visitar el link, y que tenga otro una vez visitado va en codigo HTML.
 
<STYLE type="text/css">
<!--
A:link {COLOR: red; TEXT-DECORATION: none}
A:visited {COLOR: gray; TEXT-DECORATION: none}
A:active {TEXT-DECORATION: none}
A:hover {COLOR: blue; TEXT-DECORATION: underline} -->
</STYLE>
</p>
<p><a href="l1.htm">El texto que quieras.</a><br>
<a href="l2.htm">otro texto.</a><br>
<a href="l3.htm">Otro texto.</a><br>
</p>
   

 

 

Transformar el cursor en una mira:Transformá la clásica flechita de Windows en una mira de disparo encima de la pagina.

 
<style type="text/css">
<!--
body { cursor: crosshair}
-->
</style>
   

 

 

Abrir un Link en una Ventana Nueva:Cuando tenemos Links en nuestras páginas y alguien hace clic sobre ellos, automáticamente se abre esa dirección en nuestra ventana, ingresa donde quieras este codigo HTML.

 
<a href="URL DE LA PAGINA QUE SE ABRIRA" target="_blank">AQUI EL TITULO DE LA PAGINA</a>
   


 

Crear un Libro de Visitas:
Con este código podemos crear un formulario para que complete el visitante. O también un libro de visitas, luego que el visitante apriete el botón "enviar", los datos serán enviados a tu casilla de correo Va en codigo HTML.

 

<H2>Libro de visitas</H2>
<FORM ACTION="mailto:tunombre@tuservidor.com" METHOD="post">

 

 

<TABLE>

 

<TD ALIGN=RIGHT>Nombre:</TD>
<TD><INPUT type="text" size=36 name="nombre"></TD>
<TR><TD ALIGN=RIGHT>Direccion E-mail:</TD>
<TD><INPUT type="text" size=36 name="direccion"></TD>
<TR><TD ALIGN=RIGHT>como llegaste hasta esta pagina?</TD>
<TD><INPUT type="text" size=36 name="procedencia"></TD>
<TR><TD ALIGN=RIGHT>Tus comentatios:</TD>
<TD><TEXTAREA rows=5 cols=30 name="comentarios"></TEXTAREA></TD>

</TABLE>

<INPUT type="reset" value="Borrar todo"> <INPUT type="submit" value="Enviar">

</FORM>

   


 

No dejar seleccionar nuestra Web:Con este código vamos a impedir que los visitantes seleccionen el texto de nuestra página para luego copiarlo a otro lado.

 

<script language="Javascript">
<!-- Begin
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
// End -->
</script>

   

 
 

Diseño trasparente: Con este codigo tendran el menu transparente y de igual forma lograran la trasparencia de los box.Solo peguenlo en texto del 1 box derecha.

 

<style type="text/css"> <!--
/* Diesen Teil nicht rauslöschen*/
/* Copyright by streetplayer49 http://www.hp-service.de.tl */
/* Allgemein */

 

 

p, div{color:#ffffff;}
body{color: #ffffff;background-color:#000000;}

 

 

/*Navigation*/
td.edit_navi_headbg{background-image: none;width: 15%;}
td.nav_heading{background-image: url(transparent);height: 33px;padding-left: 27px;font-size: 14px;font-weight: bold;}
td.nav{background-image: url(transparent);height: 33px;}
td.nav:hover{background-image: url(http://Hier Bildlink/buttoncpredhov.jpg);height: 33px;}
td.nav a{color: #ffffff;text-decoration: none;font-size: 11px;}
td.nav a:hover{color: #ffffff;text-decoration: overline underline;font-size: 11px;}
td.nav a:visited{color: #ffffff;font-size: 11px;font-weight: bold;}
td.edit_below_nav{visibility: hidden;}

/*Content*/
td.edit_rechts_cbg{background-image: none;width: 100%;}
td.edit_content_top{height: 33px;background-image: url(transparent);font-size:14px;font-weight:bold;text-align: center;}
td.edit_content{background-image: none;background-color:transparent;}
td.edit_content div{color: #fff;font-size: 12px;font-weight: bold;}
td.edit_content p{color: #fff;font-size: 12px;font-weight: bold;}
td.edit_content font{color: #fff;font-size: 12px;font-weight: bold;}
td.edit_content_bottom{background-image: url(transparent);height: 33px;}
td.edit_content_bottom2{background-image: none;height: 38px;}
td.headline2{visibility: hidden;}

/*Rechte Boxen*/
td.sidebar_heading{background-image: url(https://img.webme.com/pic/s/success4you/realflashdown.gif);height: 33px;font-size: 14px;font-weight: bold;text-align: center;}
.shouty, .shouty2, .shouty3, .shouty4, .shouty5{background-image: none;background-color:transparent;border:transparent;}
td.edit_rechts_bottom{background-image: none;width: 15%;}
td.edit_rb_footer{background-image: none;}
/*Rechter Streifen*/
td.edit_rechts_sbg{background-image: none;visibility: hidden;position: absolute;right: 0px;}
--> </style>

p, div{color:#ffffff;}
body{color: #ffffff;background-color:#000000;}

 

   


 

Botones adelante,atras y actualizar: Con este codigo podras poner botones en tu pagina que digan adelante, atras y actualizar esto es para hacer màs comoda la visita de tus usuarios pega el codigo en la fuente HTML de la pagina que desees.

 

<input type="button" value="Atrás" onclick="history.back()" style="font-family: Verdana; font-size: 8 pt">
<input type="button" value="Actualizar" onclick="window.location.reload()" style="font-family: Verdana; font-size: 8 pt">
<input type="button" value="Adelante" onclick="history.forward()" style="font-family: Verdana; font-size: 8 pt">

   

 

PALABRA NEW EN EL MENU:
Este codigo sirve para poner la palabra new en en menu de nuestra web simplemente nos vamos a editar paginas y donde dice titulo de la pagina ponemos el titulo de nuestra pagina seguido de este codigo.

<img src="http://img61.imageshack.us/img61/5580/newbotonoz0.gif" alt="Image Hosted by ImageShack.us" border="0"></a>
 
   Image Hosted by ImageShack.us

 

MENSAJE DE DESPEDIDA: Este codigo sirve para que cuando un visitante salga de tu web salga un mensaje de despedida. copia el siguiente codigo y pegalo en texto por encima de la pagina.

<body onUnload="window.alert('Gracias por visitar la web ^^')">
 
   

 
IMAGEN EN LA PARTE INFERIOR IZQUIERDA: Con este codigo podran poner una imagen en la esquina inferior izquierda de su pagina. solo añade el url de la imagen, donde dice "url de la imagen" y listo, pegalo en texto por debajo de la pagina.
<a href='URL DEL SITIO WEB' _fcksavedurl='URL DEL SITIO WEB'style='display:scroll;position:fixed;bottom:0px;left:0px;'> <img src='URL DE LA IMAGEN' _fcksavedurl='URL DE LA IMAGEN' _fcksavedurl='URL DE LA IMAGEN'/></a> 
 
   

 

MENSAJE DE BIENVENIDA: Este codigo lo que hara sera que al entrar a la pagina les dara un mensaje de bienvenida a todos los visitantes. Solo peguen el codigo en texto por encima de la pagina.

<script language="Javascript"> alert("Bienvenidos A mi web."); </script>

 

   

 

LUCES LATERALES: Con este codigo tendran luces que cambian de colores en los lados derecho e izquierdo. Solo peguenlo en texto por debajo de la pagina.

<style>body {
background-image: url(http://photos1.hi5.com/0031/763/432/vr3mEw763432-03.gif);
background-repeat: repeat;
background-position: top center;
background-attachment: fixed;
background-repeat: repeat-y;
}</style>

 
   

 
Pagina que tiembla:Este codigo sirve para que cuando un visitante entre a nustra web la pagina empesara a temblar solo copia el siguiente codigo y pegalo "encima de la pagina"
 
<html>
<head>
<title>TITULO</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<p>
<script language="JavaScript1.2">

function tremer(n) {

if (self.moveBy) {

for (i = 10; 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);

}}}}

tremer(5)

</script>
<Script language=JavaScript>

function right(e) {

if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){

alert("PAGINA WEB");

return false;

}

else if (navigator.appName == 'Microsoft Internet Explorer' &&

(event.button == 2 || event.button == 3)) {

alert("PAGINA WEB");

return false;

}

return true;

}

document.onmousedown=right;

if (document.layers) window.captureEvents(Event.MOUSEDOWN);

window.onmousedown=right;

</script>
</body>
</html>
   

 

Elejir y cambiar el color de fondo a la web: Este codigo sirve para poder cambiar el fondo de nuestra pagina web a un color solo tu elijes el color que quieras y el fondo de nuestra web se pongra al color que elejistes. copia el siguiente codigo y pegalo en donde quieras en HTML.

<FORM>
<INPUT TYPE="button" VALUE="gris" ONCLICK="document.bgColor='silver'">
<INPUT TYPE="button" VALUE="negro" ONCLICK="document.bgColor='black'">
<INPUT TYPE="button" VALUE="verde" ONCLICK="document.bgColor='lightgreen'">
<INPUT TYPE="button" VALUE="rojo" ONCLICK="document.bgColor='red'">
<INPUT TYPE="button" VALUE="blanco" ONCLICK="document.bgColor='white'">
<INPUT TYPE="button" VALUE="amarillo" ONCLICK="document.bgColor='yellow'"> 
</FORM> 
   

 

Buscador de imagenes: Este codigo funciona para colocar un buscador de imagenes eso si no es buscador de imagenes de google si no que de xfacts bueno solo copia el siguiente codigo y pegalo en Fuente HTML de tu pagina.

<embed src="http://xfacts.com/widgets/flickr_search.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash
   

 

Texto Parpadiante: Este codigo funciona para colocar un texto parpadeante en tu web adentro de un marco solo copia el siguiente codigo y pegalo en un block de notas y edicta donde dice AQUI EL TEXTO QUE VA A PARPADEAR ahy colocaras lo que quieres que parpadeo buendo despues copia y pega en Fuente HTML de tu pagina web.

<script language="JAVASCRIPT">
TE1="AQUI EL TEXTO QUE VA A PARPADEAR";
TE2="";
M=TE1;
cnt=0;
function SH(){
document.Switch.A.value=M;
cnt++;
if(cnt==1 && M==TE1){M=TE2;}
if(cnt==2 && M==TE2){cnt=0;M=TE1;}
setTimeout("SH()",500);
}
// -->
</script>
<form name="Switch">
<div align="center"><center><p><font color="#008000" face="Verdana"><input name="A" size="50" style="color: #33ff33; font-weight: bold; font-family: Verdana, Arial; background-color: rgb(255,255,255); border: 2px outset rgb(0,128,0); margin-top: auto; padding-left: 5px">
                      </font><script language="JAVASCRIPT">
 
<!--
SH();
// -->
</script></font></p>
                      </center></div>
                    </form>
 
   

 


Bloquear boton derecho: Este codigo funciona para bloquear el boton derecho sirve para que no roben imformacion de la web si quieren el codigo solo copia el siguiente codigo y pegalo en texto por encima de la pagina.

<body oncontextmenu="return false" onselectstart="return false"
   



Agregar tu web a favoritos: Este codigo sirve para que los visitantes de tu pagina web puedan añadir tu pagina como favoritos solo edicta donde dice URL AQUI ahi colocas tu web y donde dice DESCRICION DE TU WEB ahi colocas lo que quieras despues copialo y pegalo en donde quieras de HTML.

<a href="#"  onClick="window.external.AddFavorite('URL AQUI','DESCRICION DE TU SITIO');return false;"><font color="#FFFFFF" size="2"><font  color="#000000" face="Verdana, Arial, Helvetica,  sans-serif"><font size="2">Agreganos a tus  favoritos</font><font  color="#000000">...</font></font></font></a><font  size="2">
   



Centrar publicidad de pwg:  Este codigo sirve para centrar la publicidad que esta en la parte de arriba que es de pwg pero este codigo solo funciona para los diseños css asi que si tu tienes diseño iceblue mejor ni lo pongas por uqe no te funcionara bueno para los que tengan diseño css copien el siguiente codigo y pegenlo en CSS-CODE SIN STYLE TAGS.

table {margin-left:auto;margin-right:auto;}  lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} 
   


 

Nieve callendo en tu web:  Este codigo sirve para que caiga nieve en tu web y los visitantes se impresionen mucho, bueno si te gusta copia el siguiente codigo y pegalo en Texto por encima de la pagina.

<marquee behavior="scroll" direction="down" style="position: absolute; left: 100px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 95px; top: 0px; width: 16px; height: 60px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 115px; top: 0px; width: 16px; height: 70px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 116px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 132px; top: 15px; width: 16px; height: 600px;" scrollamount="5"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 148px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 214px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 330px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 246px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 312px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 338px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 354px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 370px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 386px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 402px; top: 15px; width: 16px; height: 600px;" scrollamount="5"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 418px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 434px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 450px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 466px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 482px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 598px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 614px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 894px; top: 15px; width: 16px; height: 260px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 630px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 646px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 662px; top: 15px; width: 16px; height: 600px;" scrollamount="5"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 678px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 694px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 710px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 726px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 742px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 758px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 774px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 974px; top: 35px; width: 16px; height: 160px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 790px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 806px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 812px; top: 15px; width: 16px; height: 600px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 828px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 844px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 860px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 876px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 892px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 898px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 900px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 90px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 180px; top: 5px; width: 16px; height: 570px;" scrollamount="5"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 206px; top: 15px; width: 16px; height: 600px;" scrollamount="1"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 399px; top: 5px; width: 16px; height: 610px;" scrollamount="3"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 409px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 520px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 656px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 865px; top: 55px; width: 16px; height: 400px;" scrollamount="1"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 370px; top: 65px; width: 16px; height: 410px;" scrollamount="6"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 290px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 425px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 580px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 306px; top: 15px; width: 16px; height: 300px;" scrollamount="1"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 599px; top: 5px; width: 16px; height: 610px;" scrollamount="3"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 609px; top: 25px; width: 16px; height: 180px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 1070px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 950px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 260px; top: 55px; width: 16px; height: 200px;" scrollamount="1"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 770px; top: 65px; width: 16px; height: 210px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 690px; top: 35px; width: 16px; height: 360px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 925px; top: 0px; width: 16px; height: 50px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 225px; top: 0px; width: 16px; height: 50px;" scrollamount="5"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 380px; top: 5px; width: 16px; height: 70px;" scrollamount="3"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 806px; top: 15px; width: 16px; height: 100px;" scrollamount="1"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 399px; top: 5px; width: 16px; height: 110px;" scrollamount="3"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 909px; top: 25px; width: 16px; height: 280px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 570px; top: 5px; width: 16px; height: 150px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 750px; top: 15px; width: 16px; height: 130px;" scrollamount="6"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 660px; top: 5px; width: 16px; height: 100px;" scrollamount="1"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 570px; top: 5px; width: 16px; height: 110px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 690px; top: 5px; width: 16px; height: 60px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 965px; top: 0px; width: 16px; height: 50px;" scrollamount="5"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 1000px; top: 0px; width: 16px; height: 50px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 1010px; top: 0px; width: 16px; height: 150px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 390px; top: 5px; width: 16px; height: 70px;" scrollamount="3"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 466px; top: 15px; width: 16px; height: 100px;" scrollamount="1"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 359px; top: 5px; width: 16px; height: 110px;" scrollamount="3"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 489px; top: 25px; width: 16px; height: 280px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 530px; top: 5px; width: 16px; height: 150px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 780px; top: 15px; width: 16px; height: 130px;" scrollamount="6"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 910px; top: 5px; width: 16px; height: 100px;" scrollamount="1"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 570px; top: 5px; width: 16px; height: 110px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 620px; top: 5px; width: 16px; height: 160px;" scrollamount="7"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 300px; top: 0px; width: 16px; height: 100px;" scrollamount="1"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 890px; top: 0px; width: 16px; height: 200px;" scrollamount="5"><span >*</span></marquee><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 840px; top: 10px; width: 16px; height: 100px;" scrollamount="7"><span >*</span></marquee> 
   



Imagen para ir arriba:  Este codigo sirve para colocar al inferior de la parte derecha de tu web una imagen que si le das click te lleve a sia arriba si estas asta abajo le das click a la imagen y te lleva asta arriba de nuevo bueno si lo quieres solo copia el siguiente codigo y pegalo en Texto por debajo de la pagina.

<a href='#' title='Ir arriba'><img alt='Ir arriba' border='0' src='http://inacho07.googlepages.com/2uparrow.png' style='position:fixed; bottom:0; right:0;'/></a> 
   



Abrir una Web en Pop Up:  Este codigo sirve para que cuando entren a tu pagina web automaticamente se abra otra pagina en una pestaña abierta si lo quieres copia el siguiente codigo y edicta donde dice AQUI URL DE TU WEB ahy colocas tu web y listo copialo y pegalo en TEXTO POR ENCIMA DE LA PAGINA.

<script language='JavaScript'>window.open('AQUI URL DE TU WEB', 'geoflotante', '');</script>  
   

Imagen con LINK:  Con este codigo pogremos colocar una imagen con link e decir que cuando le den click a la imagen te enviara a una pagina, bueno si te gusto copia el siguiente codigo y edicta donde dice URL DE LA PAGINA ahy colocas la url de la web que quieres ir y donde dice URL DE LA IMAGEN ahy coloca la url de la imagen a la que le daran click y listo copialo y pegalo en cualquier HTML de tu pagina web.

<a href="URL DE LA PAGINA" target="_blank"><img src="URL DE LA IMAGEN" alt="" /></a>

   


 

Crear un link para download:  Si queremos poner archivos para que los visitantes los puedan descargar a sus computadoras, solo debemos subir ese archivo a nuestro servidor e insertar en nuestra Web el siguiente código HTML.
<a href="ejemplo.exe">Descripción del enlace </a>
   


 

Quitar subrayado a los enlaces en toda la pagina:  Con este codigo vamos a poder quitarle lo subrayado osea que cuando pasemos el mause sobre un LINK no nos salgra la raya que subraya y se vera mas bien bueno solo copia el siguiente codigo y pegalo en texto por encima de la pagina ( ESTE CODIGO SOLO FUNCIONA PARA DISEÑOS CSS).

<style>
a:hover{text-decoration:none;}
a{text-decoration:none;}
</style>

   


 

iconos de FACEBOOK y YOUTUBE:  Este codigo sirve para colocar la red social de FACEBOOK y YOUTUBE en la esquina izquierda de arriba de tu web. si no sabes como es fijate en mi web yo lo tengo bueno si ya sabes cual es copia el siguiente codigo y EDITA todo lo que este en MAYUSCULA y pegalo en TEXTO POR DEBAJO DE LA PAGINA o POR ENCIMA.

<style type="text/css">
#facebookboton{cursor:pointer;
background-size:100px;
background-image:url(https://img.webme.com/pic/s/supermarioworldsnes/facebook-logo.png);
position:absolute;
left:-50px;width:100px;
height:100px;opacity:0.5;}
#youtubeboton{cursor:pointer;
background-size:100px;
background-image:url(https://img.webme.com/pic/s/supermarioworldsnes/youtube-logo.png);
position:absolute;
left:-50px;width:100px;
height:100px;opacity:0.5;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>$(document).ready(function(){facebook=$("#facebookboton");youtube=$("#youtubeboton");
posicion=parseInt(facebook.attr("top"));
facebook.css("top",posicion+"px");
youtube.css("top",(posicion+100)+"px");
facebook.mouseenter(function() {facebook.stop().animate({"left":"-10px","opacity":1},300);}).mouseout(function() {
facebook.stop().animate({"left":"-50px","opacity":.5},170);});
youtube.mouseenter(function() {youtube.stop().animate({"left":"-10px","opacity":1},300);}).mouseout(function(){youtube.stop().animate({"left":"-50px","opacity":.5},170);});});</script>

<a href="URL DE TU PAGINA DE FACEBOOK" target="_blank" title="Facebook de la Web"><div top="10" id="facebookboton"></div></a>
<a href="URL DE TU CANAL DE YOUTUBE" target="_blank" title="Youtube de la Web"><div id="youtubeboton"></div></a>
 

   


 

Texto parpadeante:  Este codigo sirve para poder aser un texto que se la pase puro parpadeando en tu web. solo copia el siguiente codigo y EDITA todo lo que este en MAYUSCULA y pegalo en donde quieras de HTML.

<script language="JavaScript">  var estado=true;  setTimeout("ver()",450);  function ver (){  estado=!estado;  if(estado==true)  texto1.style.visibility="visible";  else  texto1.style.visibility="hidden";  setTimeout("ver()",450);  }  </script><p align="center" id="texto1"  style="visibility:visible"><font face="Arial, Helvetica,  sans-serif size="3">GRAXIAS POR VISITAR MI WEB BY-tinkermaster</font></p>
 

   


 

Pajaro de twitter volando por toda tu web:  Este codigo sirve para colocar un pajaro que este volando por toda la web como el que tengo yo en la mia. ese pajaro cuando le das click sobre el, directamente te manda a tu cuenta de twitter bueno si te gusta copia el siguiente codigo y edita donde diga "USUARIO" ahi colocaras tu nombre de cuenta de tu TWITTER. y listo pegalo en TEXTO POR ENCIMA DE LA PAGINA.

<script src="http://oloblogger.googlecode.com/files/tripleflap.js" type="text/javascript"></script>
<script type="text/javascript">
var birdSprite='http://oloblogger.googlecode.com/files/birdsprite.png';
var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');
var twitterAccount = 'http://twitter.com/USUARIO';
var twitterThisText ='';
tripleflapInit();
</script>

   


 

Calculadora:  Este codigo sirve para colocar una calculadora en tu web solo copia el siguiente codigo y pegalo en donde quieras de HTML.

<form action name="Keypad">
                        <b>
                       

   


 

Texto que sigue al CURSOR: Este codigo sirve para hacer que un texto siga tu cursor en forma giratoria solo tienes que copiar el siguiente codigo y editar donde diga "BIENVENIDOS" ahy colocaras el TEXTO que va a seguir al cursor. Bueno ya que lo tengas copialo y pegalo en TEXTO POR ENCIMA DE LA PAGINA.

<style type='text/css'>
/* Texto giratorio que sigue al cursor */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: verdana, arial; /* Tipo de letra */
color: #000; /* Color del texto */

/* No editar esta area */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type='text/javascript'>
//<![CDATA[
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Mensaje
var msg = "BIENVENIDOS";

// Tamaño de la letra
var size = 22;

// Determina si es ovalado o circular, 1 es circular, 2 es ovalado
var circleY = 0.75; var circleX = 2;

// Espacio entre cada letra
var letter_spacing = 5;

// Diametro del circulo
var diameter = 10;

// Velocidad de rotacion
var rotation = 0.4;

// Velocidad de reaccion
var speed = 0.3;

////////////////////// No editar nada mas //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();
//]]>
</script>
 

   


 

Cambiar imagen al pasar el cursor: Este codigo hace que cuando nuestro cursor pase por una imagen la imagen que esta puesta cambie directamente a otra. Puedes ver un ejemplo abajo de esta imformacion. Bueno si te gusta el efecto copia el siguiente codigo y edita donde diga "URL DE LA IMAGEN 1" ahy colocaras la URL de la imagen que este puesta inicialmente y tambien edita donde diga "URL DE LA IMAGEN 2" ahi colocaras la URL de la imagen que cambiara al pasar el CURSOR. Y listo copia el codigo y pegalo en donde quieras de HTML.

<img src="URL DE LA IMAGEN 1" onmouseover="this.src='URL DE LA IMAGEN 2';" onmouseout="this.src='URL DE LA IMAGEN 1';"/>
   


 

Boton "recomendar" de facebook en la esquina inferior deracha: Bueno pues este codigo es muy bueno ya que es para que los visitantes de tu web puedan recomendar tu web en su muro de facebook. Puedes ver el boton de recomendar abajo de esta imfomarcion.solo Copia el siguiente codigo y edita lo que este en MAYUSCULA y pegalo en Texto por encima de la pagina.

<div style="display:scroll;position:fixed;bottom:5px;right:0px;"><iframe src="http://www.facebook.com/plugins/like.php?href=URL DE TU PAGINA WEB&send=false&layout=box_count&show_faces=false&width=500&action=recommend&font=verdana&colorscheme=light&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:65px;"></iframe></div>
 
   


 

Cambiar imagen de fondo elijiendola el visitante: Este codigo es para que cuando el visitante no le gusta el fondo de nuestra web ellos puedan elejir el fondo que les guste mas. Abajo de esta imformacion les dejo un ejemplo. Para dar efecto da click sobre la imagen que mas te guste y la imagen que elejistes se pondra de fondo.¿Te gusto? Copea el siguiente codigo y edita todo lo que diga URL DE LA IMAGEN hay pongras la url de la imagen que quieres que se ponga de fondo. ya editastes ahora copea el codigo y pegalo en donde quieras que aparesca las imagenes en HTML. 

center><a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(URL DE LA IMAGEN 1)'; document.body.style.backgroundRepeat='repeat'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="URL DE LA IMAGEN 1" /></a>

 

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(URL DE LA IMAGEN 2)'; document.body.style.backgroundRepeat='repeat'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="URL DE LA IMAGEN 2" /></a>

 

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(URL DE LA IMAGEN 3)'; document.body.style.backgroundRepeat='repeat'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="URL DE LA IMAGEN 3" /></a>

 

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(URL DE LA IMAGEN 4)'; document.body.style.backgroundRepeat='repeat'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="URL DE LA IMAGEN 4" /></a>

 

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(URL DE LA IMAGEN 5)'; document.body.style.backgroundRepeat='repeat'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="URL DE LA IMAGEN 5" /></a>

</center>

   


 

Mostrar ultimos tweets de twitter en nuestra web: Este codigo sirve para colocar una imagen que muestre nuestro tweest cada ves que colocamos algo nuevo. Abajo de esta imformacion les dejo un ejemplo. Copia el siguiente codigo y edita donde diga EDITAR AQUI hay colocas el nombre de tu twitter ya terminastes ahora copealo y pegalo en donde quieras que aparesca en HTML.

 

<center>
<img src=
http://twitstamp.com/EDITAR AQUI border="0" alt="twitstamp.com" />
</center>

   


 

El FanBox de facebook flotante y con efecto deslizante: Bueno pues aqui les traigo este codigo que casi todos me piden de colocar el fanbox de facebook que esta en la parte derecha de mi web flotando. para colocarlo tenemos que copiar el siguiente codigo y editar donde diga "Url de tu pagina de facebook" Hay colocaras el link de tu pagina de facebook, Ya termienastes ahora copea el codigo y pegalo en Texto por encima de la pagina.

 

<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=URL DE TU PAGINA DE FACEBOOK&width=238&colorscheme=light&connections=15&stream=false&header=false&height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>



<style type="text/css">
.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://lh6.googleusercontent.com/-VW_GzzYnZJ0/TkiZQFcBc2I/AAAAAAAABmg/fa9_qWV8Cu4/fb_bg.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}
</style>




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>

   

 
 
 
Hoy habia 4 visitantes (9 clics a subpáginas) ¡Aqui en esta página!

    • CUADRO TWEETS

      Para todos los usuarios de twitter que tienen una web es< esencial mantener informados a nuestros usuarios de las actualizaciones...

    • CUADRO DE NOTICIAS EN JQUERY

      crear un cuadro de noticias utilizando jquery para la animacion...

    • ESTILOS DE BORDES

      los bordes en realidad sirven para que algun elemento se vea mejor, es decir elegante...

    • RECURSOS

      encuentra exelentes paginas webs donde encontraras brushes, tipos de textos, etc...

  • SIGUEME EN YOUTUBE

    • DISEÑOS CSS

      descarga los mejores diseños Css para que puedas personalizar tu web...

    • PLANTILLAS XML

      Descarga exelentes plantillas para que personalizes tu blog...

    • JUEGOS PARA PC

      Descarga exelentes juegos para tu PC...

    • AFILIADOS VIP

      Afiliate a mi web de una manera facil y sencilla...

    • WALLPAPERS

      descarga wallpapers para que le den una mejor apariencia a tu PC...






    • Bienvenidos a Tinkermaster website en donde se comparten conocimientos, ideas e informaciones listas para que cualquiera pueda aprender de ellas - Diseñado Por Tinkermaster
      Estas viendo la imagen:


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