Premio "Batipremio"

Me enteré con algo de sorpresa y a la vez de alegría, que había recibido este premio. Me lo ha dado Birdelo a quien le agradezco por haber tenido en cuenta este blog.

Y bueno, como debo compartirlo con seis blogs,lo comparto con:

♠ Gema de Gem@blog
♠ Rosa de El Escaparate de Rosa
♠ G de Para Para todos
♠ Vesta de El blog de Vesta
♠ Eulalia de Tuneando el blog
♠ Feripula de ReCurS.O.S para tu Blog

A mi parecer son blog que tiene de todo un poco: nos informan y divierten.

Texto con sombra y volumen

Ahora les enseñaré cómo crear un texto con sombra y volumen...Y también, veremos cómo podemos usarlos.Vamos a ello.

El código a usar es:

<div style="margin:0px auto;width:450px;filter:shadow;color:red;font-size:32pt;line-height:200%;">TEXTO</div>

Una pequeña explicación:
♠ width:450px es el ancho del texto.
♠ color: podemos cambiarlo por el color que deseemos, pero en palabras y en inglés ( red, blue, green, etc.)
♠ font-size:32pt es el tamaño de letra; podemos agrandarla o reducirla.

Ejemplo:

Diversas & Variadas

♥ Podemos usarlo, junto con un fondo, para la cabecera de nuestro blog.



♥ O usarlo como un botón de enlace.

D & V

En fin, podemos usarlo de distintas formas: cómo título de entradas, como letra capital...Ya depende de cada uno de nosotros.

Si tienen dudas o comentarios, háganmelos llegar.

Texto del post en dos columnas

Ahora,les voy a hablar de un código que puede servirnos para dar un estilo diferente a nuestros post: se trata de colocar el texto en dos columnas.

El código a usar es el siguiente:

<table><tbody><tr><td style="PADDING-RIGHT: 15px; MARGIN-TOP: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 15px; WIDTH: 40%; PADDING-TOP: 15px"><p style="TEXT-ALIGN: justify">TEXTO DE LA PRIMERA COLUMNA DEL POST
</p><td style="PADDING-RIGHT: 15px; MARGIN-TOP: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 15px; WIDTH: 40%; PADDING-TOP: 15px"><p style="TEXT-ALIGN: justify">TEXTO DE LA SEGUNDA COLUMNA DEL POST</p></td></tr></tbody></table>

Un ejemplo:

El protagonista, Jean Valjean, un hombre que recién acaba de salir de prisión, busca refugio y alimento. Sin embargo, nadie quiere acogerlo por haber sido un ladrón. Después de haber tocado muchas puertas, toca la puerta de un sacerdote que lo acoge: le da de comer y permite que pase la noche en su casa.

Valjean se levanta y coge unos cubiertos de plata. Está a punto de irse, cuando ingresa el sacerdote. Valjean lo golpea y se va.Al día siguiente, unos oficiales llevan a Valjean a la casa del sacerdote, porque no le creen que, según Valjean, el sacerdote le haya regalado los cubiertos.

También podemos agregar dibujos , enlaces, etc...Es decir, podemos trabajar como cualquier entrada.
Si deseamos usar este estilo para todas nuestras entradas y, para evitar pegar a cada rato el código, hacemos lo siguiente:

♠ Ingresamos a Configuración/ Formato y nos ubicamos en Plantilla de entrada.
♠ En Plantilla de entrada pegamos el código y damos click en Guardar configuración

Éso es todo, muy sencillo,pero si tiene dudas o comentarios, háganmelos saber.

Lo vi en: El Escaparate

Agregar una segunda columna (plantilla Mínima)

Hace unos días, G me preguntaba cómo agregar una nueva columna (o sidebar) a su blog; y en un comentario posterior, me dice que usa la plantilla Mínima. Para los que no saben cómo hacerlo, pues aquí les va la solución:

♠ Ingresamos a Diseño/ Edición de HTML y activamos el casillero Expandir plantillas de artilugios.
♠ Con Ctrl+F , buscamos en la plantilla /* Outer-Wrapper: y debajo de éste, encontraremos #outer-wrapper .
♠ Al modificar el #outer-wrapper estaremos modificando el ancho del blog; para aumentar el ancho, modificamos width:6620px; a el ancho de 752px; aproximadamente.
♠ Siguiendo dentro de /* Outer-Wrapper: buscaremos #main-wrapper y, en este caso, reduciremos el width:412px; a 400px; aproximadamente.
♠ También, modificaremos la #sidebar-wrapper ,de width: 220px; a width: 150 px;
♠ Debajo de todo el código #sidebar-wrapper { hasta su corchete de cierre }, agregaremos éste código:

#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

♠ Finalmente, con la ayuda de Ctrl+F buscaremos en la plantilla : div id='content-wrapper'> y debajo de este código agregamos:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

Guardamos los cambios y listo!
Si hicimos bien todos los pasos, el resultado será éste:



Bueno G espero ahora ya sabes cómo agregar una sidebar a la plantilla Mínima :)

Códigos básicos

Hace unos días Fabiola comentaba lo siguiente:

Es muy poco demoroso estar leyendo la plantilla completa asi que si pudieras darme algún truco para buscar en la plantilla (si es que existe ) te lo agradecería.

Este comentario me dio la idea de hacer un post sobre lo que podríamos llamar "trucos" o códigos básicos, que son sencillos, pero que nos facilitan las cosas. Bueno, veamos algunos:

♠ Texto en negrita

<b>TEXTO</b>

Ejemplo: Hola

♠ Texto en cursiva:

<i>TEXTO</i>

Ejemplo: Hola

♠ Negrita y cursiva al mismo tiempo:

<b><i>TEXTO</i></b>

Ejemplo: Hola

♠ Texto o párrafo con sangría:

<blockquote>TEXTO</blockquote>

Ejemplo:

No tenía miedo a las dificultades: lo que la asustaba era la obligación de tener que escoger un camino. Escoger un camino significaba abandonar otros.
Paulo Coelho

Puedes usarlo para citar tus frases favoritas o destacar algún texto!

♠ Buscar un código en la plantilla:

CTRL+F

Se abrirá un cuadro de diálogo; ponemos el texto o código a buscar, aceptar y listo!

♠ Crear un enlace:

<a href="URL">TEXTO</a>

Ejemplo: Diversas & Variadas

También podemos usarlo para crear un enlace con nuestro e-mail!

♠ Crear un enlace que se abrirá en una ventana emergente:

<a href="URL" target="_blank">TEXTO</a>

Ejemplo: Diversas & Variadas

También podemos poner en vez de texto, una imagen con enlace y escogemos si queremos que se abra en una ventana emergente o en la misma ventana !

♠ Añadir una imagen:

<img src="url-de-la-imagen" />

Ejemplo:

♠ Escribir texto en distintas líneas (este truco sobretodo les servirá cuando quieran agregar varios códigos en un mismo gadget; por ejemplo si quieren poner botones de enlaces, verán que aparecen junto, si usan este código, harán que los botones están uno debajo de otro)

<div align="left">TEXTO-CÓDIGOS-ETC</div>

Ejemplo:
Diversas
Variadas

♠ Línea con color:

<table bgcolor="#C3D9FF"><tbody><tr><td>TEXTO</td></tr></tbody></table>

Ejemplo:

Diversas & Variadas

Podemos usar este código para resaltar un enlace, por ejemplo, o un texto o frase especial!

Pueden aplicarlos, o mezclarlos, como mejor les parezca; si tienen alguna duda, háganmela saber y veré cómo puedo ayudarlos.

Flashmo:plantillas en flash

Flashmo es una página que nos ofece una variedad de plantillas en flash (totalmente gratuitas) para nuestro blog.Encontrarán diseños realmente bonitos, además de otras utilidades, como wallpapers, menús,todo en flash.Aquí les dejo una pequeña muestra:

Sistema de votación por estrellas y por reacciones

Aunque todavía está en fase de prueba, Blogger ha puesto a nuestra disposición una nueva herramienta (aunque no sé si estuvo ahí desde hace tiempo, porque recién acabo de darme cuenta que estaba cuando pasé por Blogger in Draft).
Se trata de dos sistemas de votación para nuestros post ( es decir, para que las personas pueda decir si le gustó o no nuestro post): uno es el sistema de votación por reacciones y el otro es el sistema de votación por estrellas. ¿Les gustaría incluírlo en su blog? Pues vamos a ello.

♠ Como dije, es una función en fase de prueba, así que debemos de ingresar a Blogger in Draft.

♠Luego, ingresamos a Diseño/ Elementos de la página y hacemos click en Editar de Entradas del blog. Una vez ahí, se abrirá una ventana emergente, como esta:



♠ Ahora, escogemos si deseamos el sistema de votación por reacciones (si queremos, podemos editarlo) o por estrellas. Click en guardar y listo!

♠ Cuando lo tengan instalado, se verá así:



Cualquier duda, me avisan.

Hacer que el texto se mueva

Estuve pensando en algo "dinámico" para el blog, y encontré ésto!

Les gustó el efecto? Yo creo que sí; me encantó cuando los vi en el blog de Gem@ y decidí "jugar" con los códigos y obtener nuevos efectos:

♠El código base es éste:

<marquee>ELTEXTOQUEESCOJAS</marquee>

♠Ahora, si queremos que nuestro texto tenga un color de fondo, agregamos ésto:

<marquee bgcolor="#f778a1">TEXTO</marquee>

Y este es el resultado

Si desean,pueden reemplazar el #F778A1 por el color que más les guste.

♠Si queremos que el texto se desplace hacia la izquierda:

<marquee direction="right" bgcolor="#99ccff">TEXTO</marquee>

♠Si queremos que el texto se desplace de arriba hacia abajo usamos este código:

<marquee direction="down" behavior="alternate" bgcolor="#F76541">TEXTO</marquee>

Resultado

Si desamos que el código se mueva de abajo hacia arriba, cambiamos "down" por "up".

♠ Para que el texto se pare cuando pasamos el mouse sobre él, usamos este código:

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="50" behavior="alternate" bgcolor="#4cc417">TUTEXTO</marquee>

El texto se verá asi cuando lo uses

♠ Dseamos que el texto vaya más lento o más rápido?

Entonces, donde está scrollamount="1" cambiamos el número; si ponemos un número mayor (6,7...) el texto irá más rápido; si ponemos un número menos (1,2,...) el texto irá lento.

Lento

♠ Pero también podemos usarlo para poner una lista de links, colocar nuestros post favoritos (como el ejemplo que sigue) o darle el uso que querramos:

<marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"> <a href="url#1">LINK#1</a> <a href="url#2">LINK#2</a> <a href="url#3">LINK#3</a> </marquee>

Reader Widget Empezando con tu blog Free Blogger Templates

En fin, podemos personalizarlo como querramos, ya depende de nuestra imaginación y luego lo colocamos donde deseemos (en la sidebar, como título de algún post, usarlo como un anuncio especial...)

Espero que les guste :)

Plantillas con Free Blogger Templates

Buscando por internet, encontré este blog que nos ofrece diferentes plantillas para Blogger, y como dice su nombre, son gratuitas.

Pueden ingresar al blog de Free Blogger Templates aquí. En el blog podrán ver la demo del blog (como se vería si la usan) y pueden descargarla (download).

Aquí les dejo algunos dibujos; las plantillas están muy bonitas :)