Blog Animando: Codigos HTML

Mostrando entradas con la etiqueta Codigos HTML. Mostrar todas las entradas

Aquí les traigo varios códigos para poner sus textos en movimiento están bien padres. los pueden utilizar para agregar un saludo de bienvenida en su blog o para agregar algún aviso.. ya que con la forma dinámica que tienen son muy fácil de visualizarlos espero les gusten saludos..
Los podemos pegar en un gatget/Javascript

Codigo#1:

<marquee behavior="alternate">Ejemplo de Texto en Movimiento</marquee>

Ejemplo de Texto en Movimiento ejemplo#1

Codigo#2:

<br /><marquee direction="up">Texto en movimiento</marquee><br />

Texto en movimiento ejemplo #2



Codigo#3:

<br /><marquee direction="down">Texto en movimiento ejemplo 3</marquee><br />

Texto en movimiento ejemplo #3


Codigo#4:

<br /><marquee behavior="alternate" direction="up" width="80%">
<marquee direction="right" behavior="alternate">Texto en movimiento ejemplo #4</marquee>
</marquee><br />

Texto en movimiento ejemplo #4

Lluvia de estrellas

Hola! es un gusto estar de nuevo escribiéndoles,en esta ocasión yo estaba pensando en que me gustaría ver un blog asi bien nice! que se viera con un fondo como si estuviera en el espacio pero que ala vez mostrara estrellas o una lluvia de estrellas en movimiento tipo 3D y pues déjenme decirles que si se logro he encontrado el código y pues se los quiero compartir pero claro antes los invito a ver el BlogDePruebas para que vean el efecto.

Para agregar este efecto colocamos el siguiente codigo antes de </body>

y listo.

_____________________________________________

_____________________________________________________________________________________________________________

espero les funciones superbien cualquier duda o algo aii me pueden contactar a mi correo

Fuego en el blog

Nuevamente aqui les traigo un codigo mas para que decoren su blog en hallowen o cuando ustedes quieras

estos codigos nos lo facilito Ciudad Blogger y son muy padres para darle un aspecto mas macabro a nuestro blog

Haz clic en BlogDePruebas para ver ejemplo:

Para añadir este efecto en tu blog solo entra en Diseño | Edición de HTML y antes de</body> pega lo siguiente:

_________________________________________________________________________________________________________

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaZHO6jFN6ySU_skCIvcikF7mO9VtFSzce08dbAaN9ezXZCn8pPUxRISaLVe-8my2y-WXg5Ub2cKn6ZPkT7qJ0Rpg35jxZsQCigKzaimUDdj6elaJ8PkZk9FrmqUwhuwich2VZ_ChvGG8/'

style='position:fixed; bottom:0; left:0; width:100%; height:100px;'/>

_________________________________________________________________________________________________________

Cartel de bienvenida

En esta ocasion me encontre un cartel de bienvenida para agregarlo en nuestro blog este cartel es de G.P.F 

ver ejemplo en Blogdepruebas 

Para poner este cartel en tu blog sólo entra en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pega lo siguiente:
_______________________________________________

<div style="background:#000; font-size:30px; text-transform: uppercase; font-weight: bolder;"><script language="JavaScript1.2">

//Neon Lights Text II by G.P.F. (gpf@beta-cc.de)
//visit http://www.beta-cc.de

var message="Bienvenidos a Blog Animando"
var neonbasecolor="gray" //color de la letra
var neontextcolor="yellow" //color de la luz neon
var neontextcolor2="#FFFFA8" //color del reflejo
var flashspeed=100 // velocidad en milisegundos
var flashingletters=3 // numero de letras alumbradas en neon
var flashingletters2=1 // numero de letras alumbradas con el reflejo (0 to disable)
var flashpause=0 // pausa entre cada repeticion en milisegundos

///No editar nada mas///

var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor

if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script></div>
________________________________________________
por ultimo solo correjimos lo que esta de color rojo por nuestro mensaje y listo!

Como añadir gatget

Platicando con mi amigo Alan sobre los gatget y me dijo que pues no sabia como agregarlos, por eso decidí agregar esta post sobre como se hace espero les sirva a todos y aquí les muestro los procedimientos:

Para esto vemos que hay veces que publico algunos codigos con funciones que se deben añadir a un gatget HTML/JAVASCRIPT para añadir estos gatget primero nos vamos a Diseño, ELEMENTOS DE LA PAGINA...

Añadir gatget:....

Y buscamos uno que diga HTML/javascript

Y listo pegamos nuestros codigos y damos guardar...

Asi de esta forma es como podemos añadir nuestro Gatget en HTML/Javascript

Código para que nos enlacen

Con este código ayudaremos a otros bloggero a que nos enlacen en sus blogs con un pequeño banner.

Para esto vamos a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pegamos este código:

_______________________________________________

______________________________________________________________________________________________

Después modificamos lo que vemos de color amarillo y ya despues de haber colocado nuestro banner y todo lo demás obtendríamos un resultado como este:

Si deseas puedes enlacarme en tu blog! se te agradecería

Nieve en el blog

Estaba viendo, en que ya mero se acerca la navidad y seria bueno decorar nuestro blog con algo referente, me encontré en Ciudad Blogger con estos códigos que quiero compartirlos con ustedes espero les sirvan.
Ejemplo en Blog de pruebas

Solo copia y pega estos codigos antes de </head>

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

/*
DHTML Snowstorm! OO-style Jascript-based Snow effect
----------------------------------------------------
Version 1.4.20091115 (Previous rev: v1.3.20081215)
Code by Scott Schiller - http://schillmania.com
----------------------------------------------------

Initializes after body onload() by default (via addEventHandler() call at bottom.)
To customize properties, edit below or override configuration after this script
has run (but before body.onload), eg. snowStorm.snowStick = false;

*/

var snowStorm = null;

function SnowStorm() {

// --- PROPERTIES ---

this.flakesMax = 150; // Limit total amount of snow made (falling + sticking)
this.flakesMaxActive = 64; // Limit amount of snow falling at once (less = lower CPU use)
this.animationInterval = 33; // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
this.flakeBottom = null; // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
this.targetElement = null; // element which snow will be appended to (document body if null/undefined) - can be an element ID string, or a DOM node reference
this.followMouse = true; // Snow will change movement with the user's mouse
this.snowColor = '#fff'; // Don't eat (or use?) yellow snow.
this.snowCharacter = '•'; // • = bullet, · is square on some systems etc.
this.snowStick = true; // Whether or not snow should "stick" at the bottom. When off, will never collect.
this.useMeltEffect = true; // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
this.useTwinkleEffect = false; // Allow snow to randomly "flicker" in and out of view while falling
this.usePositionFixed = false; // true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported

// --- less-used bits ---

this.flakeLeftOffset = 0; // amount to subtract from edges of container
this.flakeRightOffset = 0; // amount to subtract from edges of container
this.flakeWidth = 8; // max pixel width for snow element
this.flakeHeight = 8; // max pixel height for snow element
this.vMaxX = 5; // Maximum X velocity range for snow
this.vMaxY = 4; // Maximum Y velocity range
this.zIndex = 0; // CSS stacking order applied to each snowflake

// --- End of user section ---

// jslint global declarations
/*global window, document, navigator, clearInterval, setInterval */

var addEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
return o.addEventListener(evtName,evtHandler,false);
}:function(o,evtName,evtHandler) {
return o.attachEvent('on'+evtName,evtHandler);
});

var removeEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
return o.removeEventListener(evtName,evtHandler,false);
}:function(o,evtName,evtHandler) {
return o.detachEvent('on'+evtName,evtHandler);
});

function rnd(n,min) {
if (isNaN(min)) {
min = 0;
}
return (Math.random()*n)+min;
}

function plusMinus(n) {
return (parseInt(rnd(2),10)==1?n*-1:n);
}

var s = this;
var storm = this;
this.timers = [];
this.flakes = [];
this.disabled = false;
this.active = false;

var isIE = navigator.userAgent.match(/msie/i);
var isIE6 = navigator.userAgent.match(/msie 6/i);
var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i)));
var isWin9X = navigator.appVersion.match(/windows 98/i);
var isiPhone = navigator.userAgent.match(/iphone/i);
var isBackCompatIE = (isIE && document.compatMode == 'BackCompat');
var noFixed = ((isBackCompatIE || isIE6 || isiPhone)?true:false);
var screenX = null;
var screenX2 = null;
var screenY = null;
var scrollY = null;
var vRndX = null;
var vRndY = null;
var windOffset = 1;
var windMultiplier = 2;
var flakeTypes = 6;
var fixedForEverything = false;
var opacitySupported = (function(){
try {
document.createElement('div').style.opacity = '0.5';
} catch (e) {
return false;
}
return true;
})();
var docFrag = document.createDocumentFragment();
if (s.flakeLeftOffset === null) {
s.flakeLeftOffset = 0;
}
if (s.flakeRightOffset === null) {
s.flakeRightOffset = 0;
}

this.meltFrameCount = 20;
this.meltFrames = [];
for (var i=0; i<this.meltFrameCount; i++) {
this.meltFrames.push(1-(i/this.meltFrameCount));
}

this.randomizeWind = function() {
vRndX = plusMinus(rnd(s.vMaxX,0.2));
vRndY = rnd(s.vMaxY,0.2);
if (this.flakes) {
for (var i=0; i<this.flakes.length; i++) {
if (this.flakes[i].active) {
this.flakes[i].setVelocities();
}
}
}
};

this.scrollHandler = function() {
// "attach" snowflakes to bottom of window if no absolute bottom value was given
scrollY = (s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));
if (isNaN(scrollY)) {
scrollY = 0; // Netscape 6 scroll fix
}
if (!fixedForEverything && !s.flakeBottom && s.flakes) {
for (var i=s.flakes.length; i--;) {
if (s.flakes[i].active === 0) {
s.flakes[i].stick();
}
}
}
};

this.resizeHandler = function() {
if (window.innerWidth || window.innerHeight) {
screenX = window.innerWidth-(!isIE?16:2)-s.flakeRightOffset;
screenY = (s.flakeBottom?s.flakeBottom:window.innerHeight);
} else {
screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;
screenY = s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);
}
screenX2 = parseInt(screenX/2,10);
};

this.resizeHandlerAlt = function() {
screenX = s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;
screenY = s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;
screenX2 = parseInt(screenX/2,10);
};

this.freeze = function() {
// pause animation
if (!s.disabled) {
s.disabled = 1;
} else {
return false;
}
for (var i=s.timers.length; i--;) {
clearInterval(s.timers[i]);
}
};

this.resume = function() {
if (s.disabled) {
s.disabled = 0;
} else {
return false;
}
s.timerInit();
};

this.toggleSnow = function() {
if (!s.flakes.length) {
// first run
s.start();
} else {
s.active = !s.active;
if (s.active) {
s.show();
s.resume();
} else {
s.stop();
s.freeze();
}
}
};

this.stop = function() {
this.freeze();
for (var i=this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'none';
}
removeEvent(window,'scroll',s.scrollHandler);
removeEvent(window,'resize',s.resizeHandler);
if (!isOldIE) {
removeEvent(window,'blur',s.freeze);
removeEvent(window,'focus',s.resume);
}
};

this.show = function() {
for (var i=this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'block';
}
};

this.SnowFlake = function(parent,type,x,y) {
var s = this;
var storm = parent;
this.type = type;
this.x = x||parseInt(rnd(screenX-20),10);
this.y = (!isNaN(y)?y:-rnd(screenY)-12);
this.vX = null;
this.vY = null;
this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
this.vAmp = this.vAmpTypes[this.type];
this.melting = false;
this.meltFrameCount = storm.meltFrameCount;
this.meltFrames = storm.meltFrames;
this.meltFrame = 0;
this.twinkleFrame = 0;
this.active = 1;
this.fontSize = (10+(this.type/5)*10);
this.o = document.createElement('div');
this.o.innerHTML = storm.snowCharacter;
this.o.style.color = storm.snowColor;
this.o.style.position = (fixedForEverything?'fixed':'absolute');
this.o.style.width = storm.flakeWidth+'px';
this.o.style.height = storm.flakeHeight+'px';
this.o.style.fontFamily = 'arial,verdana';
this.o.style.overflow = 'hidden';
this.o.style.fontWeight = 'normal';
this.o.style.zIndex = storm.zIndex;
docFrag.appendChild(this.o);

this.refresh = function() {
if (isNaN(s.x) || isNaN(s.y)) {
// safety check
return false;
}
s.o.style.left = s.x+'px';
s.o.style.top = s.y+'px';
};

this.stick = function() {
if (noFixed || (storm.targetElement != document.documentElement && storm.targetElement != document.body)) {
s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
} else if (storm.flakeBottom) {
s.o.style.top = storm.flakeBottom+'px';
} else {
s.o.style.display = 'none';
s.o.style.top = 'auto';
s.o.style.bottom = '0px';
s.o.style.position = 'fixed';
s.o.style.display = 'block';
}
};

this.vCheck = function() {
if (s.vX>=0 && s.vX<0.2) {
s.vX = 0.2;
} else if (s.vX<0 && s.vX>-0.2) {
s.vX = -0.2;
}
if (s.vY>=0 && s.vY<0.2) {
s.vY = 0.2;
}
};

this.move = function() {
var vX = s.vX*windOffset;
s.x += vX;
s.y += (s.vY*s.vAmp);
if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check
s.x = 0;
} else if (vX < 0 && s.x-storm.flakeLeftOffset<0-storm.flakeWidth) {
s.x = screenX-storm.flakeWidth-1; // flakeWidth;
}
s.refresh();
var yDiff = screenY+scrollY-s.y;
if (yDiff<storm.flakeHeight) {
s.active = 0;
if (storm.snowStick) {
s.stick();
} else {
s.recycle();
}
} else {
if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
// ~1/1000 chance of melting mid-air, with each frame
s.melting = true;
s.melt();
// only incrementally melt one frame
// s.melting = false;
}
if (storm.useTwinkleEffect) {
if (!s.twinkleFrame) {
if (Math.random()>0.9) {
s.twinkleFrame = parseInt(Math.random()*20,10);
}
} else {
s.twinkleFrame--;
s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame%2===0?'hidden':'visible');
}
}
}
};

this.animate = function() {
// main animation loop
// move, check status, die etc.
s.move();
};

this.setVelocities = function() {
s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
};

this.setOpacity = function(o,opacity) {
if (!opacitySupported) {
return false;
}
o.style.opacity = opacity;
};

this.melt = function() {
if (!storm.useMeltEffect || !s.melting) {
s.recycle();
} else {
if (s.meltFrame < s.meltFrameCount) {
s.meltFrame++;
s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
} else {
s.recycle();
}
}
};

this.recycle = function() {
s.o.style.display = 'none';
s.o.style.position = (fixedForEverything?'fixed':'absolute');
s.o.style.bottom = 'auto';
s.setVelocities();
s.vCheck();
s.meltFrame = 0;
s.melting = false;
s.setOpacity(s.o,1);
s.o.style.padding = '0px';
s.o.style.margin = '0px';
s.o.style.fontSize = s.fontSize+'px';
s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
s.o.style.textAlign = 'center';
s.o.style.verticalAlign = 'baseline';
s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
s.refresh();
s.o.style.display = 'block';
s.active = 1;
};

this.recycle(); // set up x/y coords etc.
this.refresh();

};

this.snow = function() {
var active = 0;
var used = 0;
var waiting = 0;
var flake = null;
for (var i=s.flakes.length; i--;) {
if (s.flakes[i].active == 1) {
s.flakes[i].move();
active++;
} else if (s.flakes[i].active === 0) {
used++;
} else {
waiting++;
}
if (s.flakes[i].melting) {
s.flakes[i].melt();
}
}
if (active<s.flakesMaxActive) {
flake = s.flakes[parseInt(rnd(s.flakes.length),10)];
if (flake.active === 0) {
flake.melting = true;
}
}
};

this.mouseMove = function(e) {
if (!s.followMouse) {
return true;
}
var x = parseInt(e.clientX,10);
if (x<screenX2) {
windOffset = -windMultiplier+(x/screenX2*windMultiplier);
} else {
x -= screenX2;
windOffset = (x/screenX2)*windMultiplier;
}
};

this.createSnow = function(limit,allowInactive) {
for (var i=0; i<limit; i++) {
s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes),10));
if (allowInactive || i>s.flakesMaxActive) {
s.flakes[s.flakes.length-1].active = -1;
}
}
storm.targetElement.appendChild(docFrag);
};

this.timerInit = function() {
s.timers = (!isWin9X?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]);
};

this.init = function() {
s.randomizeWind();
s.createSnow(s.flakesMax); // create initial batch
addEvent(window,'resize',s.resizeHandler);
addEvent(window,'scroll',s.scrollHandler);
if (!isOldIE) {
addEvent(window,'blur',s.freeze);
addEvent(window,'focus',s.resume);
}
s.resizeHandler();
s.scrollHandler();
if (s.followMouse) {
addEvent(document,'mousemove',s.mouseMove);
}
s.animationInterval = Math.max(20,s.animationInterval);
s.timerInit();
};

var didInit = false;

this.start = function(bFromOnLoad) {
if (!didInit) {
didInit = true;
} else if (bFromOnLoad) {
// already loaded and running
return true;
}
if (typeof s.targetElement == 'string') {
var targetID = s.targetElement;
s.targetElement = document.getElementById(targetID);
if (!s.targetElement) {
throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
}
}
if (!s.targetElement) {
s.targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);
}
if (s.targetElement != document.documentElement && s.targetElement != document.body) {
s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions
}
s.resizeHandler(); // get bounding box elements
s.usePositionFixed = (s.usePositionFixed && !noFixed); // whether or not position:fixed is supported
fixedForEverything = s.usePositionFixed;
if (screenX && screenY && !s.disabled) {
s.init();
s.active = true;
}
};

function doStart() {
s.start(true);
}

if (document.addEventListener) {
// safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe.
document.addEventListener('DOMContentLoaded',doStart,false);
window.addEventListener('load',doStart,false);
} else {
addEvent(window,'load',doStart);
}

}

snowStorm = new SnowStorm();
//]]>
</script>

Imagen flotante en el blog

En esta ocasion andaba buscando como agregar una imagen flotante a nuestro blog y visitando     Ciudad blogger me encontre con estos codigos que nos serviran para agregar nuestras imagenes flotantes en la ezquina inferior derecha.

  veremos una imagen de mario bros en elBlog de ejemplos

Solo copia y pega estos codigos antes de </body> para esto entra a Diseño>Edicion HTML> y pega

Lo que vemos de color rojo es lo que vamos a sustituir por la URL de la imagen,vemos que se repiten tres veces es para agregar URL diferentes asi al entrar a nuestro Blog siempre cambiara la imagen(En el blog de pruebas solo agregamos una eso es opcional)

Meta tags en blogger

Buscaba en la red sobre los meta tags y me encontre con esto que quiero compartirselo

Los meta-tags son etiquetas dentro de una web que  contienen información útil para los robots y que sólo es visible para  ellos. Estas etiquetas HTML permiten la correcta indexación de nuestro  sitio en los motores de búsqueda.

En ellos hay información tales como  el título del blog, las palabras clave, el autor, el idioma, la  descripción, etc. Es por ello que todo blogger que desee tener buen  posicionamiento debe tener todos los meta-tags que considere necesarios.

Agregar  los meta-tags en Blogger es sencillo y no requiere conocimientos  avanzados, sólo debemos elegir cuáles meta-tags vamos a usar. Aquí les  dejo algunos que yo uso y su descripción:

Solo copia y pega antes de <HEAD>

 

Title es el título del blog

Keywords contiene las palabras clave con las que te quieres posicionar.

Subject es sobre qué se trata el blog, o sea el tema.

Description es la descripción del sitio.

Author es el nombre del autor, o sea tu nombre.

Language es el idioma del blog, en este caso es es español.

Revisit-After es el tiempo que se sugiere que tarden en regresar los robots a tu web.

Y los demás son órdenes para los robots de Google, MSN, Yahoo y Google Images permitiéndoles que indexen todo el contenido.

Editor Html online

Hola aqui les dejo un link en donde puenden checar cualquier codigo HTML sin necesidad de ingresar a tu blog, asi te ahorras mas tiempo en entrar y probar los codigos.

Checa con estos codigos de ejemplo, copia y pega en el programa.

http://htmledit.squarefree.com/

     <style type="text/css">

body {margin:0; padding:0;

font-family:Verdana, Arial, sans-serif;

font-size:small;}

#header {

padding:20px;

background:#333;

border-bottom:1px solid #fff;}

#header h1 {

padding:0; margin:0;

color:#ccc;

font-family:Verdana, serif;

font-weight:bold;

font-size:190%;}

#nav {

float:left;

width:100%;

margin:0; padding:0;

list-style:none;

background:#ccc;

border-bottom:1px solid #999;}

#nav li {

float:left; margin:0; padding:0;}

#nav a {

float:left;

display:block;

padding:6px 30px 6px 5px;

text-decoration:none;

font-weight:bold;

font-size:90%;

color:#666;

background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAUHpWCB7T3fkRfgYdSnR72iqZ4QsnYuufA_calBQcgM8hyphenhyphenTuNa2fltCGEauSv0ElW_B8VAuYbW5ojdBsnmQNOS1LsQApNjrAhfFIYZxpMR8usVa3z2AAdatoTiXlmlUuaZgoxJCqtQ4M/s400/nav_slant.gif)no-repeat top right;

}

#nav #nav-1 a {padding-left:20px;}

#nav a:hover {color:#000;}

</style>

<div id="header">

<h1>Desde aqui puedes checar tus codigos!</h1>

</div>

<ul id="nav">

<li id="nav-1"><a href="#">Inicio</a></li>

<li id="nav-2"><a href="#">Directorio</a></li>

<li id="nav-3"><a href="#">Contacto</a></li>

<li id="nav-4"><a href="#">Acerca de</a></li>

</ul>

Páginas

Anuncios

Turorialhtml

Texto en movimiento