Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Primera letra de los títulos o de las entradas capital y personalizada

Siendo la letra inicial del texto, la primera letra o letra capital es algo a lo que se le debería atribuir una apariencia algo distinta ya que es el carácter "encargado" de captar la atención de los lectores de un blog, además de usarse frecuentemente en revistas o boletines.

He dado con un procedimiento muy sencillo que permitirá mostrar la letra capital tanto del título de la entrada como del contenido del artículo con un estilo distinto, pudiendo escoger su color, tamaño, estilo, tipo de fuente...




¿Lo mejor de todo?

Es algo automático, por lo que una vez que apliques el truco, tu letra se mostrará en todas las entradas, evitando el procedimiento antiguo que involucraba el tener que utilizar un código para mostrar la letra capital (¡entrada por entrada!).


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



Busca la etiqueta ]]></b:skin> y encima añade estos bloques de CSS:

.post h3 a:first-letter {
font-size:28px;
color:#666666;
font-style: italic;
}

.post-body:first-letter {
font-size:28px;
color:#666666;
font-style: italic;
}

El primer bloque es el que aportará estilo a la letra inicial del título de las entradas.

El segundo y último bloque aportará estilo a la letra inicial del contenido de la entrada.

Puedes hacer uso tanto de un solo bloque como de ambos.

"Editar la letra"

A continuación veremos los valores que pueden editarse para cambiar el aspecto a este carácter inicial.

En ambos casos, el tamaño puede editarse en a línea font-size:28px;, reemplazando 28px por un valor mayor o menor.

Por otra parte, el color también es personalizable y debe introducirse en la línea color:#666666;, sustituyendo #666666 por el código de tu color favorito (ver tabla de colores).

La letra aparecerá en cursiva al no ser que edites el valor italic, en la línea font-style: italic; e insertes el valor normal.

En caso de desear una fuente de texto distinta, agrega esta línea antes de la llave de cierre (}).

font-family: Comic Sans MS;

Comic Sans MS representa el nombre de la fuente de texto pero puedes editarlo por cualquier otro. Aquí unos ejemplos: Arial, Trebuchet MS, Times New Roman...

Guarda la plantilla una vez hayas terminado.

Juan dice...

Muchas gracias Jaime, en mi caso he añadido a la letra un color de fondo que contrasta con el efecto al pasar el ratón sobre los titulos.

Jaime Trujillo Escobedo dice...

Una idea muy buena, Juan. Estoy seguro de que si además añades un color de fondo al título (distinto) al pasar el cursor usando la propiedad hover quedará perfecto.

Cocina dice...

Hola Jaime!!que bonito truco!!
ya lo he implementado en mi blog!!;)
besitos !!
claudia

Cocina dice...

ahhhh y tambien logre colocar un menu!!!que tal? estoy aprendiendo!!!!iupii!!:)
saluditos!!
claudia

pd:me gustaria que lo veas y me des tu opinion.

Jaime Trujillo Escobedo dice...

¡Ya veo, Claudia! El menú te quedó muy bien, sinceramente has avanzado muchísimo. Me gusta el botoncito con el icono de blogger para mostrar / ocultar la navbar ;).

Cocina dice...

Jaime!!se me habia pasado contarte eso!!(que tambien lo apredndi aqui)y la division entre las entradas y gadgets con lineas punteadas!!
gracias por compartir con nosotros tanto conocimiento Jaime!!
besitos!
claudia

Jaime Trujillo Escobedo dice...

Tranquila, Claudia, no hay problema alguno. Por cierto, mil gracias por incluir el banner del Balcón en tu blog.

¡Abrazos!

Cocina dice...

Hola Jaime,no se porque dejo de funcionar este truco en mi blog,tenes idea porque pudo pasar??es raro de un dia para otro no mostro mas la primera letra grande....
saluditos
claudia

Jaime Trujillo Escobedo dice...

Claudia, prueba reemplazando la línea .post h3 a:first-letter { por .post-title a:first-letter{. Haz vista previa para comprobar el resultado ^^.

Cocina dice...

no Jaime probe y sigue sin aparecer :(

Jaime Trujillo Escobedo dice...

Buff Claudia, entonces tendremos que "analizar" el blog ^^... ¿Has instalado algún truco recientemente? Me refiero sobre todo a algún artilugio (widget / gadget) o si tan solo has modificado algo en el CSS de la plantilla.

Cocina dice...

HOLA Jaime!!gracias por tu respuesta!sabes que me he dado cuenta que en IE no se ve el efecto y probe como se veia en GOOGLE CHROME y ahi si se ve perfecto!:O ...porfavor decime que solo es segun el navegador y que no es mi plantilla!!jejee
besito!
claudia

♥ Ana dice...

Otra cosilla más que he puesto en mi blog, la verdad es que queda muy elegante , aunque sólo me sale el truco en el título de las entradas, no me sale en la primera palabra del contenido de la entrada en si, pero, bueno, tampoco me importa, de momento, con que me salga en el título, ya me vale.
Muchísimas gracias por todo
Un besazo

Jaime Trujillo Escobedo dice...

Se trata del navegador, Claudia, al igual que el truco para conseguir bordes redondeados con CSS, que funciona en todos los navegadores excepto en Internet Explorer.

Hay otros trucos similares a este que también funcionarán en IE pero con el inconveniente de tener que estar copiando un código en las entradas cada vez que desees una letra capital.

Jaime Trujillo Escobedo dice...

Te ha quedado estupéndo, Ana, me gusta el color que le has dado, sobre todo porque pega muchísimo con el del título en si.

Por cierto, un millón de gracias por haberme mencionado en tu entrada acerca de Lista de blogs en movimiento. Como suelo decir, es un honor :D.

Jose dice...

hola jaime: a mí la letra del título me sale normal pero la de la entrada sí sale personalizada.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo