Botón "Volver atrás"

Código:

<input type="button" value="Volver atrás" onclick="history.back()" style="font-family: Verdana; font-size: 10 pt">

Resultado:


Puedes hacer el botón más grande o más pequeño sustituyendo en el código donde dice "font-size:" por el número que quieras (número mayor=botón más grande).

Visto en: Recursos blog.

Imagen de fondo en las entradas del Blog

Puedes poner una imagen de fondo en una entrada de tu blog para poder escribir encima de la imagenes como estas viendo en esta misma entrada, usando una tabla (table): Crea una entrada nueva en el blog, en el modo HTML pega este código: <table bordercolor="#000000" cellspacing="0" cellpadding="0" width="100%" background="URL_DE_IMAGEN" border="0"><tbody><tr><td><p>Texto Aquí</p></td></tr></tbody></table> Para poner la imagen que tu quieras entras a cualquier página de Internet y cuando veas la imagen que te gusta, haz click con el botón derecho sobre ella, eliges "guardar imagen como" después la subes a internet en cualquier pagina de alojamiento gratuito o en el mismo Blogger y copias la url de la imagen. Esa Dirección (URL) tienes que sustituirla en el código anterior por "URL_DE_IMAGEN" Donde pone "Texto aquí" escribes tu entrada, la imagen se irá expandiendo según vas escribiendo el texto. Si quieres que la imagen y, por tanto, tu entrada aparezca dentro de un cuadro, sustituye en el código donde dice "border=0", el cero por el ancho de borde que quieras. Queda chula, ¿no os parece?

La pizarra de Bart

Una web en la que puedes "aprovecharte" de la pizarra de Bart Simpsom para dejar el mensaje que quieras. ¿No es gracioso? A mi me ha encantado.

Lo he visto en recursosblog en la sección de utilidades.

Menú o lista.

Dos códigos sencillitos para hacer un menú desplegable y una lista. Donde pone ejemplo 1, 2, 3 ponéis lo que queráis.

Código uno:

<select name="select"><option>Ejemplo 1</option><option>Ejemplo 2</option><option>Ejemplo 3</option></select>

El resultado:

Ejemplo 1 Ejemplo 2 Ejemplo 3

Código dos:

<label><input type="radio" name="GrupoOpciones1" value="opción">Ejemplo 1</label><label><input type="radio" name="GrupoOpciones1" value="opción">Ejemplo 2 </label>

El resultado:

Ejemplo 1

Ejemplo 2

Efectos en texto (IE)

Efecto Shadow (Sombra)

<div style="FILTER: shadow(color=#3366FF, direction=135); WIDTH: 100%; HEIGHT: 50px" align="center"><span><em><strong>Pon aqui el texto</strong></em></span></div>


Resultado:

Pon aqui el texto

Color 1
Color de la sombra. Puedes usar los colores en ingles (Ejemplo: Red, Blue, Green, Black, etc) o también colores hexadecimales.
Direction
Establece la dirección de la sombra, puedes cambiar la dirección aumentando 45 grados.
Color 2
Color de la letra


Resplandor fuerte

<div style="filter: glow(color=BLUE, strength=30); WIDTH: 100%; HEIGHT: 100px;" align="center"><br /><br /><br /><br /><br /><br /><p><span style="font-family:Arial;font-size:180%;color:#CC00FF;"><em><strong>Aqui el texto</strong></em></span></div>


Resultado:

Aqui el texto

Color 1
Color del resplandor. Puedes usar los colores en ingles (Ejemplo: Red, Blue, Green, Black, etc) o también colores hexadecimales.

Strength
Establece los pixeles (1-100) de la intensidad del resplandor.

Color 2
Color de la letra


Resplandor Suave


<div style="filter: glow(color=BLUE, strength=8); width: 100%; height: 50px;" align="center"><span><em><strong>Texto a editar</strong></em></span></div>


Ejemplo:

Texto a editar

Color 1
Color del resplandor. Puedes usar los colores en ingles (Ejemplo: Red, Blue, Green, Black, etc) o también colores hexadecimales.

Strength
Establece en pixeles (1-100) la intensidad del resplandor.

Color 2
Color de la letra

En marco


<p style="border: ridge #FF0000 5px">HOLA AMIGOS BIENVENIDOS AL ESCAPARATE DE ROSA</p>


Ejemplo:

HOLA AMIGOS BIENVENIDOS AL ESCAPARATE DE ROSA.

Añadir a favoritos

Algunas veces, navegamos entre páginas buscando cualquier cosa y nos encontramos con sitios webs interesantes a los que más tarde no podemos volver porque se nos ha olvidado la dirección.
Para que eso no le suceda a nuestros visitantes podemos recordarle al navegante que tiene la opción de guardar nuestra url agregandonos a sus favoritos; y una forma muy facil de hacerlo es mediante un enlace, que al pulsarlo abra el menú de Agregar a Favoritos.
Puede hacerse mediante texto, botón e incluso una imagen que queramos.

Código para texto:

<span style="CURSOR: hand" onclick="window.external.AddFavorite('http://escaparatederosa.blogspot.com','El escaparate de Rosa');"><span>Añadir a favoritos</span></span>

Añadir a favoritos

Código para botón:


<span style="CURSOR: hand" onclick="window.external.AddFavorite('http://escaparatederosa.blogspot.com','El escaparate de Rosa');"><br /><br /><span><br /><br /><input onclick="javascript:agregar();" type="button" value="Añadir a favoritos">

El resultado:

Buscador Google en tu blog

Copia el código, pegalo donde quieras y ¡a buscar!

<form action="http://www.google.com/custom" method="get" target="_blank"> <table bgcolor="#ffffff"><tbody><tr><td valign="top" align="left" height="32"><a href="http://www.google.com/"><img alt="Google" src="http://www.google.com/logos/Logo_25wht.gif" align="middle" border="0" /></img></a><input maxlength="255" size="31" name="q"></input><input type="submit" value="Búsqueda" name="sa"></input><input type="hidden" value="pub-7695388068888144" name="client"></input><input type="hidden" value="1" name="forid"></input><input type="hidden" value="ISO-8859-1" name="ie"></input><input type="hidden" value="ISO-8859-1" name="oe"></input><input type="hidden" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;" name="cof"></input><input type="hidden" value="es" name="hl"></input></td></tr></tbody></table></form>

Resultado:

Imagen en el fondo de página

Como primer paso, deberemos escoger la imagen adecuada. Tendremos en cuenta dos factores: el peso de la imagen (lo que ocupa en Kbs) y su aspecto, en cualquier página de fondos para web puedes encontrar imágenes adecuadas.

Es aconsejable usar imágenes sencillas, que combinen con el estilo que queremos dar a nuestro blog y no "mareen" a nuestros visitantes.

[1] Una vez elegida la imagen de fondo, la subiremos a un alojamiento adecuado o la alojamos en Blogger.

[2] Una vez tengamos la url de nuestra imagen y volvemos en nuestro panel a Edición HTML, buscamos el siguiente código o el más parecido (ha de comenzar por body { el resto podría ser distinto al ejemplo) dentro del código de la plantilla:

body {
background:#fff;
margin:0;
}

[3] Añadimos en el código la url de nuestra imagen tal como se ve en el código siguiente, con paréntesis incluidos.

body {
background: url(aquí va la URL de nuestra imagen);
margin:0;
}

La imagen de fondo se repetirá tanto en vertical como en horizontal y cubrirá por completo el fondo del blog, por lo que hemos de tratar de usar una imagen adecuada tipo textura, por ejemplo, estaría bien...

Ocultar la barra de Blogger

Si no te gusta como queda la barra de Blogger (Navbar) puedes ocultarla con unas líneas de CSS.

El código CSS hay que pegarlo entre las etiquetas head en la plantilla del blog Edición html

Para evitar confusiones, lo mejor es colocarlo justo al final del CSS de la plantilla, es decir, justo antes de ]]></b:skin>:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

Saludador Web

Saludador web, así les llaman a estos personajillos, en esta página hay unos cuantos modelos para elegir además de alguna que otra cosilla interesante, hay que registrarse pero te lleva un momento solo y el "saludador" merece la pena ¿no crees? yo lo encuentro muy simpático.

Texto "loco" online

Una página en la que puedes crear un divertido texto de colores y con las letras un poco "locas".

DIVERTIDO
ATREVIDO
ORIGINAL

Texto opcional para un enlace

Con este código puedes hacer aparecer un texto añadido por ti, cuando pones el cursor sobre un enlace de texto.Es sencillo de realizar y puedes aportar alguna información adicional sobre dicho enlace.

Al enlace le agregamos la propiedad "title" y la propiedad "alt", para que el texto adicional sea visible en IE y Firefox, seguido del texto que queremos que aparezca en el cuadro de texto, en este caso será (Un blog con muchos trucos).

El código sería este:
<a href=elescaparatederosa.blogspot.com"target="_blank"/javascript/" title="Un blog con muchos trucos" alt="Un blog con muchos trucos">El escaparate</a>

Y así quedaría (fijaros en el cuadradito de texto que sale):

El escaparate

Presentación de fotografías

Crea fantásticos pases de fotografías y personaliza su diseño de forma original.

Como buscar en Google

Todos usamos o hemos usado el buscador de Google en un momento determinado, pones lo que quieres encontrar ¡y listo! en la mayoría de los casos solemos encontrar lo que buscamos.
Aún así nunca está de más el saber como podemos conseguir mejores resultados en nuestras búsquedas. He encontrado algo interesante al respecto en el blog de Microsiervos:

Consejos para buscar en Google

Botón "Ir Arriba"

Con un código muy sencillo puedes incluir en tu blog un botón de "ir arriba".
Este ejemplo es con texto, pero también puedes poner un botón como imagen, en esta página puedes hacer uno tu mism@, son sencillos pero quedan muy bien, cuando tengas el botón sustituyes donde pone "ir arriba" por la dirección de tu imagen.

Código:
<a href="#">Ir Arriba</a>

Eliminar barras de separación

¿No te convence nada la línea de separación que hay en la columna de tu blog?

Para eliminarla(en la columna derecha o en la izquierda, según el blog)ve a plantilla - HTML y busca esto:

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;

Cambia el valor border-bottom:1px por border-bottom:0px

Si te gusta como queda pero quieres que se vea más, aumenta el valor border-bottom:1px a, por ejemplo, 3px.

Códigos para generar texto en movimiento

Os dejo algunos códigos que he recopilado para generar distintos efectos de texto en movimiento. Ya sabéis...copiar y pegar, espero que os sirvan.


<marquee behavior="alternate"><strong>Texto aquí</strong></marquee>

Texto aquí

Queda chulo ¿eh? Aquí os dejo otro código:

<marquee direction="up" behavior="alternate">Texto aquí</marquee>

Texto en movimiento

Este otro está superchulo, ahí va el código:

<span><marquee direction="left" style="background:#CC3333">Es guapo ¿eh?....</marquee></span>

Es guapo ¿eh?....
(puedes cambiar el fondo y el color por los que prefieras)

Otro que también queda muy bien y puedes cambiar los colores:

<marquee style="border:#FF4500 2px SOLID">¿A que molo?</marquee>

¿A que molo?

¿Y que me dices de este? ¿No está chulísimo?

<marquee behaviour="ALTERNATE" bgcolor="00FF00">Fondo verde</marquee>

Fondo verde

Colocar imagen como cabecera del blog

Para empezar tenemos que alojar la imagen que queremos en algún alojamiento de archivos y,si es gratuito mejor ¿no? yo uso siempre Imageshack y nunca me ha dado problemas, está en inglés pero tiene una interfaz muy intuitiva, o sea, que es fácil de manejar.
Cuando tengas tu imagen alojada copias su ruta.Vas al panel de control de blogger pinchas en “Plantilla” y a continuación en “Edición HTML”.
Buscas el siguiente código:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Añades la url tu la imagen para que aparezca como fondo, dentro del bloque “header”, si quieres eliminar los bordes,borra la línea “border”: border:1px solid $bordercolor;Si tu imagen mide 660px de ancho perfecto, sino puedes establecer otro ancho, si lo que quieres cambiar es la altura puedes añadir el valor height, especificando la altura que quieres. Yo hice mi propia imagen, así que le di el tamaño de la cabecera de plantilla.
Quedaría así:

#header-wrapper {
width:660px;
margin:0 auto 10px;
}
#header {
margin: 5px;height:100px;
background-image: url(http://URL DE TU IMAGEN);
text-align: center;
color:$pagetitlecolor;
}

Usando la vista previa puedes ir variando el alto y el ancho según lo necesites para adaptar la imagen, ya sabes: ancho-width, alto-height.

Actualización
Aunque Blogger actualmente permite subir una imagen directamente a nuestro header desde el panel de edición de elementos, este sistema puede seguir usándose si necesitas añadir la cabecera directamente en el código de la plantilla.

Video-Tutorial para crear un blog en Blogger