Códigos de HTML básicos

Listado de códigos básicos de los mas utilizados a la hora de crear un blog o página web.

CODIGO	EFECTO
<b>Texto en Bold</b>	Texto en negrita
<u>Texto Subrayado</u>	Letra Subrayada
<i>Texto en Italic</i>	Letra en Italic
<hr> Poner una línea
<center>Texto centrado</center>	Texto centrado
<img src="URL IMAGEN">
<a href="URL DE ENLACE">Zarabarandula</a>	Zarabarandula
<div align="left">Alinear a la izquierda </div>	Izquierda
<div align="right"> Alinear a la derecha</div>	Derecha
<table bgcolor="#80BFFF">	Color fondo de tabla
<span style="color: red;">Aquí texto</span>	Color de texto
<marquee>Texto</marquee>	Marquesina simple
<br>Parte una linea</br>	Parte una linea
<li>Define un artículo</li>	Define un artículo

Ver post completo >>

Botón o imagen con efecto pushbutton y url direccionada

Con este pequeño script conseguiremos que una imagen tenga el efecto pushbutton y ademas nos lleve a una dirección específica. Dicho efecto lo podéis comprobar en el título de este blog por ejemplo.El código es el siguiente:

Código
<a href="URL DEL SITIO"><br /> <img class="pushbutton" src="URL DE IMAGEN" /></a>

Ahora cambia la url del sitio y de la imagen. Terminado.

Ver post completo >>

Apad E7001 conocido también como iRobot

A simple vista no tiene nada que envidiarle al ya conocido iPad, si no todo lo contrario, tanto en diseño como en prestaciones está ala altura de cualquier producto de su categoría. Empecemos por su precio. El nuevo Apad E7001 cuesta 158,45 (Portes incluidos) lo que lo hace muy asequible tal y como está la economía hoy en día. Impresiona y mucho su aceleración gráfica y esto es debido a su procesador Rockchip RK2808 con 600 mhz de doble núcleo que asigna uno de ellos al apartado gráfico consiguiendo así mover cantidad de vídeos si tener que preocuparte de que se quede pillado como ocurre en la mayoría de tablets que no cuentan con la potencia de Apad o conocido también como iRobot...

Ver post completo >>

[Continue Leyendo...»]

Otro contador mas de posts y comentarios de Zarabarandula

Este es otro de los contadores que me fabrico para quien se lo quiera llevar. Es sencillo pero muy pijotero. Si lo quieres a que estas esperando.


Entramos en nuestro blog, Diseño, Añadir un nuevo gadget, y escogemos HTMLjavascript pegando ahí este código que muestro a continuación:

Ver post completo >>

[Continue Leyendo...»]

Crear efecto pushbutton en las imágenes de tu blog

El efecto pushbutton en una imagen (puede ver el ejemplo mas abajo) se consigue entrando en Diseño, Edición de HTML, buscamos ]]></b:skin> (Ctrl + f para buscar) y ANTES de esta linea pegamos este código:

.pushbutton:hover {
position: relative;
top: 1px;
left: 1px;
}

Guardamos los cambios y para poner una imagen en nuestro blog con este efecto la insertamos con el siguiente código:

<img class="pushbutton" src="URL de la imagen" />

Y listo.

Si quieres saber mas sobre el efecto pushbutton dirígete a este sitio Ciudad blogger. Ahí te explicarán como poner el efecto en todas las entradas o en todo el blog etc...

Ver post completo >>

Coloca un separador entre entrada y entrada

Si cree que su blog necesita un separador o dividers (como quiera llamarlo)entre posts y posts por que de esta forma conseguirá hacer mas visible el contenido de de cada entrada, haga lo siguiente.

Nos vamos a Diseño /Edición de HTML / Expandir plamtilla de artilugos y buscamos este código:

<b:include data='post' name='post'/>

justamente debajo de esa linea pegamos:

<center><img src='URL DE LA IMAGEN'/></center>

Ahora donde pone URL DE LA IMAGEN ya sabe lo que tiene que poner ¿No?

También puede encontrar imagenes de este tipo donde yo encontré la mía. Smashing Magazine

Ejemplos:









Pues se terminó. Ya tiene usted un separador entre entrada y entrada.

Ver post completo >>

Liga de futbol española

Vive la mejor liga de futbol del mundo en directo, conoce toda la actualidad del momento, los resultados, consulta la clasificación y el calendario de partidos, mantente bien informado con los vídeos mas destacados o simplemente llévate el Widgets a tu blog.

Ver post completo >>

[Continue Leyendo...»]

They There Delilah - Plain White T's

Este tema lo escuché a través de un anuncio de coches en televisión. La verdad es que es un tema joven y fresco pero a su vez cargado de melodía y rasgos rokeros nobles que lo convierten en algo íntimo y especial.





Recuerda que tienes que esperar 5 segundos a que termine la cuña de publicidad para que empiece el tema. Lo siento.

(((Play para escuchar)))


They there delilah
Plain Witw T's

 Enlaza esta canción
http://www.goear.com/listen/7f08511/they-there-delilah-plain-white-ts

Ver post completo >>

Brothers in arms-Dire Straits

Temazo de tranqui de los Dire Straits. Canción para escuchar reflexionando relajadamente en un buen sillón con una buena cerveza.




Recuerda que tienes que esperar 5 segundos a que termine la cuña de publicidad para que empiece el tema. Lo siento.


(((Play para escuchar)))


Brothers in arms
Dire Straits

 Enlaza esta canción
http://www.goear.com/listen/2a53e88/brothers-in-arms-dire-straits

Ver post completo >>

Ocultar o eliminar la barra superior de blogger (Navbar)

Esta barra que aparece en la parte superior de nuestro blog y que está puesta por defecto por blogger, casi nunca se adapta a nuestra estética de diseño. Por eso yo la quité. Seguí estos pasos:

 Buscar el siguiente código en Diseño/Edición HTML

<head>

Justo debajo del código indicado pega lo siguiente:

<style type='text/css'><br /> #navbar-iframe{<br /> height: 0px;<br /> visibility: hidden;<br /> display: none;<br /> }<br /> </style>

Y listo, la barra habrá desaparecido.
Deja un comentario si te ha servido de ayuda. Gracias.

¡Ah! esto lo vi en: BlogandWeb

Ver post completo >>

Jugar a futbol profesional

Ver post completo >>

[Continue Leyendo...»]

Defensa Militar

Ubica estratégicamente a cada las torres para evitar que sea invadido el cuartel. Presiona click sobre los iconos de la parte inferior para ubicar las torres, o agregar murallas.

Ver post completo >>

[Continue Leyendo...»]

Cambiar tono a sciphone i68

Yo tengo un teléfono de estos y al principio cuando me compré el bicho me las  vi un poco canutas asta que di con la forma de cambiarle el condenado tonito.

Si tu quieres cambiar el tono de tu sciPhone i68, lo que tienes que hacer es seguir estos sencillos pasos (Ahora). 

Ir a :

 encargado o mis documentos, clik en el icono que abre tu tarjeta de memoria donde tienes el MP3, buscas el archivo de música que quieres instalar, lo abres y seleccionas REENVIAR. Clikea perfil de usuario.

Después cierras todo (o anterior) y vas a:

PERFILES, seleccionas general, modificar requisitos, disposición del tono elegir que SIM 1 call o SIm 2 call (la línea que vas a cambiar el tono)

Y  ya estaa!!!  Es un lio, pero es la forma de cambiar el tono.

Ver post completo >>

Quitar el marco y las sombras a las imágenes del blog (entradas)

Estaba rabiando por quitar los anti estéticos marcos y sombras que traen por defecto las imagenes de los posts en las nuevas plantillas blogger (a quien le le ocurriría ponérselas) y en la gran mayoría de  blog encontraba lo mismo.
entrar en Plantilla/Edición de HTML y localizar esta parte del código:


.post img { 
padding:4px; 
border:1px solid #cde; 
}


Donde pone 1 en rojo cambiarlo por el valor 0.
Pinchamos en vista previa y si todo está bien guardamos la plantilla.


Cada uno se ha guiado por la plantilla que ha modificado como es lógico.
Pues bien, llevan razón todos pero yo utilizo una plantilla de las nuevas de blogger y con eso solo no ha bastado para retirar los dichosos marcos. He tenido cambiar también lo siguiente que está en rojo:


background: #fff;
  -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);
  -goog-ms-box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);
}


No se si es por que mi plantilla estará ya echa un kaos o es que hay que hacerlo así con estas nuevas plantillas de blogger.
No lo se. La cuestión es que a mi me a funcionado. Espero que a ti tambien.

Ver post completo >>

Efecto arco iris en tus enlaces (Links)

Este efecto lo ví por casualidad en el blog del señor Potro o sea Ciudad blogger. Me gustó y lo coloqué en mi blog. Se trata de reproducir un efecto arco iris al pasar el mouse por encima de algun enlace. A mi que me gustan estas chuminadas no pude resistir la tentación de probarlo. Se queda muy bien y de momento lo voy a dejar puesto. Si tu tambien quieres ponerlo en tu blog sigue estos sencillos pasos.




1º Entra a Diseño > Edición de HTML y pega justo antes de la etiqueta  </head>  el código que muestro a continuacion:

<script src='http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/rainbowlinks.js'/>


Andando, ya tienes un efecto animado que llenará de vida tu blog. A disfrutar.

¡Ah! esto lo vi en: Ciudad blogger

Ver post completo >>

Bob Esponja al rescate espacial

Dejo este jueguecillo por si mi hijo se cruza por aquí. Es un fanático de Bob Esponja.

Ver post completo >>

[Continue Leyendo...»]

Jump Mario 3

Aun recuerdo aquellas tardes de frío al salir de colegio, acudíamos como fieras a los recreativos del barrio. Allí pasábamos las horas muertas y uno que siempre estaba presente era Super Mario. ¡Que jodio! Pero ahí está el tío todavía, ya tiene sus años el macho. Pues resulta que vi el juegueito creo que fue en Minijuegos y me dije: ¿Porque no hacerle una entrada en homenaje a tantas horas que nos mantuvo entretenidos en otros tiempos y que todavía hoy seria capaz de engancharnos si lo trincamos un momento?
Pues aquí lo he colocado.

Ver post completo >>

[Continue Leyendo...»]

Juega a Ms. Pacman

Relájate un poco y échate unas partiditas a este clásico juego.

Ver post completo >>

[Continue Leyendo...»]

Expandir y contraer texto [+/-]

Para poder poner un título y hacer clíck sobre el expandiéndose así todo el contenido de texto solo necesitas dos pequeños códigos. A mi por ejemplo me ha venido muy bien para ahorrar espacio en el lateral de mi blog. Para isertar este truco en tu blog tienes que ir a editar HTML, expandir artilugios y buscas la etiqueta </head>. Puedes utilizar Ctrl + f  para buscarla. A continuación justo antes pegas el siguiente código:

<script type='text/JavaScript'><br /> function blmostrocult(blconted) {<br /> var c=blconted.nextSibling;<br /> if(c.style.display=='none') {<br /> c.style.display='block';<br /> } else {<br /> c.style.display='none';<br /> }<br /> return false;<br /> }<br /> </script>

Después guarda la plantilla y copia el ultimo código en tu blog, añadir gadget, html javascript.

<a onclick="return blmostrocult(this);" style="cursor: hand; cursor: pointer;">TITULO</a><div style="display: none;"><br /> CONTENIDO OCULTO<br /> </div>

Y listo. Sustituye TITULO y CONTENIDO OCULTO.

Via: Este truco lo vi en el balcón de Jaime, que a su vez lo vió en el escaparate de rosa. que...

Ver post completo >>