Convocatoria SENA 2022
Maquinaria pesada 2022
Inscripciones Abiertas 2022

Cuarta parte :Trucos HTML Para Tu Sitio Web

 

Como ya te dije anteriormente, y dejo claro en el título, aquí te daré muchos trucos. He recopilado estos códigos HTML para páginas web de varios foros y páginas webs, los que aquí dejo son todos los que logre que funcionen. Igualmente si tienes problema con alguno de estos trucos dímelo en la caja de comentarios así lo reviso. 🙂

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

2- 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="https://2.bp.blogspot.com/_qgZA1ny_dAs/S0QFsV1WD7I/AAAAAAAADhs/ZBKrnpzqBrk/s200/arrow8a.png" style=position:fixed;bottom:0;right:0;/></a> </div>

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

4- 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';}" />gt;    </div><div>    <div class="spoiler" style="display: none;">        AQUI ESCRIBEN TODO EL CONTENIDO QUE OCULTARAN YA SEA UN CHAT, REPRODUCTOR,ETC</div></div>

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

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

7- Añade el juego Mario Bross en tu sitio web. (Mas juegos en Games68.com)

Super Mario flash | juegos online gratuito con Games68.com

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

9- Interesante código HTML para insertar lluvia en tu pagina 

zzz

<!-- Lluvia en el blog -->
<div style="display:none;">
<script type="text/javascript" src="https://blogparts.giffy.me/0117/parts.js"></script><p style="text-align: center;margin:0;padding:0;">
<a href="http://giffy.me/baby/"><img style="border:0;" src="https://blogparts.giffy.me/0117/parts.gif" alt="降水確率100%ブログパーツ;" /></a></p>
<p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;">
[PR] <a href="http://typing.twi1.me/" rel="nofollow">楽しくタイピング練習!</a></p>
</div>
<iframe allowtransparency='true' frameborder='0' marginheight='0' marginwidth='0' scrolling='no' src='https://audio-play.blogspot.com/p/lluvia.html' style='height:0; width:0;'></iframe>
<!-- Fin lluvia en el blog -->

10- Al pasar el mouse por un link se desplegará una ventana explicando la función del mismo

<p> <script language="JavaScript"><!-- function escribe(frase){document.desplaza.cuadro.value=frase; } // --></script> </p> <table border="0"> <tr> <td width="200"><p align="center"><strong>Opciones.</strong></p><p><a href="http://www.pauluk.8k.com" onmouseover="escribe(' Página principaln ----------------nn Cuando hagas Click en este enlace irás directamente a la página de inicio de mi web');">Página principal</a><br> <a href="http://www.suweb.net/users/pauluk/trucosprin.htm" onmouseover="escribe(' Trucos PCn -----------nn Este enlace te llevará a la página de Trucos PC en la que podés encontrar muchos más trucos interesantes para realizar e incluir en tus páginas web');">Trucos PC</a><br> <a href="http://www.suweb.net/users/pauluk/GLOSARIO.HTM" onmouseover="escribe(' Glosarion -------------- nn Diccionario de Términos Informáticos. Enterate el significado de esas palabras de computación que decís todos los días pero que no sabés exactamente qué significa.');">Glosario</a><br> </p> </td> <td><form name="desplaza"> <p><textarea name="cuadro" rows="8" cols="30" wrap="physical"></textarea></p> </form> </td> </tr> </table>

11- Inserta una caja 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>

12- Abrir una pagina en Popup

Esto va entre las etiquetas <head> y </head>

<head><script> function abrir() { open('pagina.html','','top=300,left=300,width=300,height=300') ; } </script></head>

Debes colocar el parámetro onload=”abrir()” en de esta forma:

13- 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="https://widgets.amung.us/classic.js"; document.getElementsByTagName("head")[0].appendChild(s); })();</script>

14- Inserta un Pequeño y Bonito Calendario en tu Página Web

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

15- Efecto de sangre cayendo desde la parte superior de tu web

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

16- El Pájaro de Twitter 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/emprender_100'; var twitterThisText =''; tripleflapInit(); </script>

17- 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="RubicusFrontendIns.location='URL del enlace 1'; return true;" type="checkbox" />Título del enlace 1 </li> <li style="background-image:none;"> <input value="ON" onclick="RubicusFrontendIns.location='URL del enlace 2'; return true;" type="checkbox" />Título del enlace 2 </li> <li style="background-image:none;"> <input value="ON" onclick="RubicusFrontendIns.location='URL del enlace 3'; return true;" type="checkbox" />Título del enlace 3 </li> <li style="background-image:none;"> <input value="ON" onclick="RubicusFrontendIns.location='URL del enlace 4'; return true;" type="checkbox" />Título del enlace 4 </li> </ul> </form>

18- Logra un efecto de subrayado cuando pasas el mouse sobre un link

<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">Hola Sonso.</a><br> <a href="l2.htm">Como estas.</a><br> <a href="l3.htm">Carl.</a><br> </p>

19- Código HTML para insertar pequeño widget de Horoscopos en tu web

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

20- Un solo botón y varios enlaces

Fijate lo que hay que cambiar, es fácil.

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

21- Widget para mostrar la fecha exacta en tu web

Para la edición del este código HTML ingresa al sitio web (tamaño, zona horaria) https://www.zeitverschiebung.net/es/clock-widget

<div style="text-align:center;padding:1em 0;"> <h3><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/es/timezone/america--argentina--cordoba"><span style="color:gray;">Hora actual en</span><br />America/Argentina/Cordoba</a></h3> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=es&size=medium&timezone=America%2FArgentina%2FCordoba" width="100%" height="115" frameborder="0" seamless></iframe> </div>

22- Crear un botón para abrir un enlace

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

23- Inserta un formulario de suscripción para tus visitantes

<div id="after_submit"></div> <form id="contact_form" action="#" method="POST" enctype="multipart/form-data"> <div class="row"> <label class="required" for="name">Your name:</label><br /> <input id="name" class="input" name="name" type="text" value="" size="30" /><br /> <span id="name_validation" class="error_message"></span> </div> <div class="row"> <label class="required" for="email">Your email:</label><br /> <input id="email" class="input" name="email" type="text" value="" size="30" /><br /> <span id="email_validation" class="error_message"></span> </div> <div class="row"> <label class="required" for="message">Your message:</label><br /> <textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br /> <span id="message_validation" class="error_message"></span> </div> <input id="submit_button" type="submit" value="Send email" /> </form>

24- Código para un banner que se abre en una nueva ventana

Debes modificar las Urls y el tamaño del banner.

<a href=”COLOCA AQUI URL DE PAGINA DE DESTINO” target=”_blank”><img style=”opacity: 1;” src=”COLOCA AQUI URL DE BANNER” width=”468″ height=”60″ /></a>

25- Colocar el buscador de Google

<form action="http://www.google.com/search" method="get" target="_blank"> <table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td width="23%" align="right" valign="top"><img src="Imge/Google_Logo.gif" width="128" height="53" alt="Google Logo" /></td> <p> <td width="77%" align="center"> <input type="text" name="q" size=75 maxlength="255" value=""> <input type="submit" name="btnG" value="Buscar En Google"><span style=font-size:-1;><br /></span></td> </tr> </table> <!-- SiteSearch Google --> </form>

26- Colocar una cuenta regresiva

Para editar este código te recomiendo ingresar a la web https://countingdownto.com/es editarlo desde allí.

<iframe width="300" height="154" src="https://w2.countingdownto.com/2734593" frameborder="0"></iframe>

Bueno creo que te dejé varios trucos y códigos HTML para tu página web. No hemos llegado a dejar a los 100 códigos pero son los suficientes para que debas invertir un buen rato en revisarlos todos. Lo más importante es que hayas aprendido el como implementarlos, luego según la necesidad existe san Google para encontrar el código adecuado 😉

Espero que toda esta info haya sido de utilidad, y de ser así compártelo que no cuesta nada.


 

Deja un comentario