Mostrando entradas con la etiqueta Texto. Mostrar todas las entradas
Mostrando entradas con la etiqueta Texto. Mostrar todas las entradas

Cambiar el tamaño de la letra con una barra

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Ya antes vimos dos opciones para cambiar el tamaño de la letra del blog, en cualquiera de los dos se tiene que hacer click en un tamaño para que se aplique la medida de la fuente. En esta opción el cambio del tamaño es gradual y es usando MooTools, una librería Javascript de efectos.

Puedes ver un ejemplo en este blog de pruebas, en la sidebar verás una barra, usa el selector para cambiar el tamaño de la letra, desplazalo hacia la derecha para agrandar el tamaño, y hacia la izquierda para hacerla más pequeña.

Antes de pensar en ponerlo considera que MooTools al igual que otras librerías no es compatible con otros scripts, así que si usas Scriptaculous o jQuery seguramente no funcionará.

Ahora sí, entra en Plantilla | Edición de HTML y pega antes de </head> lo siguiente:
<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/>
< script type='text/javascript'>
window.addEvent(&#39;domready&#39;, function(){

var el = $(&#39;myElement&#39;),
font = $(&#39;fontSize&#39;);

new Slider(el, el.getElement(&#39;.knob&#39;), {
steps: 35, // Tamaño máximo de la letra
range: [8], // El 8 es el tamaño mínimo
onChange: function(value){
font.setStyle(&#39;font-size&#39;, value);
}
}).set(font.getStyle(&#39;font-size&#39;).toInt());

});
< /script>

< style type='text/css'>
div.slider {
width: 220px; /* ancho de la barra */
height: 16px; /* alto de la barra */
background: #eee; /* color de la barra */
}
div.slider div.knob {
background: #0080FF; /* color del selector */
width: 16px; /* ancho del selector */
height: 16px; /* alto del selector */
cursor: move;
}
div#fontSize {
height: 40px;
}
< /style>

Luego busca esta parte y agrega lo que está en color rojo:
<div id='fontSize'>
< div id='main-wrapper'>
< b:section class='main' id='main' showaddelement='no'>
< b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
< /b:section>
< /div>
</div>

Por último entra en Diseño | Añadir un gadget | HTML/Javascript y pega esto:
<div id="myElement" class="slider">
< div class="knob"></div>
< /div>
< p>Mueve la barra hacia los lados para cambiar el tamaño de la letra.</p>

Con eso el tamaño de la letra de las entradas cambiará desplazando el selector de la barra de un lado a otro. Si deseas que también cambie el tamaño de la letra de todo el blog entonces la primera línea en color rojo deberá ir antes de <div id='content-wrapper'> y la otra parte roja antes de <!-- end content-wrapper -->

Puedes cambiar el aspecto de la barra y el selector modificando lo que se indica en color verde.
Sin duda es un método muy elegante para cambiar el tamaño de la letra del blog que el lector agradecerá.

Como escribir texto sobre cualquier imagen en blogger


Artículo publicado en el blog El Balcón de Jaime,  ver la entrada en su blog original.

Texto sobre cualquier imagen usando CSS
Añadir texto sobre una imagen permite incluir el título de ésta, describirla, o anunciar su procedencia. Esto puede lograrse usando sólo CSS, sin nada de Javascript para no hacer la página más pesada y lenta.



Esta es mi primera frase sobre una imagen. Escribir sobre fotografías es una gran ventaja.

Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta </head> y añade antes estas líneas de CSS:
<style type="text/css">#bljaIMGte{float:left;position:relative;}#bljaIMGte .bljaIMGtex {width:320px;position:absolute;top:10px;left:14px;}</style>

Guarda la plantilla.

A continuación te muestro el código necesario que hará funcionar el truco. Puedes utilizarlo tanto en una entrada como en un gadget o elemento de página html-javascript que encontrarás en el apartado de Diseño.
<div id="bljaIMGte">
<img src="URL DE LA IMAGEN" />
<div class="bljaIMGtex" style="color:#000000;">
<p>PRIMER PARRAFO</p>
<p>SEGUNDO PARRAFO</p>
</div>
</div>

Reemplaza URL DE LA IMAGEN por la dirección de tu imagen. En PRIMER PARRAFO puedes escribir un párrafo inicial y en SEGUNDO PARRAFO el resto de la descripción.

Con la etiqueta <p> y su cierre </p> sólo conseguimos que se produzca un salto de línea, dejando un espacio en blanco entre el contenido.

Para mostrar un simple salto de línea bastará con eliminar dichas etiquetas y añadir al final de la línea en la que presentaremos el salto <br></br>.

También puedes deshacerte de todo esto y escribir seguido.

En color:#000000; puedes personalizar el color (#000000) del texto, haciendo uso de la tabla de colores.

Agregar scrollbar a un texto largo

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Scrollbar en un párrafo o texto largo.
En posts anteriores explicaba como añadir scrollbars a diferentes partes del blog. En este post te explicaré como puedes añadir una scrollbar a un párrafo o a un texto demasiado largo. Es muy sencillo...

Diseño>edición HTML>expandimos artilugios

Buscamos en el CSS las propiedades de la sidebar, el título podría ser
SidebarContent */ y en debajo de alguno de los bloques de códigos de Sidebar Content */ pegaremos este:

.scrollingtext {
height:130px;
width:130px;
border:2px solid;
overflow:auto;
}


Guardamos cambios.

Ahora cada vez que quieras mostrar el recuadro con scrollbar en un párrafo lo haremos de esta manera:

<div class="scrollingtext">Aqui el parrafo o texto</div>


Lógicamente, es muy pesado copiar y pegar siempre esta línea, por eso la puedes pegar en Configuración>Formato>Plantilla de entrada y lo pegamos en el recuadro de plantilla de entrada.

Ahora aparecerá automáticamente en las nuevas entradas que vallamos a crear, si no lo quieres, bórralo de la entrada y escribe normal.

Recuerda...
height: el alto de la caja con scrollbar, está en 130 px
width: el ancho de la caja con scrollbar, está en 130 px
border: el borde de la caja con scrollbar, está en 2 px y borde solid (línea recta, sólida)

Opción manual para cambiar el texto del blog


Artículo publicado en el blog ElBalcóndeJaime

Menú para cambiar el tamaño del texto del blog a opción del lector
Con anterioridad aprendimos a insertar el menú que ofrece la posibilidad de cambiar el tamaño del texto en el blog, además del tipo de fuente.

Para obtener dicho widget usábamos javascript y no era necesario alojar scripts externos.

Este otro menú es, al igual que el anteriormente descrito, muy sencillo de instalar y funciona correctamente, además de resultar más cómodo.

Esta es una imagen del menú:

Menú para cambiar el tamaño del texto del blog a opción del lector


Puedes probarlo en este blog de pruebas.


Diseño>Edición de HTML>expandimos artilugios




Busca la etiqueta </head> y encima añade este script:

<script src='http://sites.google.com/site/scriptsbalcon/b/blconfigtext.js' type='text/javascript'/>

Seguidamente guarda la plantilla.




A continuación vamos a utilizar un gadget html-javascript para insertar el menú en la barra lateral.


Diseño>añadir gadget (elemento de página)>html-javascript






Pega este código:

<center><a href="javascript:ts('body',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI35YFoJHPnOgrXrPZ3lmEZb2eUk6303C80XWlz-pU17lz9msxkiStnuJ1qE3JAGAqB13ETADYMiYuk0HaLPHX1NMpv0jzmpMH80aLOsXxY2Vem1LLah3Bcx9ebki6R-JS-uBcL7aeWQM/s320/blmas.png" title="Ampliar tamaño texto" /></a><a href="javascript:ts('body',-1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3iEbjDIP_11qc99L3Io-uxfWvvIWxWdxLLwLMTtTvLqB6UEgFDKQTBiqwVqRqWtF2gpjP0kmuHl55G5DXnQ_Fg86KjNCKnF5UzvJxWMm-2_L_wcL6LGXp3heACF-qts7z-vYVk0klRxY/s320/blmenos.png" title="Disminuir tamaño texto" /></a href="javascript:ts('body',-1)"></center>

En caso de querer editar el aspecto...

- Cambiar las imágenes del menú:

Reemplaza las siguientes líneas...

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI35YFoJHPnOgrXrPZ3lmEZb2eUk6303C80XWlz-pU17lz9msxkiStnuJ1qE3JAGAqB13ETADYMiYuk0HaLPHX1NMpv0jzmpMH80aLOsXxY2Vem1LLah3Bcx9ebki6R-JS-uBcL7aeWQM/s320/blmas.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3iEbjDIP_11qc99L3Io-uxfWvvIWxWdxLLwLMTtTvLqB6UEgFDKQTBiqwVqRqWtF2gpjP0kmuHl55G5DXnQ_Fg86KjNCKnF5UzvJxWMm-2_L_wcL6LGXp3heACF-qts7z-vYVk0klRxY/s320/blmenos.png

Por la URL (dirección) del icono "agrandar texto" y "encoger texto" respectivamente [+].

- Usar una palabra o frase en lugar de un icono:

Para ello, haz uso de este otro código:

<center><a style="margin-right: 4px;" href="javascript:ts('body',1)">Agrandar texto</a><a href="javascript:ts('body',-1)">Encoger texto</a href="javascript:ts('body',-1)"></center>

Guarda el gadget para terminar.

Notas:

El menú agranda y disminuye el tamaño del texto en todo el blog. Para hacer que únicamente se pueda editar el tamaño del texto de las entradas reemplaza body por main en el segundo código, que debe insertarse en el gadget (necesitarás hacerlo tres veces).

Para hacer que el menú no afecte a la velocidad de carga del blog, es aconsejable que alojes el script (el que utilizamos en el primer paso) en un servidor, como puede ser XooImage o Google sites.

Descárgalo haciendo clic aquí.

Cómo agrandar o reducir el texto usando Java

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Usando javascript para agrandar o encoger texto
Te voy a enseñar un truco muy sencillo y la verdad muy útil si crees que la letra de tu blog es pequeña o puede dificultar la lectura a tus visitantes.

Por medio de un gadget te enseñaré a añadir un "Menú de tamaños" que, al hacer click en cada botoncito, la letra se agrandará o se encojerá.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código:
<center><table border="1"><td><center><a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-24/16-square-blue.png"/></span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-8/16-square-green-add.png"/></span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-24/16-square-blue-add.png"/></span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-24/16-square-red-add.png"/></span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-8/16-square-green.png"/></span></a></center></td></table></center>

El resultado será este:


Ahora simplemente escribe un título, por ejemplo: Tamaño de texto...


Finalmente guarda cambios.

Método de aplicación opcional:

Si quieres, puedes colocar este widget en el post-footer (pié del post)...

Diseño>edición HTML>expandir artilugios

1) Busca esta línea:
<div class='post-footer'>
2) Pégale esto justo debajo:
<left><a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-24/16-square-blue.png"/></span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-8/16-square-green-add.png"/></span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-24/16-square-blue-add.png"/></span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-24/16-square-red-add.png"/></span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-8/16-square-green.png"/></span></a></left>
Haz vista previa para comprobar que tu blog carga bien.

Por último guarda cambios.

Agrega a tu blog texto en movimiento

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Con estos códigos que puedes añadir tanto en entradas como en un elemento html javascript en el diseño de tu blog, conseguirás un efecto muy chulo: texto en movimiento.

Te dejo con los códigos:

UNO MODERNITO...

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


Texto aquí

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


Texto aquí

Y AQUÍ TE DEJO CON ESTE TAN CHULO!

<span><marquee direction="left" style="background:#FFCCFF">Texto aquí</marquee></span>


Es guapo ¿eh?....

AUNQUE ESTE OTRO TAMPOCO ESTÁ NADA MAL...

<marquee style="border:#cccccc 2px SOLID">Texto aquí</marquee>


¿A que te quedarias con migo?

EN GRANDE!!
<span style="color:#6AFB92; font-weight:bold;"><marquee direction="right" scrollamount="3" bg>Texto aquí</marquee></span>


AQUI VA TU TEXTO

PERO ESTE TAMBIÉN ESTA LINDO...
<marquee behaviour="ALTERNATE" bg>Texto aquí</marquee>


No estoy nada mal

Crear Banners con letras famosas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Banners de letras famosas
Si quieres crear un banner con los siguientes estilos de letra:

- Ferrari
- Star Wars
- Harry Potter
- Monsters SA
- Yahoo
- Nintendo

Puedes hacerlo perfectamente en esta página puedes crearlos. Sólo tienes que elegir tu estilo en la barra de la izquierda y escribir el texto en el recuadro donde dice "Type any text into the text box below and push the "Make" button" y hacer clic en "Make".

Aquí te dejo un ejemplo con las letras de Monstruos SA...



*Nota: la palabra que escribas no puede contener una tilde, o se suprimirá la letra.


¡Ahora disfruta!

Inserta texto o imagen con rebote

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Texto o imagen con rebote
Hoy te voy a dejar con un truco bastante bueno, se trata de aplicar la propiedad marquee y otras cosillas para dar este efecto...


Si quieres aplicar este efecto en tu blog, ve a Diseño>añadir gadget>html-javascript

Pegas este código:

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">
<img src="URL DE TU IMAGEN"/></marquee></marquee>


AQUI ESCRIBES TU TEXTO :-D

Pegas este código:

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">
AQUI EL TEXTO</marquee></marquee>


Rellena URL DE TU IMAGEN por la dirección (URL) de tu imágen.
Rellena AQUI EL TEXTO por el texto que desees tener en efecto rebote.

* Puedes conseguir lindas imágenes en iconlook.

¡Suerte!

Introducir texto en nivel superior o infererior (referencias)

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Texto en nivel superior o inferior
Esto que te voy a explicar es muy sencillo. Conseguirás hacer que alguna palabra o frase quede en un nivel inferior como esto o en un nivelsuperior como estoY para hacer dichasopciones sólo se usan dos indicaciones...

Para el nivel inferior usamos las etiquetas <sub> y </sub> y lo ponemos así:

<sub>AQUI EL TEXTO</sub>


Para el nivel superior usamos las etiquetas <sup> y </sup> y lo ponemos así:

<sup>AQUI EL TEXTO</sup>


¡Eso es todo!

Incluye en tu entrada una área de texto transparente

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original. 

Textarea transparente, sin bordes, incrustada en el post
Como el título dice, esto es una textarea, también llamada caja de texto. La única diferencia que tiene con respecto a la textarea normal, es que esta no tiene bordes y que en ella podemos incluir todo un párrafo, incluso un post entero...

Este es el código:

<span id="fullpost"><div align="center"><pre style="overflow: auto; width: 410px; height: 160px;"><div align="left"><span >
AQUI EL TEXTO O POST
</span></div></pre></div>
Lo incluyes en una entrada, si necesitas acortar un gran párrafo o si quieres "recojer" un código por ejemplo.

También podrías poner imagenes con el texto, y que todo esté dentro de la textarea, para ello debes usar este código:
<span id="fullpost"><div align="center"><pre style="overflow: auto; width: 410px; height: 160px;"><div align="left"><span >
<img src="URL DE LA IMAGEN"/>AQUI EL TEXTO O POST
</span></div></pre></div>
Y así sería el resultado...

> Solo con texto:

Aquí podrás escribir todo lo que necesites, todo lo que quieras, puedes poner algún aviso, algún código... Escribas lo que escribas, por muy largo que sea, ocupará el tamaño de la textarea, haciendo que el post no quede demasiado largo :-D

> Con imagen y texto:

Aquí podrás escribir todo lo que necesites, todo lo que quieras, puedes poner algún aviso, algún código... Escribas lo que escribas, por muy largo que sea, ocupará el tamaño de la textarea, haciendo que el post no quede demasiado largo :-D

Si quieres editar los valores, atiende a estas definiciones :-D

<div align="center"> Esto es la posición de la caja (center, que significa centrado) si quieres ponerla a la izquierda, escribe left y si la quieres a la derecha, escribe right.

width: 410px; Esto es el ancho de la caja, puedes personalizarlo a tu gusto, subiendo o bajando las cifras para agrandar o encojer la caja.

height: 160px; Esto es el alto de la caja, puedes
personalizarlo a tu gusto, subiendo o bajando las cifras para alargar o encojer la caja.
¡Suerte!

Como incluír un enlace en determinadas palabras de forma automática

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Incluir un enlace en determinadas palabras de forma automática
Este truco permite que una o varias palabras determinadas contengan un enlace. Bastará con escribirlas en la entrada como si de texto normal se tratase para que, de forma automática, se conviertan en un vínculo hacia otra página.

Puede resultar de gran utilidad para aquellos que enlazan frecuentemente una palabra a un determinado blog o apartado de éste. Una vez instalado el script, no será necesario incluir enlace alguno pues el texto plano se convertirá en link al publicar la entrada.

Una de las ventajas que ofrece es la facilidad con la que los buscadores indexarán nuestro sitio (siempre y cuando utilicemos la misma URL -de nuestro blog- y varias palabras 'clave') dado que cada enlace se crea 'por arte de magia'.

Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta </head> en tu plantilla y justo antes añade esta línea:

<script src='https://sites.google.com/site/scriptsbalcon/b/balJJTenlacesmag.js' type='text/javascript'/>

A continuación, localiza <data:post.body/> y reemplázalo por este bloque:

<div expr:id='"baLJJTenlaceS3" + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>

baLJJTenlaceS2('PALABRA',true,'URL PAGINA','baLJJTenlaceS3<data:post.id/>');

baLJJTenlaceS2('PALABRA',true,'URL PAGINA','baLJJTenlaceS3<data:post.id/>');

baLJJTenlaceS2('PALABRA',true,'URL PAGINA','baLJJTenlaceS3<data:post.id/>');
</script>

Sustituye en cada caso PALABRA por la palabra o frase que al ser escrita en una entrada contendrá el vínculo automáticamente. En URL PAGINA debes introducir la dirección del blog o apartado al que conducirá el término o frase.

Ten en cuenta que la palabra que escribas en cada línea debe ser idéntica a la que posteriormente escribirás en tus entradas. Letras mayúsculas, tildes o caracteres tendrán que ser iguales.

Hay un total de tres líneas en las que puedes insertar tres palabras o frases distintas. Si deseas agregar más, utiliza esto:

baLJJTenlaceS2('PALABRA',true,'URL PAGINA','baLJJTenlaceS3<data:post.id/>');

Recuerda que debe permanecer justo encima del cierre </script>.

Guarda la plantilla y acude a una entrada cualquiera. Escribe cualquier término resaltado en el código y comprueba que al publicar la entrada, la palabra se convierte en enlace y que éste contiene la dirección web atribuida.

Crear retazos de textos entrecomillados

Tiempo atrás vimos cómo personalizar los bloques entrecomillados aplicando estilos simples tales como un borde y un color de fondo.
Ahora no nos limitaremos tanto, y usaremos las pseudoclases :after y :before para que losbloques entrecomillados (blockquotes) tengan comillas, al inicio y al final de la cita. Además usaremos un poco más de CSS para hacerlos más vistosos.

La pseudoclase :before nos ayudará a poner "algo" antes del bloque entrecomillado, mientras que:after lo pondrá después.
¿Y qué podrá? Aquí entra la propiedad content a echarnos la mano, podremos usar comillas o imágenes para darle estilo a nuestro bloque.

El código base para entender de lo que hablamos es este:
.post-body blockquote:before {
content: "\201C";
}
.post-body blockquote:after {
content: "\201D";
}

Ahí indicamos que antes del bloque usaremos la comilla de apertura \201C que traducido al cristiano es esta: 
Y al final del bloque usaremos la comilla de cierre \201D que es esta: 
También podemos usar open-quote y close-quote en su lugar.
.post-body blockquote:before {
content: open-quote;
}
.post-body blockquote:after {
content: close-quote;
}

O bien, una imagen, en la cual la primera sería la imagen de la comilla de apertura y la segunda sería la imagen de la comilla de cierre:
.post-body blockquote:before {
content: url(URL de la imagen);
}
.post-body blockquote:after {
content: url(URL de la imagen);
}

Teniendo la base podemos crear diferentes estilos, este sería uno muy sencillo:
.post-body blockquote {
background:#F7F8E0; /* Color de fondo */
padding:10px;
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}

A este le podemos aplicar un fondo gradiente y sombras:
.post-body blockquote {
padding:10px;
border-color: #999; /* Color del borde */
background: -webkit-linear-gradient(top, white, #E0E0E0); /* Gradientes */
background: -moz-linear-gradient(top, #fff, #E0E0E0);
background: -ms-linear-gradient(top, #fff, #E0E0E0);
background: -o-linear-gradient(top, #fff, #E0E0E0);
box-shadow: 0px 0px 15px #000000; /* Sombra */
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}


A este lo haremos más "divertido" poniéndole un color más vivo y girándolo un poco:
.post-body blockquote {
border-radius: 5px; /* Borde redondeado */
box-shadow: 5px 5px 2px #696969; /* Sombra */
-webkit-transform: rotate(-4deg); /* Rotación */
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
background-color: #F4A460; /* Color de fondo */
padding: 10px;
color: #FFFFFF; /* Color del texto */
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}

Y a este le pondremos una imagen animada como comillas, además de un borde resplandeciente:
.post-body blockquote {
background:#CEECF5;  /* Color de fondo */
padding:10px;
width:85%;
border-radius: 0px 30px; /* Bordes redondeados */
border: 2px solid #fff; /* Borde interior */
-moz-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
-webkit-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
-goog-ms-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
}
.post-body blockquote:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLrwe1lAQNiMBoaTTS_jWLQUK1Ue-4kh0XuFSMLU239ivoKFulC5hJrbfcDT9iCZcPAfLBjmcisnFrQj4foA5CxTqjHP9xeXVw1pXFErR-yK1m7zQypvVIavq3UeZdvQD-wHCnqV_an6s/s52/comilla1.gif);
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvsv3G9diX0ZmEbtNEY8o0OBGC83BDdQudkxHxbYLnP4kxZL3rEnpjqnlid_QJlUsMi4IVwQC0TCX2MShN_Tqkv4tET0eS5XqzOoCsG3thZuS3d6J0CCFauwuOm0VAXHSCAqd3FuFsgZs/s39/comilla2.gif);
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}

Cualquiera de los códigos anteriores los puedes poner en sustitución de los que ya tengas, o bien, sino los tienes definidos puedes ponerlos antes de ]]></b:skin>

Cualquiera de los ejemplos es completamente personalizable, en color verde están las anotaciones del área a la que corresponde cada estilo.
En el caso de las comillas verás esto:
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;

font-family es el tipo de fuente, font-size el tamaño de la comilla, font-weight lo pone en negrita con la declaración bold, line-height es el espacio entre líneas, vertical-align es para alinearlo verticalmente, ypadding-top el espacio respecto a la línea de arriba.

Ten en cuenta que algunos de estos estilos sólo se verán en navegadores modernos -ya sabes por cuál lo digo- , pero en el resto se ve perfectamente bien.

Crea textos, banners, iconos y logos en segundos

Para aquellas personas que no se manejan con los programas de edición gráfica y quiere una herramienta sencilla, Cool Text les posibilita:
- Crear textos de forma personalizada con el estilo y la configuración que elijan
- Crear botones de forma personalizada con el estilo y configuración que elijan
- Descargar una serie de fuentes tipográficas, divididas por categorías, nombres y diseñador, para instalar en su sistema
Una vez creado el texto o botón, los usuarios podrán descargárselos en formato de imagen PNG, editarlos y, si disponen de cuenta de usuario, disponer del código html para situar en sus webs o enviarse los trabajos por correo electrónico. Las tipografías, por su parte, en general son True Type.
Enlace: Cool Text | Vía
Related Posts Plugin for WordPress, Blogger...