Editar página de inicio

CÓDIGOS HTML PARA TU WEB

A continuación te mostrare códigos HTML, CSS y JavaScript para incorporar pequeñas funcionalidades a tu páginas web, como un código para añadir un mensaje de alerta o uno para crear una marquesina.

Estos códigos para paginas web han sido recopilados, con el único y simple propósito de volverlos a compartir.

Espero que te sirvan. Si alguno no funciona como debiera te pido que por favor me lo notifiques enviando un mensaje a este correo electrónico.

 NOTARecuerda eliminar el texto que aparece al final cuando pegas un código en tu web:

(Leer Mas: www.todopatuweb.net/codigos/) 

1. Librate de los copiones. No dejar seleccionar el texto y bloquear "Click Der" y "Ctrl".

<BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false"> </body>

 

2. Muestra al visitante un mensaje (alerta) al entrar a tu sitio web.

<BODY onLoad="alert('Bienvenido a mi Página Web. Disfruta el contenido');" onUnLoad="confirm('Gracias por tu visita, espero que no sea la última');">

 

3. Pon en tu web un texto con Movimiento (Arriba-Abajo).

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

 

4. Inserta el famoso botón de "Ir Arriba". Imagen modificable (solo cambia la URL).

</script></div><div class="n"><div class="n"> <a href="#" title="Ir arriba"><img alt="Ir arriba" border="0" src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S0QFsV1WD7I/AAAAAAAADhs/ZBKrnpzqBrk/s200/arrow8a.png" style=position:fixed;bottom:0;right:0;/></a> </div>

 

5. Añade una atractiva Marquesina con el texto que quieras.

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

 

6. Contenido oculto (ejemplo: código html) con botón "Mostrar".

<div class="pre-spoiler">    <span style="color: #00ffff;">Clic Para Mostrar El Contenido</span> <input type="button" value="Mostrar Contenido" style="width:80px;font-size:15px;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>

 

7. Titulo en la barra de direcciones con movimiento.

<SCRIPT LANGUAGE="JavaScript">var txt=" TITULO DE LA WEB ";var espera=140;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();</script>

 

8. Insertar un simple botón: "Imprimir Página Actual".

<h2><a href="javascript:print()"><span style="color: rgb(0, 255, 255);"><span style="font-family: Arial;"><span style="font-size: x-large;">Imprimir Contenido</span></span></span></a></h2>

 

9. Añádele un increíble efecto eléctrico a tus enlaces.

<style type="text/css"> a.navbar:hover{color:red; font-weight:bold;background-image:url(http://www.nackvision.com/myspace/links/lightningline.gif);} a:hover, a.redlink:hover, a.navbar:hover {background-image:url(http://www.nackvision.com/myspace/links/lightningline.gif); text-decoration:none; border:0px solid;} a:hover img {background-image:url(http://www.nackvision.com/myspace/links/lightningline.gif); filter:alpha(finishopacity=0, style=2); } </style>

 

10. Texto (modificable) con un Efecto Parpadeante.

<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">AÑADE AQUI EL TEXTO QUE QUIERAS</font></p>

 

11. Haz Que una Imagen se agrande al pasar el Cursor. Solo cambia la URL.

<img src="AQUI VA LA URL DE LA IMAGEN" onmouseover="this.width=500;this.height=400;" onmouseout="this.width=200;this.height=150;" width="200" height="100" />

 

12. Cambiar una imagen a otra al darle clic. Cambia las URLs.

<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()""> 

 

13. Inserta una caja como esta para poner códigos HTML.

<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: 400px; PADDING-TOP: 1px; BORDER-BOTTOM: #000 2px solid; HEIGHT: 150px; TEXT-ALIGN: left"> <p> AQUI VA LO QUE TU QUIERAS, CAMBIA ESTE TEXTO. </p> </div></div>

 

14. Traductor de Google para tu Página Web o Blog.

<div><div id="google_translate_element"></div><script type="text/javascript">//<![CDATA[function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'es'}, 'google_translate_element');}//]]></script> <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script></div>

 

15. Botón social para compartir tu página web o blog en Taringa!.

<script type="text/javascript">(function(){var x=document.createElement('script'), s=document.getElementsByTagName('script')[0];x.async=true;x.src='http://widgets.itaringa.net/share.js';s.parentNode.insertBefore(x,s)})()</script></div><div><t:sharer data-layout="big"></t:sharer>

 

16. Muestra un Mensaje (Alerta) al Hacer clic en un enlace (Antes de ir).

<a href="http://aqui va la dirección URL.com" onclick="javascript:alert('Aqui va el Mensaje');">Titulo del Vínculo</a>

 

17. Aumenta el Tamaño del Texto de un Enlace al Pasar el Cursor.

<div id="vinc"><a href="http://direcciondetusitio.com" onmouseover="javascript: void(document.getElementById('vinc').style.fontSize='3em')" onmouseout="javascript: void(document.getElementById('vinc').style.fontSize='1em')"> Vínculo</a></div>

 

18. Pequeño widget que da en tiempo real el número de usuarios activos en tu web.

<script id="_wauwaa">var _wau = _wau || []; _wau.push(["classic", "zltotgacrhd9", "waa"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/classic.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

 

19. Botones Sociales de Twitter, Facebook, Google+ y Linkedin para Compartir.

<script type="text/javascript" src="http://100widgets.com/js_data.php?id=255"></script>

 

20. Inserta un Pequeño y Bonito Calendario en tu Página Web.

<script type="text/javascript" src="http://100widgets.com/js_data.php?id=106"></script>

 

21. Inhabilitar el botón derecho con mensaje en pantalla completa.

<script>
// Inhabilitar el botón derecho
var DADrccolor = "#F1F1F1";
var DADrcimage = "https://lh5.googleusercontent.com/-70ZyK7Gt4XE/VI8sxCvJGII/AAAAAAAAGd0/RZA9e6iSJBM/s300/superheroe.png";
</script>
<script type="text/javascript" src="http://yourjavascript.com/2122535051/antirightclick.js"></script>

 

22. Efecto de sangre callendo desde la parte superior de tu web.

<img border='0' src='http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i0425d9e289ed1713/1297446540/std/image.gif' style='position:fixed; top:0; left:0; width:100%; height:150px;'/>

 

23. El Pajaro de Twiiter volando por toda tu página web o blog.

<script src="https://sites.google.com/site/ayudabloggers/scripts/tripleflap.js" type="text/javascript"></script>
<script type="text/javascript">
var birdSprite='https://lh3.googleusercontent.com/-StM0Csn4ktc/TYNPdDXzNGI/AAAAAAAAAds/QPZ0-DbHgtc/s1600/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>

 

24. (Para Halloween) Una araña bajando desde la parte superior de tu sitio.

<img border='0' src='//lh5.ggpht.com/_qgZA1ny_dAs/TM2UGNH7ORI/AAAAAAAAEuc/yRvKD_gAIg8/spiders.gif' style='position:fixed; top:0; left:0;'/>

 

25. Efecto de corazones de color rojo cayendo (para San Valentin).

<script language='javascript' type='text/javascript'>

//<![CDATA[

// Script original de Eloi Gallés Villaplana adaptado por -truco95.jimdo.com


var numero = 8

var velocidad = 40

var imagenamor = " http://i1041.photobucket.com/albums/b416/conanaz72/GIF/heart.gif "


var ns4arriba = (document.layers) ? 1 : 0

var ie4arriba = (document.all) ? 1 : 0

var dombrowser = (document.getElementById) ? 1 : 0


var dx, xp, yp

var am, stx, sty

var i, doc_ancho = 1024, doc_alto = 768

function amor() {

                establece_dimensiones()

                dx = new Array()

                xp = new Array()

                yp = new Array()

                am = new Array()

                stx = new Array()

                sty = new Array();

   

                for (i = 0; i < numero; ++ i) {

                      
dx[i] = 0

                      
xp[i] = Math.random()*(doc_ancho-50)

                      
yp[i] = Math.random()*doc_alto

                      
am[i] = Math.random()*20

                      
stx[i] = 0.02 + Math.random()/10

                      
sty[i] = 0.7 + Math.random()

                      
if (document.layers) {


                                 
if (i == 0) {

                                                      
document.write("<layer name="dot"+ i +"" left="15" ")

                                                      
document.write("top="15" visibility="show"><img src="")

                                                             
document.write(imagenamor + "" border="0"></layer>")


                                 
} else {


                                                 
document.write("<layer name="dot"+ i +"" left="15" ")


                                                 
document.write("top="15" visibility="show"><img src="")


                                                        
document.write(imagenamor + "" border="0"></layer>")


                                 
}


                          } else if (document.all
|| document.getElementById) {


                                 
if (i == 0) {


                                                 
document.write("<div id="dot"+ i +"" style="POSITION: ")


                                                 
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ")


                                                 
document.write("visible; TOP: 15px; LEFT: 15px;"><img src="")


                                                        
document.write(imagenamor + "" border="0"></div>")


                                 
} else {


                                                 
document.write("<div id="dot"+ i +"" style="POSITION: ")


                                                 
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ")


                                                 
document.write("visible; TOP: 15px; LEFT: 15px;"><img src="")


                                                        
document.write(imagenamor + "" border="0"></div>")


                                 
}


                          }

     }

   

                corazon()

}

function corazon() {

                for (i = 0; i < numero; ++ i) {

                      
yp[i] += sty[i];

                      
if (yp[i] > doc_alto) {

                                      
xp[i] = Math.random()*(doc_ancho-am[i]-30)

                                      
yp[i] = 0

                                      
stx[i] = 0.02 + Math.random()/10

                                      
sty[i] = 0.7 + Math.random()

                                      
establece_dimensiones()

                      
}

 

                      
dx[i] += stx[i];

 

                             

                      
if ( document.all ) {

                                      
var imagen = eval("dot" + i )

                                      
imagen.style.posLeft = xp[i] + am[i]*Math.sin(dx[i])

                                      
imagen.style.posTop = yp[i]

                      
}

                             

                      
else if ( document.layers ) {

                                      
var imagen = eval("document.dot" + i)

                                      
imagen.left = xp[i] + am[i]*Math.sin(dx[i])

                                      
imagen.top = yp[i]

                      
}

                             

                      
else if ( document.getElementById ) {

                                      
var imagen = document.getElementById( "dot" + i)

                                      
imagen.style.left = xp[i] + am[i]*Math.sin(dx[i]) + 'px'

                                      
imagen.style.top = yp[i] + 'px'

                             
}

                }


                setTimeout("corazon()", velocidad)

}

function establece_dimensiones() {

                if (self.innerHeight) {

                      
doc_ancho = self.innerWidth - 50

                      
doc_alto = self.innerHeight - 21

                } else if (document.documentElement &&
document.documentElement.clientHeight) {

                      
doc_ancho = document.documentElement.clientWidth

                             
doc_alto = document.documentElement.clientHeight - 25

       

                } else if (document.body) {

                      
doc_ancho = document.body.clientWidth

                      
doc_alto = document.body.clientHeight - 25

                }

}

//]]>

</script>

<script language='javascript' type='text/javascript'>

amor()

</script>

 

26. Pon una cuenta regresiva en tu página web. Busca en el código la fecha y cambiala junto con los textos.

<center><span class="Apple-style-span" style="color: red; font-family: 'Trebuchet MS', sans-serif;">Faltan solamente</span></center><center><script language="JavaScript" type="text/javascript">
//<![CDATA[
TargetDate = "05/15/17 09:10 PM";
BackColor = "white";
ForeColor = "black";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Días, %%H%% Horas, %%M%% Minutos, %%S%% Segundos.";
FinishMessage = "Feliz fin del mundo!!!";
//]]>
</script><script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js" type="text/javascript">
</script></center><center><span class="Apple-style-span" style="color: red; font-family: 'Trebuchet MS', sans-serif;">Para el fin del mundo</span></center>

 

27. Saludo al visitante dependiendo de la hora (ej: Buenas tardes).

<center>
<span style="font-size: large;"><span class="Apple-style-span" style="color: red;"><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></span></span></center>

 

28. Opciones en casilla que abren un enlace al seleccionarse. Sigue lo que se dice en el código para modificar los textos.

<form>
<ul>
<li style="background-image:none;">
<input value="ON" onclick="window.location='URL del enlace 1'; return true;" type="checkbox" />Título del enlace 1
</li>

<li style="background-image:none;">
<input value="ON" onclick="window.location='URL del enlace 2'; return true;" type="checkbox" />Título del enlace 2
</li>

<li style="background-image:none;">
<input value="ON" onclick="window.location='URL del enlace 3'; return true;" type="checkbox" />Título del enlace 3
</li>

<li style="background-image:none;">
<input value="ON" onclick="window.location='URL del enlace 4'; return true;" type="checkbox" />Título del enlace 4
</li>
</ul>
</form>

 

29. Insertar un menu despegable con boton de continuidad. Para cambiar los textos tan solo sigue lo que hay en el código.

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

function CC_go(form) {var myindex=form.dest.selectedIndex
window.open(form.dest.options[myindex].value, target="_parent", "toolbar=yes,scrollbars=yes,location=yes"); }

//]]>
</script>
<form name="CC_LinkForm" id="CC_LinkForm">
<select name="dest" size="1">
<option selected="selected" value="">
Selecciona Algo
</option>
<option value=" enlace número uno">
Titulo número 1
</option>
<option value="enlace número 2">
Título número 2
</option>
<option value="enlace número 3">
Titulo número 3
</option>
</select>
<p>
<input type="button" value="Ir ahí" onclick="CC_go(this.form)" />
</p>
</form>

 

30. Colocar una imagen flotante (estatica) con opción para cerrar. Sustituye donde dice "URL de tu imagen aqui" por la dirección URL de la imagen a poner.

<div id="anuncio" style="right:100px; bottom:0px; position: fixed;">
    <div align="right" style="margin-bottom:-30px;">
        <b><a href="javascript:closeit()"><font face="Courier" size="1">#CERRAR</font></a></b>
    </div>
    <br />
    <img border="0" src="URL de tu imagen aquí" alt="" /> <script type="text/javascript">
//<![CDATA[
    function closeit(){
    document.getElementById("anuncio").style.visibility = "hidden";
    }
    //]]>
    </script>
</div>

<div class="clear">
</div>

 

31. Pequeño widget de Horoscopos.

<p align="center">    <font color="#0C0505"><b><font class="navtext"><font face="Verdana" style="font-size:
9pt">HOROSCOPO</font><font class="content" size="1"><br /></font></font> <font class="navtext"><font face=    "Verdana"
size="1">Descubre Tu Destino Para</font><font class="navtext"><br /></font> <font face="Verdana" size="1"><font class="navtext">El Dia
de    Hoy</font><br /></font></font></b></font><b><font class="navtext" color="#0C0505"><font face="Verdana"
color="#0C0505" size="1"><br /></font> <select style=    "border-style:solid; border-width:1px; VISIBILITY: visible; font-family:Verdana; font-size:8pt;
color:#0c0505; font-weight:bold; padding-left:5px; padding-right:6px; padding-top:1px; padding-bottom:1px; background-color:#ffffff"    onchange=
"if(this.options[1].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/aries_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[2].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/taurus_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[3].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/gemini_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[4].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/cancer_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[5].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/leo_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[6].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/virgo_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[7].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/libra_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[8].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/scorpio_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[9].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/sagittarius_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[10].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/capricorn_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[11].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/aquarius_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[12].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/pisces_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');"
name="SucreVip" size="1">        <option selected="selected">            Elige tu signo  
   </option>        <option>            Aries        </option>
     <option>            Tauro        </option>    
<option>            Geminis        </option>        <option>
         Cancer        </option>        <option>        
Leo        </option>        <option>            Virgo    
</option>        <option>            Libra        </option>  
   <option>            Escorpio        </option>    
<option>            Sagitario        </option>        <option>
         Capricornio        </option>        <option>        
Acuario        </option>        <option>            Piscis    
</option>    </select></font></b></p>

<table>    <tr>        <td height="27" class="edit_rb_footer" id="edit_rb_footer_1">    
</td>    </tr></table>;

 

32. Un solo botón y varios enlaces. Fijate lo que hay que cambiar, es facil.

<center><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><script language="JavaScript" type="text/javascript">
//<![CDATA[
<!-- scrip presentado por truco95.jimdo.com -->
var timerID = null
var timerRunning = false
var charNo = 0
var charMax = 0
var lineNo = 0
var lineMax = 3
var lineArr = new Array(lineMax)
var urlArr = new Array(lineMax)
lineArr[1] = "Texto número 1"
urlArr[1] = "Enlace número 1"
lineArr[2] = "Texto número 2"
urlArr[2] = "Enlace número 2"
lineArr[3] = "Texto número 3"
urlArr[3] = "Enlace número 3"
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)
{
RubicusFrontendIns.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></span></center>

 

33. Texto que cambia al actuaizarse la página. Edita los textos en el código.

<script language="JavaScript" type="text/javascript">
//<![CDATA[
hoje = new Date()
numero_de_textos = 4
segundos = hoje.getSeconds()
numero = segundos % numero_de_textos
if (numero == 0){
texto = "Texto número 1"
}
if (numero == 01){
texto = "Texto número 2"
}
if (numero == 02){
texto = "Texto número 3"
}
if (numero == 03){
texto = "Texto número 4"
}
document.write('' + texto +'')
//]]>
</script>

 

34. Widget para mostrar la fecha exacta en tu web.

<p style="text-align: center;">    <iframe width="200" height="200" scrolling="no"
src="http://pagina-del-dia.euroresidentes.es/gadget-dia-de-hoy.php?fondo=Rojo.png&amp;texto=FFFFFF" frameborder="0"></iframe></p>

 

35. Crear un boton para abrir un enlace. Configuralo.

<input type="button" value="Abrir" onclick="window.open('Aqui la direccion que quieres que se abra')" />

 

36. Actualizar página con botón. Texto modificable.

<form method="post"> 
<input type="button" value="Actualizar Página" onclick="RubicusFrontendIns.location.reload()" />
</form>

 

37. Lista de enlaces en movimiento (marquesina) facil de entender para modificar.

<marquee direction="up" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="1" style="border: 2px solid #000; height: 200px; padding: 3px; text-align: center; width: 200px;">

<a href="Enlace 1">Título 1</a><br />

<a href="Enlace 2">Título 2</a><br />
<a href="Enlace 3">Título 3</a>
</marquee>

 

38. Cerrar la ventana en la que se está con botón. Texto editable.

<input type="button" value="Cerrar Ventana" onclick="window.close()" />

 

39. Redireccionar a otra página con cuenta regresiva (3 s). Hay que configurar.

<form name="redirect" id="redirect">
<center>
<font face="Arial">Serás redireccionado en<br />
<br /></font>
<form>
<font face="Arial"><input type="text" size="3" name="redirect2" /></font>
</form>
<font face="Arial">segundos</font>
</center>
<script type="text/javascript">
//<![CDATA[
<!--

var targetURL="http://truco95.jimdo.com/"
var countdownfrom=5


var currentsecond=document.redirect.redirect2.value=countdownfrom+1
function countredirect(){
if (currentsecond!=1){
currentsecond-=1
document.redirect.redirect2.value=currentsecond
}
else{
window.location=targetURL
return
}
setTimeout("countredirect()",1000)
}

countredirect()
//-->
//]]>
</script> <!--webbot bot="HTMLMarkup" endspan -->
</form>

 

40. Enmarcar un texto con borde configurable.

<p style="border: ridge #FF0000 2px">    Aquí va lo que quieres enmarcar</p>

 

¿Buscabas mas que pequeñas funciones de códigos?

En en este sitio hay mucho mas que eso. Aquí se te muestra todo lo que puedes poner en tu web, sin importar con que programa esta creada.

Los códigos básicos (como los anteriores) están pasando de moda. Ve algunos widgets o plugins para tu página web increibles.

A continuación algunos de los artículos con lo que posiblemente andes buscando.

- Chat HTML

En este post encontraras herramientas para añadirle un chat HTML5 a tu página web totalmente responsive.

- Formulario de contacto (flotante)

Se muestra en este otro como poner un formulario de contacto, pero de maneras mas atractivas, el cual es personalizable al cien por ciento.

- Botones para compartir - Sociales

En este aprendes a poner los famosos botones para compartir de redes sociales, algo que todo sitio web ahora debe tener.

- Caja de comentarios HTML

Conoce como hacer e incorporar una caja de comentarios en tu blog o web fácilmente. En este articulo están todos los pasos.

- Sistema de votación por estrellas

Como hacer que la gente valore eficazmente tu contenido, producto o servicio, eso es lo que hay en este post. Aprende a añadir a tu web un sistema de calificación.

- Widget de posts relacionados

En este hayaras para tener el famoso plugin de artículos relacionados automático en tu blog.

- Completo foro de discusión

En este ultimo se conoce una gran herramienta para que puedas incorporar un foro en tu web o blog.

Bueno, finalmente solo espero que tanto los códigos basicos html como los "widgets" mostrados puedan ayudarte a ti y a tu página web.

Pronto mas códigos HTML

    

Suscribete para recibir los proximos gratis en tu e-mail: