Yo Androide

CÓDIGOS HTML geniales para tu PÁGINA WEB O BLOG

Si tienes una página web o blog y quieres agregar codigos HTML para que quede más bonita, has llegado al lugar correcto.

Tenemos un listado de codigos HTML para decorar tu pagina web o blog completa. Códigos que puedes usar en tu Blogger, WordPress, Wix y en tu web con HTML nativo.

Algunos códigos son gadgets o widgets en HTML y Javascript que le darán vida a tu sitio web. Anteriormente estos códigos se escribían en bloc de notas, los cuales podíamos pegar para obtener un mejor diseño con estos trucos para HTML.

Cuando recién empece a programar paginas web vivía buscando código HTML que me facilitaran la vida, asi que decidí hacer una recopilación de los mejores códigos html para mi web, así que espero que te sean de utilidad.

Listado de códigos HTML para insertar en nuestra pagina web o blog

 

Codigos html para paginas web o blogs

 

A continuación les muestro unos códigos HTML, CSS y JavaScript para mejorar sus páginas web. Solo tienes que ir a la consola de tu pagina web o en el caso de los blogs ir a la consola del blog y darle en añadir gadget o widget.
 

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

Este código desactiva el click derecho dentro de tu pagina web, así nadie podrá copiar nada de tu pagina web o  blog.

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

2. Muestra al visitante un mensaje (alerta) al entrar a nuestra página 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. Inserta el texto que quieras con Movimiento (efecto 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. Inserta 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 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 muestra 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 o Blog

<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) Araña animada 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. Con este codigo podras poner en tu web la camara que te vigila en la parte superior de tu web copien el codigo y lo pegan en texto
Recomendado:   Usar teléfono Android como emulador en App Inventor

 

26. Con este codigo centraras tu web ¿como? facil ... tienes que pegar este codigo en texto por encima de la pagina

27. fondo en tu web solo pegen el URL de la imagen donde dise AQUI PEGA TU IMAGEN

 

28. Para el mensaje de bienvenida (Aparecerá al entrar en tu página web)se pone en texto por arriba de la pagina

29. Para el despedida (al salir de tu web), ponlo en texto por abajo de la pagina

 

 

30. Con este code puedes poner los codigo o lo que sea asi en cuadro asi como tengo los codigo yo.

31. con este codigo puedes aser que tu web alumbre por los lados lo pagas en texto

 

32. Con este code pones juegos de pacman en tu web

33. ABRIR UNA WEB DENTRO DE TU WEB UNA WEB DENTRO DE OTRA

 

34. NOMBRE DE PAGINA WEB EN MOVIMIENTO

35. TEXTO EN MOVIMIENTO PARA WEB

Recomendado:   Crear archivo ejecutable de proyecto Java en Eclipse con imágenes

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

 

37. Con este codigo centraras tu web ¿como? facil ... tienes que pegar este codigo en texto por encima de la pagina

38. CON ESTE CODIGO PODRAS ASER QUE LLUEVA EN TU WEB ITENTALO LO PEGAS DONDE QUIERAS

 

39. Pantalla que tiembla: Al insertar este código, cada vez que entremos en la Web se producirá una especie de terremoto en el explorador. Un efecto interesante para atraer la atención de nuestros visitantes.

40. Con este código insertamos un pequeño relojito que indica la cuenta regresiva de las horas, minutos y segundos que faltan para finalizar el día.

Recomendado:   Como imprimir en consola/terminal en Java

41. Ocultar el titulo de tu web hola les dejo este code para que el titulo de tu web no destruya tu cabezal con el texto lo que tienes que hacer es pegar este code en texto por encima de la pagina

 

42. Quitar boton intro Miren este es el codigo lo pegan al principio de la Fuente HTML de la extra Intro o intro-Flash

 

43. Subir imagenes a ImagesHack desde tu web Al insertar este codigo en tu web podras subir imagenes directamente a IMAGESHACK.

44. Botón Colorido ¿Cansado del botón siempre gris? Ahora con CSS podés definir cualquier color para tus botones. Ellos combinarán más con tu página y son muy fáciles de crear.Copia el código que sigue y pegalo dentro de la etiqueta de formulario de tu página:

 

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

 

 
Esta lista fue hecha de recopilar código de varios sitios web con código libre.

 

Si quieres conocer otros artículos parecidos a CÓDIGOS HTML geniales para tu PÁGINA WEB O BLOG puedes visitar la categoría Blogger.

Entradas relacionadas

Go up