TutorialesCitytveze
  Codigos Html Para Tu Web
 

  Con este codigo tendras el menu transparente y de igual forma la transpariencia de los box, este es el codigo que yo estoy usando es totalmente modificado por mi. No olviden ser originales y no piratear el codigo ya que es de mi propiedad de uso es personal.

<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>

   



 Con este codigo podran ponerle un fondo de pantalla a su web que no se mueve osea que al bajar dara el efecto que no se mueva.Como el que puede ver mi pagina tiene este codigo, por lo cual este codigo va por encima de la pagina.

 
<style>
body
{
background-image: url(aki va el url de la imagen);
background-repeat: no-repeat;
background-attachment: fixed
}
</style>





Con este codigo podran centrar tu pagina web . Lo cual yo lo estoy usando , la pagina estara bien centrada, este codigo va por encima de la pagina.

 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/www.w3.org/1999/xhtml"> <div style="width:900px; position: relative; margin-left: auto; margin-right: auto;"> 







Con este codigo podras poner una caja de texto.Una caja de texto como un mensaje para los visitantes , este codigo lo puedes poner donde quieras en html.

<div align="center">
<div style="background-color:white; border-color: black; border-style: solid; color: black; height: 100px; overflow: scroll; width: 250px;">
<span style="color: black; font-family: tahoma; font-size: 85%;"><b></b></span>
<div align="center">
<span style="color: black; font-family: tahoma; font-size: 85%;"><b></b></span>
</div>
<span style="color: black; font-family: tahoma; font-size: 85%;"></span>
</div>
</div>
<b></b>



 

Con este codigo podras poner una camara de vigilancia 3D. Pegalo Donde Quieras en html.

 
<div style="text-align: center;"><a style="right: 0px; position: fixed; top: 0px;" href="http://www.youtube.com/url aqui " target="_blank"><img alt="" src="http://dl.dropbox.com/u/47340707/camara-tinkermaster.gif" /></a></div>

Con este codigo tus visitantes de tu web , Podran chatear , este codigo se llama el chat : Tutorialescitytveze.es.tl . Es de nuestra pertenencia asi que porfavor no cambien nada del codigo. Este codigo pegalo donde quieras.


 
<marquee>Chat Tutorialescitytveze.es.tl</marque>
<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzNTM4MDE5MDU2NzImcHQ9MTM1MzgwMjA1OTEzOSZwPTUzMTUxJmQ9Jmc9MSZvPTA5ZTgxMDczMDlmMTQ3YWU5NjJi/OWQzMGU2NmQzZDk2.gif" /><embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" width="540" height="405" name="chat" FlashVars="id=186503371" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small><a target="_BLANK" href="http://xat.com/web_gear/?cb">Get your own Chat Box!</a> <a target="_BLANK" href="http://xat.com/web_gear/chat/go_large.php?id=186503371">Go Large!</a></small><br>
 


Pagina en construccion:Este codigo sirve para poner tu pagina web en construccion solo copia el siguiente codigo y pegalo en Texto por debajo de la pagina.

 
<style type="text/css">
<!--
body { visibility:hidden;
background-color:#FFFFFF;
background-image:url(http://www.cordoba-redes.com.ar/EnConstruccion.bmp);
background-repeat: no-repeat;
background-position: top; }
//-->
</style>
   


Tiempo restante para finalizar el dia:Este codigo sirve para que sepas cuanto tiempo falta para que se termine es te dia. solo copia el codigo y pegalo donde quieras en HTML.

 
<body>
<p>Tiempo restante para finalizar el día</p>
<form name="Reloj">
<input type="text" size="7" name="tiempo" value="mm:hh:ss" title="Tiempo restante para finalizar el día">
<script language="JavaScript">
<!--
var tiempoAtras;
 
 

updateReloj();
function updateReloj() {
var tiempo = new Date();
var hora = 23-tiempo.getHours();
var minutos = 59-tiempo.getMinutes();
var segundos = 59-tiempo.getSeconds();

tiempoAtras= (hora < 10) ? hora :hora;
tiempoAtras+= ((minutos < 10) ? ":0" : ":") + minutos;
tiempoAtras+= ((segundos < 10) ? ":0" : ":") + segundos;

document.Reloj.tiempo.value = tiempoAtras;

setTimeout("updateReloj()",1000);
}
//-->
</script>
</form>
</body>
   


suscribete de youtube: este codigo nos permite poner el codigo de suscribete en youtube,
solo copia el codigo y pegalo donde quieras en HTML
.


<iframe frameborder="0" scrolling="no" id="fr"
hidden; height: 105px; width: 270px; border: 0;"></iframe>
 
   


subir fotos: este codigo sirve para ver el el link de la imagen para poder cargarlo a nuestra web solo copia el codigo y pegalo donde quieras en HTML. 

<p align="center" class="Titulos-menu"><strong>||- SACA LA URL A TU FOTO -||</strong></p>
<form action="
http://i68.plebius.net/upload.php" enctype="multipart/form-data" target="_blank" method="post" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px">
    <p align="center"><input type="hidden" name="dest0" /> <span class="Estilo1">SACA LA URL DE TUS IM&Aacute;GENES</span><br />
    <input type="file" name="pic" value="" /><br />
    <input type="submit" value=" Subir " /> &nbsp; <input type="button" value=" Cancelar " onclick="self.close();" /></p>
    <input type="hidden" name="op" value="upload" /> <input type="hidden" name="dest" />
</form>
  
 
   SACA LA URL DE TUS IMÁGENES

      


ver ip del visitante: con este codigo veras el IP de cada persona que visite tu website solo copia el codigo y pegalo donde quieras en HTML.


<script LANGUAGE="JavaScript">
<!-- hide code
var nDots = 7;
var Xpos = 0;
var Ypos = 0;
var DELTAT = .01; 
var SEGLEN = 10; 
var SPRINGK = 10; 
var MASS = 1; 
var XGRAVITY = 0; 
var YGRAVITY = 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) { 
        
    } 
    
    for (i = 0; i < nDots; i++) { 
        dots[i].obj.left = dots[i].X; 
        dots[i].obj.top = dots[i].Y; 
    } 
    
    
    if (isNetscape) { 
        
        startanimate();
    } else { 
        setTimeout("startanimate()", 1000); 
    } 
}
 
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); 
}

function setInitPositions(dots)

    
    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;
    } 
    
    dots[0].X = dots[1].X; 
    dots[0].Y = dots[1].Y - SEGLEN; 
}

function MoveHandler(e)

    Xpos = e.pageX; 
    Ypos = e.pageY;     
    return true; 
}

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;
}

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() {   
    
    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); 
        } 
        
        
        var resist = new vec(-dots[i].dx * RESISTANCE, 
            -dots[i].dy * RESISTANCE);
        
        
        var accel = new vec((spring.X + resist.X)/MASS + XGRAVITY, 
            (spring.Y + resist.Y)/ MASS + YGRAVITY); 
        
        
        dots[i].dx += (DELTAT * accel.X); 
        dots[i].dy += (DELTAT * accel.Y); 
        
        
        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; 
        } 
        
        
        dots[i].X += dots[i].dx; 
        dots[i].Y += dots[i].dy; 
        
        
        var height, width; 
        if (isNetscape) { 
            height = window.innerHeight + window.pageYOffset;
            width = window.innerWidth + window.pageXOffset;
        } else {    
            height = document.body.clientHeight + document.body.scrollTop;
            width = document.body.clientWidth + document.body.scrollLeft;
        } 
        
        
        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;
        } 
        
        
        dots[i].obj.left = dots[i].X;          
        dots[i].obj.top =  dots[i].Y;       
    } 
}

// end code hiding --> 
</script><center><script type='text/javascript'>
// <![CDATA[
var colour="#FFFFFF";
var sparkles=40;
var x=ox=400; 
var y=oy=300; 
var swide=800; 
var shigh=600; 
var sleft=sdown=0;
var tiny=new Array(); 
var star=new Array(); 
var starv=new Array(); 
var starx=new Array(); 
var stary=new Array(); 
var tinyx=new Array(); 
var tinyy=new Array(); 
var tinyv=new Array(); 
window.onload=function() { if (document.getElementById) { 
var i, rats, rlef, rdow; 
for (var i=0; i<sparkles; i  ) { 
var rats=createDiv(3, 3); 
rats.style.visibility="hidden";
document.body.appendChild(tiny=rats);
starv=0; 
tinyv=0; 
var rats=createDiv(5, 5); 
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5); 
var rdow=createDiv(5, 1); 
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star=rats);

set_width(); 
sparkle(); 
}} 
function sparkle() { 
var c; 
if (x!=ox || y!=oy) { 
ox=x; 
oy=y; 
for (c=0; c<sparkles; c  ) if (!starv[c]) { 
star[c].style.left=(starx[c]=x) "px"; 
star[c].style.top=(stary[c]=y) "px"; 
star[c].style.clip="rect(0px, 5px, 5px, 0px)"; 
star[c].style.visibility="visible";
starv[c]=50; 
break; 


for (c=0; c<sparkles; c  ) { 
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);

setTimeout("sparkle()", 40); 

function update_star(i) { 
if (--starv==25) star.style.clip="rect(1px, 4px, 4px, 1px)"; 
if (starv) { 
stary =1 Math.random()*3;
if (stary<shigh sdown) { 
star.style.top=stary "px"; 
starx =(i%5-2)/5; 
star.style.left=starx "px"; 

else { 
star.style.visibility="hidden";
starv=0; 
return; 


else { 
tinyv=50; 
tiny.style.top=(tinyy=stary) "px"; 
tiny.style.left=(tinyx=starx) "px"; 
tiny.style.width="2px";
tiny.style.height="2px";
star.style.visibility="hidden";
tiny.style.visibility="visible"


function update_tiny(i) { 
if (--tinyv==25) { 
tiny.style.width="1px";
tiny.style.height="1px";

if (tinyv) { 
tinyy =1 Math.random()*3;
if (tinyy<shigh sdown) { 
tiny.style.top=tinyy "px"; 
tinyx =(i%5-2)/5; 
tiny.style.left=tinyx "px"; 

else { 
tiny.style.visibility="hidden";
tinyv=0; 
return; 


else tiny.style.visibility="hidden";

document.onmousemove=mouse;
function mouse(e) { 
set_scroll(); 
y=(e)?e.pageY:event.y sdown; 
x=(e)?e.pageX:event.x sleft; 

function set_scroll() {
if (typeof(self.pageYOffset)=="number") { 
sdown=self.pageYOffset;
sleft=self.pageXOffset;

else if (document.body.scrollTop || document.body.scrollLeft) { 
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { 
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;

else { 
sdown=0; 
sleft=0; 


window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") { 
swide=self.innerWidth;
shigh=self.innerHeight;

else if (document.documentElement && document.documentElement.clientWidth) { 
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;

else if (document.body.clientWidth) { 
swide=document.body.clientWidth;
shigh=document.body.clientHeight;


function createDiv(height, width) { 
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height "px"; 
div.style.width=width "px"; 
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div); 

// ]]> 
</script><img border="1" alt="" src="
http://lil-fino.99k.org/image.php" /> </center><br />
 
 
 


texto que cambia de color: este codigo sirve para que se mueva un texto y a la ves cambie de color solo copia el codigo y pegalo donde quieras en HTML.


<marquee><span style="font-weight: bold;font-size:180%;"><script>
var text="AQUI EL TEXTO QUE CAMBIARA DE COLOR Y QUE SE MUEVA"
var speed=80
if (document.all||document.getElementById){
document.write('<span id="highlight">' + text + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script></span></marquee>
 



Pagina en construccion:Este codigo sirve para poner tu pagina web en construccion solo copia el siguiente codigo y pegalo en Texto por debajo de la pagina.

 
<style type="text/css">
<!--
body { visibility:hidden;
background-color:#FFFFFF;
background-image:url(http://www.cordoba-redes.com.ar/EnConstruccion.bmp);
background-repeat: no-repeat;
background-position: top; }
//-->
</style>
   


Imagen grande:Este codigo sirve para que cuando alguien de click en una imagen la imagen se haga mas grande de lo que estaba solo copia el siguiente codigo y le edictas donde dise "URL DE LA IMAGEN" quitas eso y pegas la URL de la imagen que quieras. Bueno despues copias todo y lo pegas en donde quieras en HTML.

 
<img onclick="javascript:this.width=450;this.height=338" ondblclick="javascript:this.width=100;this.height=80" src="URL DE LA IMAGEN" width="100"/>
   




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