Texto en burbuja, tachado y al revés en Blogger

En un post antiguo, les había enseñado cómo agregar el efecto de tachado a nuestro texto del blog. Hoy les traigo una herramienta online llamada DiverText que no sólo nos permite añadir ese efecto a nuestro texto (tachado) sino que nos permite agregar el efecto de texto al revés y de texto en burbuja, lo que le dará un toque especial y divertido a nuestros post, como este ejemplo:

H̶o̶l̶a̶
ʎos
Ⓙⓔⓢⓢⓘⓒⓐ

La herramienta es muy sencilla de usar. Lo único que tenemos que hacer es elegir uno de los efectos (tachar texto, voltear texto, texto en burbuja), escribimos nuestro texto en la caja superior y en la caja inferior nos generará el texto con el efecto seleccionado. Finalmente, copiamos el texto y lo pegamos a nuestra entrada de Blogger o a nuestras redes sociales.

DiverText

Cambiar color de selección de texto en el blog

Varias personas me han estado preguntando que cómo hago para poner un color de selección al texto de mi blog, como pueden ver en esta imagen:


Éso se puede hacer de una forma muy sencilla:

1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.

2.§ Con ayuda de CTRL+F buscamos ]]></b:skin> y justo antes de éste, pegaremos el siguiente código:

::-moz-selection { background: #ff0066; color: white; /* Firefox */ }
::-moz-selection { background: #ff0066; color: white; /* Opera */ }
::-moz-selection { background: #ff0066; color: white; /* Chrome */ }

Donde #ff0066 es el color de selección, que podemos cambiar por cualquier otro; white es el color del texto al momento de seleccionarlo.
Lamentablemente, el color de selección no funciona en IE.

WhatFont » saber qué fuente usa una web

En muchas ocasiones, al entrar a un sitio web vemos que usan una determianda fuente que nos llama la atención y que nos gustaría usar en nuestro blog o sitio web...Pero no sabemos cuál es .

Ésto ya no será problema porque gracias a WhatFont podremos averiguar qué fuente usa una página web, pero además nos permite saber el tamaño de la fuente y los estilos que se aplicaron. Es una herramienta gratuita que se instala muy fácilmente y detecta las fuentes de cualquier stio web.

WhatFont

Personalizar las viñetas de los posts

En nuestros posts, es común que usemos listas numeradas o listas con viñetas. Y quizás no nos guste la viñeta que blogger nos ofrece , así que podemos cambiarla por otra imagen, es decir, que podemos personalizar nuestra lista de viñetas como pueden ver en la siguiente imagen, donde hay una lista antes de personalizarla y otra después del cambio.



1.§ En primer lugar, vamos a Diseño - Edición de HTML y con ayuda de Ctrl + F, buscamos /* Posts.

2.§ Debajo de /* Posts pegamos el siguiente código:

.post ul {
margin:0 0 1.25em;
list-style:none;
}

.post ul li {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUyKI_qeqanh8TIHD0xiQqTgHyLtGO0llNTr2Jkw04v84v2psedHjLy_6c31OTrpsbiPg-RwItCYUhCoJFBeLkkR3VaemXTfct8nebY_srFH1XKRmSoeRGn-oF1XjK-MEhIsd0eW6SS1I/s1600/corazon_diyva.png") no-repeat 2px;
margin:0;
padding:0px 3px 3px 17px;
line-height:1.4em;
}

3.§ Para que el ícono quede a la misma altura que el texto, es decir, que no esté muy arriba ni muy abajo, modificamos el padding; podemos reemplazar la imagen por otra.

4.§ Damos click a guardar.

La propiedad Text Decoration

Cada vez que implementamos un nuevo menú, galería,lista de enlaces, etc. a nuestro blog lo acompañamos con una hoja de estilos, el CSS, el que podemos definir a nuestro gusto cambiando colores, bordes, márgenes, fondo...Sin embargo, hay quienes no entienden muy bien las propiedades de la hoja para poder cambiarlos a su gusto. Es por ello que vamos a empezar a ver las diferentes propiedades CSS, indicando que valores se puede usar para cada uno y así sentirnos más cómodos al momento de personalizar nuestro CSS.

Hoy, empezando con estas lecciones de CSS, veremos la propiedad text-decoration que, tal como su nombre lo indica, es una propiedad propia de los textos.

❁ La propiedad text-decoration se usa para añadir (o quitar) efectos o decoración al texto. Esta decoración es generalmente mediante líneas.

FORMA DE AGREGAR

En la plantilla la aplicaremos de esta forma:

un elemento {
text-decoration: el valor;
}

Por ejemplo, si queremos darle algún estilo a los enlaces de un menú :

menu li a{
text-decoration:underline;
}

Debemos sustituir el valor por cualquiera de los cinco valores mencionados más abajo.

VALORES QUE PODEMOS USAR

Son cinco:

» none: si es que no queremos agregar decoración o si queremos quitarlo. Generalmente lo usaríamos para quitar el subrayado de los enlaces de esta forma:

a:active, a:visited { text-decoration: none }

» underline: para añadir un subrayado. Por ejemplo:

Texto subrayado

» overline: agrega una línea superior:

Este es un ejemplo

» line-through: para hacer un texto tachado.

Tachando el texto

» blink: agrega un parpadeo al texto. Esta propiedad no es visible en Internet Explorer.

Parpadeo

En futuros post iremos viendo otras propiedades.

Colocando descripción del blog

Cuando buscamos alguna página o blog, vemos que debajo del título del blog aparece una descripción del mismo.


G me preguntaba cómo hacer para que aparezca la descripción, así que hoy vamos a ver cómo conseguirlo.

Pirmero, deberemos de entrar a Configuración - Básico; veremos en una parte donde dice "Descripción " y al lado un recuadro donde escribiremos un texto que resuma el contenido de nuestro blog, de qué trata, etc.

Click en la imagen para ampliar

Otra manera de colocar la descripción sería a través de la cabecera del blog.

Texto con efecto arco iris

Hace un tiempo vimos cómo agregar el efecto arco iris a los enlaces, efecto que sólo era visible al pasar el mouse sobre el enlace.
Por cierto la DEMO la pueden ver en mi blog de pruebas, en la sidebar con un texto que dice Bienvenidos.

Así que G me pregunó un día si podíamos hacer eso pero en un texto, de forma que el efecto fuese siempre visible.

Hoy vamos a ver que es muy sencillo de conseguir:

1.§ Vamos a Diseño- Elementos de la página- Añadir un gadget y escogemos HTML/Javascript.

2.§ En el nuevo elemento, pegaremos el siguiente script:

<script>
/*
RAINBOW TEXT Script by Matt Hedgecoe (c) 2002
Featured on JavaScript Kit
*/

// **********
var text="Aquí-tu-texto" //
var speed=80 //

if (document.all||document.getElementById){
document.write('<span id="highlight">' + text + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}

if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script>

Cambiamos Aquí-tu-texto por el texto que tendrá el efecto y damos click a guardar.

Visto en : JavaScript Kit

Blockquote (bloque entrecomillado)

Hoy vamos a ver cómo agregar un blockquote o bloque entrecomillado, que sirve para resaltar alguna cita textual o un párrafo en particular.

En futuros post veremos más estilos para nuestro blockquote; hoy veremos cómo añadirlo a nuestro blog (si es que no lo tiene) o cambiarlo un poco.

1.§ Ingresamos a Diseño/ Edición de HTML y con ayuda de CTRL+F buscamos:

blockquote {
margin:.5em 0;
}

El contenido (margin:.5em 0;) no tiene que ser necesariamente igual, lo importante es que exista el blockquote.

» Si no lo encontramos, entonces puede que en nuestro blog esté con este nombre:

.post blockquote {
margin:.5em 0;
}

Cualquiera de los dos es igualmente válido.

2.§ Si es que tenemos el código, podemos personalizarlo un poco, sustituyéndolo por:

blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwg0IA-b8-SUeWJgxwgKOl8LdkqUzKoX38smY8hlWDhBAd3YgMLE8RGK9ywh5GLZFG9l4uxGBs8M7sGkYAKXx1FoLLO0HtWx3KnJzeLciuzFveXwbVZ6pF5Q0VK6s0WZx-oVhDc2VMPb4/s400/blocknaran.png)repeat-y ;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
font-size: 0.9em;
}

Si es que en nuestro blog no existe el blockquote { o .post blockquote { entonces podemos añadir el código debajo de:

/* Posts
----------------------------------------------- */

3.§ Damos click a Guardar.

4.§ Cada vez que queramos usarlo, podemos agregar <blockquote>Texto-Texto-Texto</blockquote> o sino usar el botón que está en el editor de entradas:

En futuros post veremos más formas de personalizar nuestro Blockquote.

Kingthings Christmas » Fuente navideña

Si vamos a elaborar una tarjeta navideña, puede sernos de mucha utilidad tener alguna fuente distinta a las conocidas Times New Roman, Arial, etc.

Buscando alguna fuente bonita, encontré esta llamada Kingthings Christmas creada por Kevin King.

Intrucciones

Para añadirla a nuestra PC, descargamos la fuente, abrimos el .rar ;encontraremos cuatro archivos, tres con extensión .txt y uno llamado Kingthings Christmas 2.2.ttf.
Ahora, vamos a Mi PC, Disco C, Windows, Fonts y pegamos el archivo Kingthings Christmas 2.2.ttf.

Ejemplo de fuente

Escrito en un documento de Word, cambiando colores a las letras:

Descargar

Texto vertical

En múltiples ocasiones me preguntaron si era posible escribir texto de forma vertical; hoy vamos a ver cómo hacerlo.

Lo único que tenemos que hacer es pegar el siguiente código; podemos cambiar de colores cada letra o simplemente que toda la palabra sea del mismo color.

<DIV style="width:350px;margin:0px auto;"><div style="font-size:28px;font-weight:bold;text-align:center;font-family:Tahoma,monospace,arial,system;line-height: 95%;"><br><span style="color:#FFCC33;">E</span><br>J<br><span style="color:#FFCC33;">E</span><br>M<br><span style="color:#FFCC33;">P</span><br>L<br><span style="color:#FFCC33;">O</span></div></DIV>

El resultado:

E
J
E
M
P
L
O

Códigos HTML básicos para texto

Aquí una pequeña lista de códigos HTML que podemos usar para darle algún estilo a nuestros textos ya sea en los post o cuando dejemos un comentario.

» Texto en negrita:
<b>Aquí una palabra o frase</b>
Ejemplo: Hola

» Texto subrayado:
<u>Aquí una palabra o frase</u>
Ejemplo: Hola

» Texto en cursiva:
<i>Aquí una palabra o frase</i>
Ejemplo: Hola

» Texto tachado:
<strike>Aquí una palabra o frase</strike>
Ejemplo: Hola

» Superíndice:
^{Aquí una palabra o número}
Ejemplo: El factor ax² + bx + c = 0

» Subíndice:
_{Aquí una palabra o número}
Ejemplo: El factor X₁

» Texto grande:
<big>Aquí una palabra o frase</big>
Ejemplo: Grande

» Texto pequeño:
<small>Aquí una palabra o frase</small>
Ejemplo: Pequeño

Puedes ver otros códigos básicos en este post.

Escribiendo texto tachado

Iba a publicar una nota sobre un menú...Pero la escribiré después, porque estuve leyendo un mensaje del mail donde me preguntaban como lograr que el texto esté así,tachado..

Para el amigo que me envió el mail y para quien también quiera saber cómo lograr un texto tachado, aquí va la rspuesta. Es bastante sencillo, bastará agregar <strike> y </strike> al texto, de la siguiente forma:

<strike>AQUITEXTO-EJEMPLO</strike>

Resultado:

AQUITEXTO-EJEMPLO

Frases al azar

Hace unos días lo vengo aplicando en mi blog y me preguntaron cómo conseguirlo. Se trata de un código , que podemos pegarlo como nuevo elemento HTML en la sidebar de nuestro blog y que nos permitirá mostrar frases, citas de autores,etc de forma aleatoria, es decir, que cada vez que carguemos el blog se mostrará una frase distinta.

Debo de decirles, que el gadget sólo permite un máximo de 25 a 30 frases. Bien, para hacerlo, pegamos el siguiente script como nuevo elemento HTML:

<script language="JavaScript">
citas = new Array(3)
citas[0] = "AQUÍ-TU-FRASE."
citas[1] = "AQUÍ-TU-FRASE."
citas[2] = "AQUÍ-TU-FRASE."
aleatorio = Math.random() * (citas.length)
aleatorio = Math.floor(aleatorio)
document.write(citas[aleatorio])</script>

Para agregar más de cuatro frases, deberemos de cambiar new Array(4) por otro número.

Si deseas personalizar el widget, por ejemplo, cambiar color de letra, añadir algún alineado, etc, deberás de agregar los siguiente:

<div style="color: #ff2000; text-align: right; font-weight: bold">
(AQUÍ-PEGAR-EL-SCRIPT-ANTERIOR)
</div>

Pullquote en nuestro blog

Un ejemplo de
pullquote con
borde y color

Hoy vamos a ver cómo podemos agregar un Pullquote de forma sencilla en nuestro blog.
Para ello, sólo agregamos el siguiente código en el editor de entradas:

<p style="float:right;width:30%;padding:8px;border:1px solid #000;font-size:.8em;margin:20px;background-color:#ddd;">
<strong> TEXTO_DEL_PULLQUOTE</strong><br>
</p>

EXPLICACIÓN:

♠ p style="float:right es el lugar donde se ubicará el pullquote; si deseamos cambiarlo para la izquierda, pondremos LEFT en lugar de RIGHT.
♠ width: 30% es el ancho del pullquote.
♠ padding: 8px; es la altura.
♠ border:1px es elgrosor del borde, en píxeles.
♠ solid #000 aquí podremos cambiar el estilo del borde y el color del mismo.
♠ background-color:#ddd es el color de fondo

Texto a dos columnas (otra forma)

Hace un tiempo les expliqué una forma de poner los textos del post en dos columnas; ahora, encontré esta nueva forma.

El código a usar es el siguiente:

<div style="float: left; width: 45%">TEXTO DE LA PRIMERA COLUMNA DEL POST</div>
<div style="float: right; width: 45%">TEXTO DE LA SEGUNDA COLUMNA DEL POST</div>
<div style="clear: both"></div>

Un ejemplo:

En el final de la primera parte, Lyra había ingresado a un mundo nuevo. Lyra, llega a una ciudad llamada Cittàgazze, esta ciudad pertenece al nuevo mundo al que ingresó la protagonista. Pero lo más inquietante del lugar es que no hay personas adultas.

En esta ciudad, Lyra conocerá a Will quien, al igual que ella, proviene de otro mundo: no del mundo de Lyra, ni de este nuevo mundo, sino de un lugar que todos conocemos, nuestro mundo.Will es un niño que ha matado a un hombre por proteger a su madre.

Lo vi en : Templates Novo Blogger

Tu nombre en chino

Explorando en la red, encontré Nombre-Chino.com ,que nos ofrece la posibilidad de traducir nuestro nombre el chino y al tibetano; además, nos ofrece tatuajes chinos,sellos, generadores de pintura china,tarjetas de felicitación,...En fin, múltiples cosas.

Y aquí, mi nombre en chino:

Letra capital con fondo y borde

Ahora vamos a ver cómo añadir letra capital, pero con estilo, a los textos del post.
Para ello, usamos el siguiente código:

<!-- the drop cap -->
<span style="margin-right:6px;margin-top:5px;float:left;color:blue;background:green;border:1px solid darkblue;font-size:80px;line-height:60px;padding-top:2px;padding-right:5px;font-family:times;">LETRACAPITAL</span>TEXTO JUNTO A LA LETRA CAPITAL<div style="clear:both;"><br></div>

Ahora vamos con la explicación:

♠ color:blue es el color de la letra capital; para cambiarlo, colocamos en lugar de blue el nombre de otro color (red, green,etc.) en inglés.
♠ background:green es el color de fondo de la letra capital.
♠ border:1px solid darkblue nos permite modificar el grosor del borde (modificar 1px), el estilo (cambiar solid por otro tipo de líneas)y el color del borde (sustituir darkblue por el color de nuestro gusto).
♠ font-family:times; nos da la posibilidad de escoger la fuente del texto (por ejemplo, la letra del comienzo de esta entrada).
♠ LETRACAPITAL aquí ponemos la primera letra del texto que vamos a escribir .
♠ TEXTO JUNTO A LA LETRA CAPITAL es el texto que sigue a la letra capital.

Y ahora un ejemplillo más:


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.

Se ve muy bien,verdad?

Idea: ahora que ya sabemos cómo hacer una letra capital en los post de nuestro blog, podemos usarlo junto con el HTML de dos columnas (ver Texto del post en dos columnas)

Texto con sombra (otra forma)

Hace unas semanas, les mostré una forma de hacer que nuestros textos tuvieran sombra y volumen (ver post Texto con sombra y volumen); ahora vamos a ver otra forma de lograr este interesante efecto,pero que nos permite poder cambiar el color de la sombra.

Para ello, copiamos este código:

<div id="sombra" style="position:relative;width:300;
height:50r;filter:shadow(color=#00FFFF)">
<br> <font color=#CC0000 size=5>TEXTO<
br> </div> <br>

</font></br>

Y ahora, una explicación:

♠ width: es el ancho del texto; height:,el alto
♠ filter:shadow(color=#00FFFF) es el color de la sombra del texto, en hexadecimales.
♠ font color=#CC0000 es el color de las letras, también en hexadecimales.

Y un ejemplo.

Diversas & Variadas

Sencillo, verdad?

ACTUALIZACIÓN (27/10/2008): según he visto, el efecto no se ve en Firefox, pero sí puede visualizarse perfectamente en Internet Explorer.

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