Codigos html para tu web

Hola taringeros, hoy les traigo una cantidad de codigos htmls profecionales para cualquier web, informacion extraida de JrzTD, Si wuieren mas codigos html y javascripts solo entra en mi blog JrzTD http://jrztd.jimdo.com/secci%C3%B3n-html/ El post sera actualizado cada semana con nuevos contenidos.

NOTA: En todos los codigos lo que esté de color rojo es lo que pueden modificar, lean la descripción de cada codigo, es importante

Codigos html para tu web

Codigo del probador de codigos

<script type="text/javascript">
//<![CDATA[

function probar(texto) {
ventana = window.open('', 'popup', '');
ventana.document.write(texto);
}
//]]>
</script>
<form name="probador" action="" id="probador">
<font face="Verdana" size=2>Esto es un probador de códigos, inserta el código HTML y te dará el resultado en una ventana nueva!</font>

<hr />

<textarea name="texto" cols="50" rows="10">
</textarea> <font face="Verdana" size=2><br /></font> <input type="button" value="Convertir" onclick="probar(texto.value)" />
</form>




Codigo html para poner una imagen como pie de pagina


</div><div class="n"><div class="n">
<a href="#" title="Ir arriba"><img alt="Ir arriba" border="0" src="Aqui la url de la imagen que desee " style=position:fixed;bottom:0;left:0;/></a>
</div>


Solo pon el coodigo en tu pagina como widget/html puedes poner una imagen diferente en cada pagina .

NOTA: Si quieres que la misma imagen salga en todas las pagina coloca el codigo en plantilla propia html (sidebar).

por defecto la imagen aparecera en la parte inferior izq. para cambiarlo solo cambien bottom:0; left:0; por la pocicion que deseen, ejemplo, esta pagina




Codigo html para poner botón "ir arriba"

Este codigo html es para jimdo o su web y es para poner un boton para que al darle clic sus usuarios vallan directo arriba

</script></div><div class="n"><div class="n">
<a href="#" title="Ir arriba"><img alt="Ir arriba" border="0" src="Aquí va la url de tu imagen" style=position:fixed;bottom:0;right:0;/></a>
</div>


por defecto esta en la parte bottom:0; right (abajo,derecha)
lo pueden cambiar por la pocicon que gusten. ejemplo: http://jrztd.jimdo.com



Codigo cambia de color de fondo a tu web automaticamente


<div id="cc-matrix-899906057">
<div class="n">
<h1>
CAMBIA DE COLOR LA PAGINA POR EL QUE MAS TE GUSTE
</h1>
</div>

<div class="n">
<center>
<table border="0" style=cursor:url('http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/ic9f9e9dccbe9efa9/1279636888/thumb/image.gif'),auto; align="center" width="22%">
<tr>
<td>
<span onmouseover="javascript:document.body.style.backgroundColor='#d9d13f'; document.body.style.backgroundImage='none';"><img border="1" src=
"http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/ib70a484a0d796a4c/1279635875/thumb/image.jpg" alt="" /></span>
</td>
<td>
<span onmouseover="javascript:document.body.style.backgroundColor='#3f6dd9'; document.body.style.backgroundImage='none';"><img border="1" src=
"http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i864d71f3ad9442f6/1279635875/thumb/image.jpg" alt="" /></span>
</td>
<td>
<span onmouseover="javascript:document.body.style.backgroundColor='#d9993f'; document.body.style.backgroundImage='none';"><img border="1" src=
"http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i6e6a28be3b5b635a/1279635875/thumb/image.jpg" alt="" /></span>
</td>
<td>
<span onmouseover="javascript:document.body.style.backgroundColor='#cccccc'; document.body.style.backgroundImage='none';"><img border="1" src=
"http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/iffbb7edc0af7fd84/1279635875/thumb/image.jpg" alt="" /></span>
</td>
<td>
<span onmouseover="javascript:document.body.style.backgroundColor='#ffffff'; document.body.style.backgroundImage='none';"><img border="1" src=
"http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i199da8a905c6bfc5/1279635875/thumb/image.jpg" alt="" /></span>
</td>
<td>
<span onmouseover="javascript:document.body.style.backgroundColor='#9b5b1c'; document.body.style.backgroundImage='none';"><img border="1" src=
"http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i2c7c9e382f2a42c3/1279635875/thumb/image.jpg" alt="" /></span>
</td>
</tr>

<tr>
<td>
<span onmouseover="javascript:document.body.style.backgroundColor='#57d93f'; document.body.style.backgroundImage='none';"><img border="1" src=
"http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/id782c9ba10091374/1279635875/thumb/image.jpg" alt="" /></span>
</td>
<td>
<span onmouseover="javascript:document.body.style.backgroundColor='#d9483f'; document.body.style.backgroundImage='none';"><img border="1" src=
"http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i89158ce65f80c1be/1279636453/thumb/image.jpg" alt="" /></span>
</td>
<td>
<span onmouseover="javascript:document.body.style.backgroundColor='#FFCCCC'; document.body.style.backgroundImage='none';"><img border="1" src=
"http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i12a2ebb01b035b05/1279635875/thumb/image.jpg" alt="" /></span>
</td>
<td>
<span onmouseover="javascript:document.body.style.backgroundColor='#993fd9'; document.body.style.backgroundImage='none';"><img border="1" src=
"http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i453f8b776874b873/1279635875/thumb/image.jpg" alt="" /></span>
</td>
<td>
<span onmouseover="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img border="1" src=
"http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/iebc9234a50f2d86b/1279635875/thumb/image.jpg" alt="" /></span>
</td>
<td>
<span onmouseover="javascript:document.body.style.backgroundColor='#74b8fb'; document.body.style.backgroundImage='none';"><img border="1" src=
"http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i75f43d7530285f50/1279635875/thumb/image.jpg" alt="" /></span>
</td>
</tr>
</table>
</center>
</div>
</div>


Ejemplo:http://jrztd.jimdo.com/sección-html/


Ventana emergente en tu web

<!-- Mas trucos y scripts en http://jrztd.jimdo.com -->
<SCRIPT language=Javascript> open('Aquí tu URL','Aquí el titulo',"toolbar=0,location=0,status=0,menubar=0,scrollbars=yes,resizable=YES,width=1000,height=500";</SCRIPT>

Este codigo es para una ventana emergente en tu web o sea que al abrir tu pagina web automaticamente se abrira otra web la que tu elijas.
Lo podemos agregar como un witged/html en la pagina que desees solo en la pagina que lo agreges se habrira por ejemplo: si lo pusistes en tu pagina de inicio solo ahi se abrira esa ventana emergente en las otras pestañas de tu web no.
En cambio si deseeamos que en todas las paginas de tu web salga la ventana emergente lo colocamos en plantillas,plantillas propias,html.
La ventana la puedes modificar a tu estilo y tamaño osea le cambias donde dice width y height le cambias los numeros al tamaño que te guste.





Codigo Imagen cargandose pagina

<script type='text/javascript'>
//<![CDATA[
window.onload = detectarCarga;
function detectarCarga(){
document.getElementById("imgLOAD".style.display="none";
}
//]]>
</script>
<div id='imgLOAD' style=TEXT-ALIGN:center>
<b>AQUI TU TEXTO</b>
<center>
<img src="AQUI TU DIRECCION URL DE LA IMAGEN " alt="" />
</center>
</div>


Cuando entras a la pagina saldra la imagen gif cargando.. pero al terminar de cargar la pagina ya se quitara sola la imagen.

ejemplo http://pruebajrztd.jimdo.com/ --- puedes copiar URL de alguna imagen de este link http://www.disemucho.net/imagenes-cargandose/


Marquesina


<center> <div class="n"><p>
<b><font color="#000000" face="georgia" size=4><marquee width="400" scrollamount="5" bgcolor="#FFFFFF">Aquí tu texto</marquee>
</font></b>
</p><center>





[color=red]Ventana de alerta en tu web con un mensaje[/color]

<script language="JavaScript" type="text/javascript">
alert("Pon aqui el mensaje que quieres!";
</script>


ejemplo: aqui: http://pruebajrztd.jimdo.com/



Mensaje de alerta mediante un boton

<form><input name="button2" type="button"
onclick='alert("Aqui el mesaje de alerta!"' value="Nombre del boton" />
</form>





Cambiar imagen al darle click (RECOMIENDO)

<script language="javascript">
imagen1=new Image
imagen1.src="url dela imagen 1"
imagen2=new Image
imagen2.src="url dela imagen 2"
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 dela imagen 1" name="ejemplo" onMousedown="cambiar()"">


ejemplo: http://jrztd.jimdo.com/secci%C3%B3n-html/ Casi al final de la pagina




BOTON PARA OCULTAR Y MOSTRAR INFORMACION

<div class="pre-spoiler">
<span style=color:#00ffff;>AQUI COLOCAN EL TEXTO QUE SE VERA AL DAR CLIC</span> <input type="button" value="Mostrar" style=width:80px;font-size:10px;margin:0px;padding:0px; onclick=
"if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar';}" />
</div>

<div>
<div class="spoiler" style=display:none;>
AQUI ESCRIBEN TODO EL CONTENIDO QUE OCULTARAN YA SEA UN CHAT, REPRODUCTOR,ETC
</div>
</div>


ejemplo:http://jrztd.jimdo.com/secci%C3%B3n-html/



Codigo para que tus visitantes pongan sus nombres y luego el mensaje que tu desees (RECOMIENDO)

<Script language="JavaScript">
mensagem = prompt("Por favor, ingresa tu nombre",'');
if (mensagem==null) {
document.write("¡Hola, visitante!"
}else{
if (mensagem=='') {
document.write("<b><font face=arial size=2 color=#000000>¡Hola, visitante!</font></b>"
}else{
document.write("<b><font face=arial size=2 color=#000000>¡Hola"+mensagem+"! AQUI EL TEXTO QUE DESEES </font></b>";
}
}
</script>


Ejemplo: pagina de inicio de JrzTD


Boton con color

<form>
<input type="submit" name="button" value="JrzTD.jimdo.com" style=color:#000000;background-color:#FFFFFF />
</form>



Saludo al visitante (RECOMIENDO)

<font size=2 face="arial"><b><script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
today = new Date()
if(today.getMinutes() < 10){
pad = "0"}
else
pad = "";
document.write ;if((today.getHours() >=6) && (today.getHours() <=9)){
document.write("¡Buen día!"
}
if((today.getHours() >=10) && (today.getHours() <=11)){
document.write("¡Buen día!"
}
if((today.getHours() >=12) && (today.getHours() <=19)){
document.write("¡Buenas tardes!"
}
if((today.getHours() >=20) && (today.getHours() <=23)){
document.write("¡Buenas noches!"
}
if((today.getHours() >=0) && (today.getHours() <=3)){
document.write("¡Buenas noches!"
}
if((today.getHours() >=4) && (today.getHours() <=5)){
document.write("¡Buenas noches!"
}
// -->
//]]>
</script></b></font>


Esto le aparecera segun el horario si es de dia buenos dias y asi sucesivamente.
ejemplo: arriba del buscador de mi web JrzTD





CODIGO PARA BANNER DE TU CABECERA WEB O IMAGEN QUE ELIGAS

<center>
<a href="aqui va la direccion de tu web o sito para que al darle clic valla ahi" target="_blank"><img src="aqui pones exactamente la direccion de la imagen " alt="width=" height="60" border="0" /></a>
</center>





TEXTO EN MOVIMIENTO

<marquee id="ejemplo" direction="right">Texto que saldra</marquee>

Ejemplo: http://jrztd.jimdo.com/secci%C3%B3n-html/ al final de la pagina



TEXTO EN MOVIMIENTO DE ARRIBA ABAJO O VICEVERSA

<marquee id="ejemplo" direction="up">
AQUI VA EL TEXTO QUE DESEES </marquee><a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='down';">
Hacia abajo
</a>---
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='up';">
Hacia arriba
</a>




Como mover el titulo de la Pagina ( en donde esta el titulo de la pag, en la pestaña del explorador )

Para jimdo: Primero inicie sesion, luego de click en (1) Ajustes y despues en (2) editar Head. (3) pegar codigo

Para blogger u otra pagina: primero iniciar secion, luego editar plantilla, cuando le salga la plantilla (en html) pueden precionar F3(buscar) colocan "<head>" y justo despues de ese artilugio pegamos el codigo.




Este es el codigo a copiar


<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
<!--
var txt="Los mejores juegos, tutoriales programas en JrzTD ";
var espera=200;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
// -->

function MM_displayStatusMsg(msgStr) { //v1.0
status=msgStr;
document.MM_returnValue = true;
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
//]]>
</script>




Boton Personalizado con enlaces


<font face="Arial, Helvetica, sans-serif" size=2><script language="JavaScript" type="text/javascript">
//<![CDATA[

var timerID = null
var timerRunning = false
var charNo = 0
var charMax = 0
var lineNo = 0
var lineMax = 4
var lineArr = new Array(lineMax)
var urlArr = new Array(lineMax)

lineArr[1] = "Codigos Hmtl"
urlArr[1] ="http://jrztd.jimdo.com/seccion-html/"
lineArr[2] = "descargas"
urlArr[2] = "http://jrztd.jimdo.com/descargas"
lineArr[3] = "google"
urlArr[3] = "http://google.com.co"
lineArr[4] = "no le des clic"
urlArr[4] = "http://images4.fanpop.com/image/photos/17600000/Justin-Bieber-justin-bieber-17673608-500-543.jpg"

var lineText = lineArr[1]
function StartShow() {
StopShow()
ShowLine()
timerRunning = true
}
function FillSpaces() {
for (var i = 1; i <= lineWidth; i++) {
spaces += " "
}
}
function StopShow() {
if (timerRunning) {
clearTimeout(timerID)
timerRunning = false
}
}
function ShowLine() {
if (charNo == 0) {
if (lineNo < lineMax) {
lineNo++
}
else {
lineNo = 1
}
lineText = lineArr[lineNo]
charMax = lineText.length
}
if (charNo <= charMax) {
document.formDisplay.buttonFace.value = lineText.substring(0, charNo)
charNo++
timerID = setTimeout("ShowLine()", 100)
}
else {
charNo = 0
timerID = setTimeout("ShowLine()", 3000)
}
}
function GotoUrl(url)
{
top.location.href = url
}
document.write("<form name="formDisplay">";
document.write("<input type="button" name="buttonFace" value="&{lineText}" size=18 onClick="GotoUrl(urlArr[lineNo])">";
document.write("</form>";
StartShow();
//]]>
</script></font>



Con este codigo podras crear un boton y dentro de el habran varios enlaces, es decir el boton cambiara de links a diferentes webs que tu coloques. Puedes colocar tantos Tantos links como desees.

ejemplo: http://jrztd.jimdo.com/secci%C3%B3n-html/ al final de la pagina.


Codigo para ventana de texto

<div align="center"> <div id="preview" style= "BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; WORD-SPACING: 1px; OVERFLOW: scroll; BORDER-LEFT: #000 1px solid; WIDTH: 180px; PADDING-TOP: 1px; BORDER-BOTTOM: #000 2px solid; HEIGHT: 150px; TEXT-ALIGN: left"> <p> AQUI VA LO Q TU QUIERAS CAMBIA ESTE TEXTO. </p> </div></div>

Ejemplo:
CODIGOS HTML



Fanbox de Twitter y Facebook flotante y con efecto deslizante profesional (USO Y RECOMIENDO)

Codigo <head>


<script type="text/javascript" src="http://cositasarchivos.***/FanBox_lateral/jquery.1.5.2.js"></script>
<script type="text/javascript">

//<![CDATA[

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>
<style type="text/css">

/*<![CDATA[*/

.slide_likebox {

float:right;

width:288px;

height:345px;

background: url(http://u.jimdo.com/www52/o/s652635095b9644f4/img/i7768e1451057b562/1346701809/thumb/image.png) no-repeat !important;

display:block;

right:-250px;

padding:0;

position:fixed;

top: 180px;

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>


NOTA: No editar codigo head, solo si tienes conocimiento html


Codigo html widget


<div class="slideface_likebox"> <div style=color:rgb(255,255,255);padding:8px5px0pt50px;> <div class='facelikeboxwrap'> <span><iframe src= "http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Fjrztd%2F293978624047040&amp;show_faces=true&amp;header=false&amp;stream=false&amp;width=350&amp;height=350&amp;colorscheme=light&amp;border_color=%23AAAAAA#" scrolling="no" frameborder="0" style=border:none;overflow:hidden;width:248px;height:300px;background-color:transparent;></iframe></span> </div> </div></div>
<div class="slide_likebox"> <div style=color:rgb(255,255,255);padding:8px5px0pt50px;> <div class='likeboxwrap'> <span><script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script></span> <div id="twitterfanbox"> <span><script type="text/javascript">

//<![CDATA[

fanbox_init("jrztd1";

//]]>

</script></span> </div> </div> </div></div>



Cambiar: www.facebook.com%2Fpages%2Fjrztd%2F293978624047040

Ejemplo: si tu pagina es: http://www.facebook.com/HolaSoyGerman
vendria quedando así: www.facebook.com%2Fpages%2FHolaSoyGerman%2
o si es: http://www.facebook.com/pages/JrzTD/293978624047040 

quedaria así: www.facebook.com%2Fpages%2Fjrztd%2F293978624047040

Para ver los resultados tienen que actualizar la página pulsando F5 o hacer click en Vista previa.

ejemplo: http://jrztd.jimdo.com/

Espero les alla gustado esta recopilacion de codigos, visita mi web para mas codigos html.
http://jrztd.jimdo.com

9 comentarios - Codigos html para tu web

@Dola +1
GRACIAS jestuk, voy a probar algunos.-
@LaauchaH
Yo no diria que son profesionales...
@alexander18181 +1
No son profesionales pero están muy buenos.
@jacrjacr
hola,muy bueno el tuto ,pero el cuadro de diago no me salio