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!).
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.
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.
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.
Hola Jaime!!que bonito truco!!
ya lo he implementado en mi blog!!;)
besitos !!
claudia
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.
¡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 ;).
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
Tranquila, Claudia, no hay problema alguno. Por cierto, mil gracias por incluir el banner del Balcón en tu blog.
¡Abrazos!
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
Claudia, prueba reemplazando la línea .post h3 a:first-letter { por .post-title a:first-letter{. Haz vista previa para comprobar el resultado ^^.
no Jaime probe y sigue sin aparecer :(
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.
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
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
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.
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.
hola jaime: a mí la letra del título me sale normal pero la de la entrada sí sale personalizada.