Aunque puede descargarse un ZIP
![](http://2.bp.blogspot.com/_hljKDuw-cxQ/Rr4TAhWfWOI/AAAAAAAACBI/-9Bt9DNVm4o/s00/ImageZIP.gif)
1. Para textos grandes como los títulos, lo mejor es recurrir a fuentes de tipo sans serif (Arial, Basic Sans SF o Helvetica).
Los títulos MUY grandes
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
![](http://2.bp.blogspot.com/_hljKDuw-cxQ/RwsTUmY2u8I/AAAAAAAADBA/-5XcB0x71AM/s00/verocultarCodigo.gif)
<div id="big-bold">
<h1 class="big-bold">EL TITULO</h1>
<p>[ ... el texto a mostrar ... ]</p>
</div>
Las propiedades CSS:
#big-bold {
background-color: #FFF;
color:#000;
}
h1.big-bold {
font-family: 'basic Sans sf', arial, helvetica, sans-serif;
font-size: 2.1em;
color: orange;
}
#big-bold p {
font-family: arial, helvetica, sans-serif;
font-size: 0.9em;
line-height: 1.6;
}
Gradientes Sobre Títulos
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
![](http://2.bp.blogspot.com/_hljKDuw-cxQ/RwsTUmY2u8I/AAAAAAAADBA/-5XcB0x71AM/s00/verocultarCodigo.gif)
<div id="gradient">
<h1 class="gradient"><span></span>EL TITULO</h1>
<p>[ ... el texto a mostrar ... ]</p>
</div>
Las propiedades CSS:
#gradient {
background: #000;
}
h1.gradient {
font-family: arial, helvetica, sans-serif;
font-size: 38px;
line-height: 38px;
color: #FFFF;
position: relative;
}
h1.gradient span {
background: url(URL_h1-gradient.png) top left repeat-x;
display: block;
height: 20px;
position: absolute;
width: 100%;
}
#gradient p {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.8em;
color: #CCC;
line-height: 1.6;
}
Poniendo todo en mayúsculas
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
![](http://2.bp.blogspot.com/_hljKDuw-cxQ/RwsTUmY2u8I/AAAAAAAADBA/-5XcB0x71AM/s00/verocultarCodigo.gif)
<div id="uppercase">
<h1 class="uppercase">EL TITULO</h1>
<p>[ ... el texto a mostrar ... ]</p>
</div>
Las propiedades CSS:
#uppercase {
background: #000;
}
.uppercase {
font-family: georgia, "times new roman", times, serif;
font-size: 1.2em;
text-transform: uppercase;
}
#uppercase p {
font-family: georgia, "times new roman", times, serif;
font-size: 0.9em;
line-height: 1.4;
}
LetterSpacing y WordSpacing
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
![](http://2.bp.blogspot.com/_hljKDuw-cxQ/RwsTUmY2u8I/AAAAAAAADBA/-5XcB0x71AM/s00/verocultarCodigo.gif)
<div id="spacing">
<h1 class="spacing">EL TITULO</h1>
<p>[ ... el texto a mostrar ... ]</p>
</div>
Las propiedades CSS:
h1.spacing {
font-family: Tahoma;
font-size: 1.8em;
text-transform: uppercase;
letter-spacing: 0.08em;
word-spacing: 0.1em;
color: #ccc;
}
#spacing p {
font-family: tahoma, georgia, "times new roman", times, serif;
font-size: 0.9em;
line-height: 1.4;
letter-spacing: 0.05em;
}
Efecto de títulos subrayados
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
![](http://2.bp.blogspot.com/_hljKDuw-cxQ/RwsTUmY2u8I/AAAAAAAADBA/-5XcB0x71AM/s00/verocultarCodigo.gif)
<div id="underline">
<h1 class="underline">EL TITULO</h1>
<p>[ ... el texto a mostrar ... ]</p>
</div>
Las propiedades CSS:
#underline {
background: #EEE;
}
h1.underline {
background: url(URL_h1-underline.png) bottom left no-repeat;
font-family: georgia, "times new roman", times, serif;
font-weight: lighter;
}
#underline p {
font-family: "trebuchet ms", verdana, sans-serif;
font-size: 0.9em;
}
Usando la técnica de DropCap
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
![](http://2.bp.blogspot.com/_hljKDuw-cxQ/RwsTUmY2u8I/AAAAAAAADBA/-5XcB0x71AM/s00/verocultarCodigo.gif)
<div id="dropcap">
<h1 class="dropcap"><span>E</span>L TITULO</h1>
<p>[ ... el texto a mostrar ... ]</p>
</div>
Las propiedades CSS:
h1.dropcap {
font-size: 28px;
font-family: arial, verdana, sans-serif;
line-height: 28px;
}
h1.dropcap span {
font-size: 80px;
font-weight: lighter;
position: relative;
float: left;
line-height: 50px;
color: #CCC;
}
#dropcap p {
font-family: georgia, "times new roman", times, serif;
font-size: 0.9em;
line-height: 1.4;
}
REFERENCIAS:
![](http://2.bp.blogspot.com/_hljKDuw-cxQ/RYYsHAuhGmI/AAAAAAAAACw/dkxg-2MF6RU/s320/WebExterna.gif)
24 comentarios:
A mí en lo particular el efecto sobre el texto que más me gusta es el que da como resultado un texto en versalitas (o small caps) irónicamente lo ocupo poco en mi blog (y no en los títulos). Aún así, el psot me acaba de dar una buena idea :) mil gracias!
Bien, ya queda atrás el subrayado, los iconos a la izquierda y color de fondo.
Me gustan todas veamos como queda :)
Una pregunta, es sobre los títulos, pero los de la sidebar como se hace para que no queden en mayúsculas? O sea que salgan justificados. Creo que lo sabía, lo leí en algún lado, pero no me acuerdo :(
Muy bueno :D
Pepe:
Es verdad; las fuentes tienen muchas alternativas que van más allá de los títulos así que veremos que es lo que se te ha ocurrido :)
Por cierto, aprovecho para suscribir cada palabra de lo que has dicho en este post.
Gem@:
El subrayado me parecio muy original y sencillo de hacer. No se me había ocurrido algo así :D
k_nelita, las definicione están en:
.sidebar h2 { aquie estan las de la posición
}
y en:
h2 {
............
text-transform:uppercase;
}
Esa propeidad en negrita es la que los coloca en mayúsculas. Si la eliminas vuelven a ser "normales".
Alguno de estos trucos se puede aplicar a los títulos de blogger?
Sí, Aponcho; cualquiera de ellas, sólo hay que buscar cuál es la definición que los controla. Generalmente es:
.post h3 {......}
o bien:
.post h3 a {......}
Gracias JMiur, ya lo corregí, hasta le agrandé la fuente y supuestamente la puse en negrita, digo supuestamente porque no estoy muy segura de que lo haya tomado lo de bold, en el título del post se ven mas oscuras las letras que en los títulos de la sidebar, pero igual está bien... por ahora jaja
Muchas gracias ;)
Lo que ocurre es que si la fuente es grande, ciertos fonts no se diferencian entre negritas o normales.
Hombre... que tampoco era tan grande...jaja ja 14 pixeles nomás, dale una miradita si podés, sino igual está bien así, los títulos de los post si mal no recuerdo son de 16 px, pero ya está no te preocupes, me gusta así.
Gracias ;)
Jajajaja, no, es GRANDE pero eso pasa con las fuentes :D
Hola, disculpa que mi pregunta no tenga que ver con la entrada, pero ¿cómo elimino el mensaje "Mostrando entradas con la etiqueta comentarios. Mostrar todas las entradas" cuando hago la busqueda por etiquetas. Lo otro, ¿sabes como cambiar el mensaje de "Entradas antiguas" o "Entradas recientes" por el título de la entrada que debiera aparecer al clickear?
Mira.. la idea es agregar eso, principalmente al menú de Comentarios del blog http://clockwork-tangerine.blogspot.com
Ojalá me puedas ayudar..
Saludos
Hola, yo de nuevo, tengo otro problema..
En la parte de diseño, desactivé la opción de mostrar las etiquetas de entrada, sin embargo siguen apareciendo. ¿Dónde puedo sacar eso? Me imagino que en la plantilla HTML, pero no me manejo mucho en eso. Normalmente hago las intervenciones siguiendo las instrucciones que das en el blog.
Saludos
Para eliminar esos mensajes, busca este código y simplemente lo borras:
<b:include data='top' name='status-message'/>
Para cambiar los textos por un ícono, si te fijas en el blog de Gem@ hay una explicación clara de cómo hacerlo: AQUÍ
Esa parte de desactivar las etiquetas debería estar funcionando si has desmarcado la opción editando Entradas del Blog. Fíjate si has guardado los cambios, por ejemplo y si realmente han quedado desactivadas.
Eliminar el código, tal vez sea engorroso de explicar aquí. Una posibilidad menos drástica sería ocultarlo. Elo lo puedes hacer agregando lo siguiente antes de </b:skin> :
.post-footer-line-2 {display:none;}
Si, efectivamente guardé los cambios, por eso no entiendo que sucede.. voy a probar con la solución alternativa.
Sobre el anterior, mi pregunta era si por ejemplo en vez de "Entradas antiguas" podría decir el título de la entrada antigua. Algo así como un "data:newerPostTitle". La verdad no se si existe esa opción, porque al menos ese ejemplo que te doy, no funciona.
Gracias por la ayuda.
Saludos
Hay un post donde se habla de eso, mostrar los títulos en lugar de entradas antiguas. Tiene sus dificultades, sobre todo si se usan acentos, etc. Lo usé un tiempo y luego lo descarté pero, funciona.
¿y que significa "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."?
Buena pregunta esta última que todos nos hicimos alguna vez :)
Ahhhhhhhh !!!!!!!! Pués, según la Wikipedia es una copia de la obra de Cicerón De finibus bonorum et malorum (Sobre los límites del bien y del mal) XD
Es mejor qu escribir ofhiuencaa wttyssdtitr ahahsdadgwe o algo por el estilo :D
En pocas palabras es un texto que carece de interés para no restar importancia a lo que en realidad la tiene, un ejemplo de importancia los ejemplos de J.Miur.
En pocas palabras es ... un relleno :D
jajajajaja me rindo usaste menos palabras.
:D
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...