Añadir texto informativo a una imagen subida en Blogger

Seguro que en algún blog de los que visitáis habréis visto que al poner el puntero sobre una imagen aparece un pequeño texto con información adicional sobre la imagen. Esto solo es válido en IE que interpreta el atributo "alt" como "title" en Firefox habría que añadir a la imagen el título "title".
Simplemente has de subir la imagen que quieras a Blogger, (en vista HTML esa imagen se verá como código), pues bien, solo has de buscar en ese código: alt="", e incluir entre las comillas el texto que deseas que aparezca como información de tu imagen.

Insertar líneas en las entradas

Puedes insertar una línea en tu blog para separar lo que quieras logrando un bonito efecto, tan solo has de usar este código: <hr> y obtendrás tu línea:





Si quieres cambiar su color o hacerla más ancha:
<hr color="green" size=7>
y la verás así:





Si no le indicas lo contrario la línea se ajustará ella solita al tamaño del post o del espacio donde la publiques, vamos a hacerla más pequeñita :
<hr color="orange" size=3 width="190" >





Si pones dos <hr> seguidos consigues un efecto de doble línea muy bonito:





Otra línea fácil de conseguir y que queda muy bien:

<hr style="border: medium dotted; color: #666666;" />




Y otra:

<hr style="border: medium dashed; color: yellow;" />




También podemos emplear un "div" para conseguir una línea de separación simple y bonita:

<div style="border-top: 1px dashed #000; height: 20px; margin-top: 20px;">
</div>
Rosa in memoriam

Imagen con "tembleque"

Un curioso efecto para imagenes, al pasar el puntero sobre ellas se ponen a temblar.
Hay que pegar este código entre <head> y </head> yo lo he puesto justo antes de ]]></b:skin>
Código:
<style><br />.shakeimage{<br />position:relative<br />}<br /></style><br /><script language="JavaScript1.2"><br /><br /><br />//configura aquí la intensidad del movimiento aumentando o disminuyendo el número<br />var rector=5<br /><br />///////No escribas a partir de aquí///////////<br />var stopit=0 <br />var a=1<br /><br />function init(which){<br />stopit=0<br />shake=which<br />shake.style.left=0<br />shake.style.top=0<br />}<br /><br />function rattleimage(){<br />if ((!document.all&&!document.getElementById)||stopit==1)<br />return<br />if (a==1){<br />shake.style.top=parseInt(shake.style.top)+rector<br />}<br />else if (a==2){<br />shake.style.left=parseInt(shake.style.left)+rector<br />}<br />else if (a==3){<br />shake.style.top=parseInt(shake.style.top)-rector<br />}<br />else{<br />shake.style.left=parseInt(shake.style.left)-rector<br />}<br />if (a<4)<br />a++<br />else<br />a=1<br />setTimeout("rattleimage()",50)<br />}<br /><br />function stoprattle(which){<br />stopit=1<br />which.style.left=0<br />which.style.top=0<br />}<br /><br /></script>

Y esto se lo añades a tu imagen:
<img src="URL DE TU IMAGEN" class="shakeimage" onMouseOver="init(this);rattleimage()" onMouseOut="stoprattle(this)">

Prueba el efecto "tembleque" (IE).

Rosa in memoriam

Còmo quitar autocompletar del mozilla firefox?

Herramientas >> Opciones >> arriba seleccioná Privacidad:

Si campo "Historial" figura >> "Recordará el historial", cambiar por >> "Usará la configuración personalizada para el historial", una vez seleccionado este campo aparecerán más opciones y luego desactivá donde dice "Recordar la información introducida en formularios y barra de búsqueda"

Mini-iconos

En la página de n.DESIGN studio encontraras 320 mini-iconos de uso libre. Estos mini-iconos están diseñados en 14×14 pixeles con el fondo transparente.

Eres libre de utilizar estos iconos para tu sitio personal. Sin embargo, si vas a utilizar más de 10 mini- iconos en tu sitio, debes poner un link a su página.

Esto más o menos es lo que pone en la página (ya sabéis el traductor de Google...), no obstante allí puedes leer los términos de uso antes de descargarte el zip.

Algunos iconitos de los que trae el pack son muy lindos.

Tablas con bordes originales

Habla con bordes punteados.

Código:
<table style="BORDER: red 6pt dotted" width="200" border="0"><br /><br /><tbody><tr><td> <br /><br /><br /><br />TEXTO <br /><br /><br /><br /></td></tr></tbody></table>

Resultado:




TEXTO


Tabla con borde de rayas.

Código:
<table style="BORDER: blue 6pt dashed" border="0" width="200"><br /><br /><tbody><tr><td> <br /><br /><br /><br />TEXTO <br /><br /><br /><br /> </td></tr></tbody></table>

Resultado:




TEXTO


Tabla con doble borde.

Código:
<div align="center"><br /><br /><table style="BORDER: green 4.5pt double; WIDTH: 170.8pt; HEIGHT: 134.8pt" border="0"><br /><br /><tbody><tr><td> <br /><br /><br /><br />TEXTO <br /><br /><br /><br /></td></tr></tbody></table> <br /><br /><br /><br /></div><br /><br />

 Resultado:



TEXTO

Tabla "cuadro"

Código:
<br /><table cellspacing="5" width="200" align="left" border="15"><br /><br /><tbody><tr><br /><br /><td valign="top"> <br /><br /><br /><br />TEXTO <br /><br /><br /><br /></td></tr></tbody></table><br /><br />

Resultado:



TEXTO









Se pueden modificar en los códigos los colores, posiciones, etc...

Rosa in memoriam

Si llegaste hasta acá y no lo encontraste lo que necesitás intentá buscarlo: