Desde que publiqué la plantilla Quo Template me han preguntado cómo he hecho para poner la letra capital a todos los títulos de las entradas pero específicamente cómo puede hacerse para poner la letra capital al inicio de cada entrada.
Anteriormente habíamos visto una manera de poner la letra capital en las entradas usando un poco de CSS y con ayuda de un pequeño código en las entradas que se desee que aparezca la letra capital.
Con esa otra forma el proceso es más simple, pues con sólo un cambio de agregará a todas las entradas de forma automática.
Lo único que hay que hacer es agregar el pseudo-elemento first-letter que hará que tome la primera letra del texto y le aplique los estilos que hayamos elegido.
Para realizarlo sólo entra en Diseño | Edición de HTML y antes de ]]></b:skin> agrega lo siguiente:
.post-body:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}
A partir de ahí ya aparecerá la letra capital en todas las entradas, pero también puedes agregar otros estilos a la letra, tales como el tipo de fuente, grosor, etc.
Estos son algunos otros atributos que puedes agregar:
font-weight: bold; /* letra en negrita */
font-family: Arial; /* tipo de letra */
font-style: italic; /* letra cursiva */
El procedimiento es muy sencillo y se puede aplicar a muchas áreas, por ejemplo:
Si quieres que los comentarios también tengan letra capital agrega esto:
Si quieres que el título de las entradas tenga letra capital agrega esto:
Si quieres que el título del blog tenga letra capital agrega esto:
Si quieres que los bloques entrecomillados tengan letra capital agrega esto:
Consideraciones finales:
.comment-body:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}
Si quieres que el título de las entradas tenga letra capital agrega esto:
.post h3 a:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}
Si quieres que el título del blog tenga letra capital agrega esto:
#header h1:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}
Si quieres que los bloques entrecomillados tengan letra capital agrega esto:
.post-body blockquote:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}
Consideraciones finales:
- Funciona en todos los navegadores.
- Si hubiera una imagen antes del texto entonces no se mostrará la letra capital.
- Si la letra capital tuviera un signo antes o después de ella estas también se verán afectadas con los estilos.
Ciudad Blogger
necesito poner en el blog un calendario interactivo, es decir, que la gente pueda poner sus eventos en él. Habia pensado en un calendario como la agenda de nokia. Asi, la gente puede dejar ahi sus eventos para que todo el mundo que entra en la web los vea. muchas gracias por tu tiempo.
ResponderEliminarMuy buen articulo, pronto lo voy a poner en practica, como siempre muy buena info.
ResponderEliminarSaludos!!!
PONTENOVA.ES, desconozco con qué gadget pueda hacerse eso.
ResponderEliminaradriancybor, gracias por tu visita :)
Hola Potro, tengo una consulta del Diseñador de Plantillas Blogger in Draft
ResponderEliminarFui a publicar una nueva plantilla, y en elegi la plantilla Picture Window de Josh Peterson, la tercera.
Cuando voy a la sección de Fondo, se puede colocar una imagen de mi escritorio, o una imagen de con un link?
Saludos!
Esta es la página para que te fijes: http://videosporvelez.blogspot.com/
ResponderEliminarQuiero poner otro fondo... Se puede?
Muy buena la forma, no me gusta, pero creo que se lo voy a poner al blog mi papa ya que es de un diario.. mi web es www.guicheweb.tk , felicidades por el blog!!!!
ResponderEliminarColoush +16, parece que ya lo has arreglado.
ResponderEliminarDatos Del Blog, sí, es un tanto serio usa las letras capitales, seguro a tu papá le gustarán más :)
Muy bueno, lo voy a usar para los bloques entrecomillados.
ResponderEliminarSaludos.
Valla se ve resugoi la letra Potro.. pro no se se ve como para blog d mi tia XD prefiero la d mi temple... me encanta tu pagina... espero subas mas trucos ^^
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarUna unica pregunta...Acaso me podrias decir como puedo eliminar la cabecera (titulo) del blog? yo intento eliminarla desde EDICION HTML cambiando el valor de la cabecera por false y asi eliminandola desde elementos de pagina..pero aparece de nuevo...Ayuda...Gracias
ResponderEliminarEl Potro, tengo una pregunta que no va con esta entrada.
ResponderEliminarMi blogger se ve bien en IE7, pero no se ve igual en Mozilla e IE8...
¿Cómo puedo adapar mis páginas para todos los navegadores?
Si ya lo arregle, Gracias !
ResponderEliminarDatos Del Blog, mira esta entrada, ahí se explica cómo ocultar el título del blog.
ResponderEliminarJorge Alonzo, hay algunas incompatibilidades que se pueden solucionar pero no todas, creo que lo mejor es que consideres una platilla que sea compatible con todos los navegadores :(
Hola Potro, nada que ver con el tema lo que te voy a decir pero bueno.... La cuestión es que hice un sript para un blog que tengo (el primer script que hago) y lo quería compartir. Como no trata sobre recursos para blogs mi blog no tenía sentido que lo posetee ahí. Lo postié en Taringa, pero en verdad ahi a nadie le interesa mucho tampoco, así que te dejo el enlace al post de taringa por si te intersa posetearlo en tu blog. Saludos. Seba.
ResponderEliminarwww.taringa.net/.../Buscador-rapidshare,-megaupload,-etc___-y-cómo-poner-uno-en.html
Ok gracias....Saludos!
ResponderEliminarok muchas gracias potro
ResponderEliminarperdona pero porque no me sale si estoy haciendo tu mismo paso?
ResponderEliminarNo veo que tengas puesto el código en tu blog.
ResponderEliminarJejeje...que sencillo!!! me mató eso: "first-letter" buenísimo!!
ResponderEliminarUn abrazo!!!
¿Verdad que sí? Y eso que ya es muy viejo ese atributo sólo que ha sido poco popular.
ResponderEliminarUn abrazo!
es es el detalle ya lo coloque y no se muestra y no entiendo pues lo coloque antes de ese codigo que indicaste por eso que esta pasando? osea que explicacion podria haber para eso?, perdon si se oyo como un reclamo, solo es una pregunta
ResponderEliminarYa lo veo funcionando en tus entradas ;)
ResponderEliminarMe ha funcionado de maravillas, aunque tuve que hacer algún cambiecito, muchas gracias. Lo apliqué a los comentarios y a los blockquotes, para las entradas preferí dejar el sistema antiguo, porque a veces no es precisamente la primera letra de la entrada la que quiero capitalizar, y con el otro sistema podía elegir donde colocar la capital.
ResponderEliminarMuchas gracias y un saludo!!
Es la ventaja de tener dos opciones que puedes combinarlas para tener los resultados que más se ajusten a tus necesidades.
ResponderEliminarQué gusto que te haya sido útil :)
Saludos.
hola en esta oportunidad mí consulta es la siguiente tengo un blog de películas y hasta el día de hoy todavía estoy tratando de saber cómo hago para que la fotos de cada película me pueda quedar una al lado de la otra y su vez sean el enlace de la película que corresponde de verdad que si puedes resolver mí duda desde ya te estaré muy agradecido
ResponderEliminarP.D. me faltó enviarte la dirección del blog que corresponde a las películas videoclublatinoonline.blogspot.com ahora sí saludos
ResponderEliminarNecesitarías que la plantilla fuera tipo "magazine" pero se requiere de muchas modificaciones, en estos días publicaré cómo hacerlo.
ResponderEliminarMuchísimas gracias por el truco, es la primera vez que te escribo, te quería hacer una consulta, he puesto éste truco en la sidebar y en la primera letra de los títulos de los posts, pero no hay manera de que me salga la primera letra de las entradas, sin embargo en mi blog de pruebas me sale perfectamente,¿alguna idea sobre cuál puede ser el motivo?, imagino que tengo puesta alguna otra cosa que hace que no me funcione ahí, pero ni idea de lo que puede ser.
ResponderEliminarDe momento, estoy con otro truco pero, no es automático como éstos tuyos, tengo que poner manualmente cada primera letra de cada post y es un poco rollo tener que hacerlo así
Agradezco de antemano tu ayuda y te vuelvo a dar las gracias por éste y otros trucos tuyos que me han servido y, oye, por los que no me han servido también, jajaja
Un saludo
Hola ♥ Ana,
ResponderEliminarNo veo que tengas puesto el código en tu plantilla, necesitaría ver que lo tengas puesto (el de las entradas) para ver cuál puede ser el problema. Además, claro, cuando lo pongas debes quitar el otro método de las letras capitales, al menos en una entrada para verificar que está funcionando.
Saludos.
Pues no, no lo tengo puesto, como no me funcionaba lo quité, pero, lo pongo en un momento, quito el otro y pongo éste para ver si ves algo
ResponderEliminarGracias
Ya está, lo he puesto tal cuál lo has puesto tú, sin ningún cambio
ResponderEliminarBien, entonces prueba con este otro código:
ResponderEliminar.post-body div:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}
Saludos.
Aquí vuelvo, estoy a la espectativa, en cuanto me escribes me voy corriendo a hacer lo que me dices, jejejeje
ResponderEliminarMira he dejado puesto lo que me has dicho y como verás, sigue sin ponerse la primera letra del post, se ponen otras más abajo, después de un punto y aparte, se me pone la primera letra más grande pero no la primera del post, oye, no quiero molestarte, si no sale, lo dejo como estaba y punto
Gracias de nuevo
Bien, si te fijas en otras entradas como por ejemplo esta:
ResponderEliminarhttp://vientoybambu.blogspot.com/2010/11/crema-de-lentejas-con-setas-y.html
Sí funciona, pero en la última que tienes no. La razón es esta:
El atributo first-letter que se usa para este "truco" no funciona cuando se tiene una imagen antes del texto. Y sí, en ambas entradas usas una imagen al inicio, pero la diferencia entre la que sí funciona y la que no es la posición en la que está colocada la imagen.
Para no extenderme demasiado y no confundirte más, haz esto, edita la entrada donde no te funciona y estando en la pestaña Edición de HTML (junto a la de Redactar) verás que en la primera línea aparece esto:
<div style="text-align: justify;">
Esa línea quítala de ahí y ponla justo antes del primer texto que tengas, no antes de la imagen, y verás que se arregla el problema.
Saludos.
Hola Potro. He tenido el mismo problema, pero en el HTML de la entrada no me sale el texto que tú dices.
Eliminar¿Qué puedo hacer?
Hola Judyth, ¿exactamente cuál es el problema y en cuál blog?
Eliminar¡¡Tenías razón!! esa era la solución, muchas gracias.
ResponderEliminarPero, sigue el problema de que son varias las letras que se ponen más grandes, concretamente la primera que está después de cada punto y aparte y también todas las primeras letras que están debajo de cada imagen del gadget LinkWithin, he probado poniendo de nuevo el código que pones en tu post pero, con él seguía sin verse el truco, así que, he vuelto a poner el que me has dicho en tu anterior comentario, es decir éste:
.post-body div:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}
Muchas gracias por tu tiempo, eres muy amable
Juan, muchas gracias por tu comentario, y por supuesto, por el enlace :)
ResponderEliminar♥ Ana, lo que sucede es que en la entrada tienes varios párrafos encerrados entre <div style="text-align: justify;"> y </div> y por eso la letra capital se aplica también ahí, aunque esos códigos siempre los agrega el editor avanzado de Blogger. Pero a decir verdad, no se ve nada mal así que está :)
Tienes razón, en las entrads no queda mal que se vea así, lo que no me gusta es que se vea en la primera letra debajo de cada imagen del gadget LinkWithin pero, imagino que es normal que se vea así puesto que cada letra capital de cada entrada está más grande con lo cuál se refleja también en la letra capital de cada entrada del gadget
ResponderEliminarGracias, muchas gracias por tu ayuda
Un abrazo
Fenomenal Potro!!!!
ResponderEliminarLo he colocado en los títulos de las entradas.
¡¡ G R A C I A S !!
Me alegro que te hayan gustado :)
ResponderEliminarPotro Como cambio el tipo de letra de mi blog, osea solo en los titulos de las entradas y demas partes del blog
ResponderEliminarDentro de .post h3 { se encuentran los estilos de los títulos de las entradas, ahí se puede cambiar el color, tipo de letra, tamaño, etc.
ResponderEliminary donde puedo ver los tipos de letras que puedo usar?
ResponderEliminarLas fuentes básicas que aceptan la mayoría de los navegadores son estas:
ResponderEliminarhttp://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Gracias por el truco, lo he usado porque me parecía curioso y daba otro toque a las entradas. Ahora bien, me sale sólo en la primera que he puesto de prueba, en las otras no (en las sin imágenes, me refiero. Te dejo mi url
ResponderEliminarhttp://sagraldar.blogspot.com/
Probablemente no leíste el final de la entrada donde dice que si hay una imagen antes del texto o un signo entonces la letra capital no se muestra ;)
ResponderEliminarHola Potro!
ResponderEliminarEste no es el lugar indicado para esta pregunta pero es que no sabía donde ubicarla.
Se han cambiado el estilo de la letra de dos de los títulos de la sidebar, el de bienvenidos y el de contacto, también el título de la entrada,
yo no he tocado a nada, el estilo lo tenía modificado por 'loster' y me gustaba mucho como quedaba, ¿Porque ha podido pasa esto?
¿Como puedo arreglarlo?
He mirado en la palntilla y el estilo de la letra de esos dos gadgets, es 'Lobster' tal y como yo lo modifiqué, pero ese no es el estilo que se ve ahora en mi blog
Mi blog es http://nancyesunica.blogspot.com/
Gracias de antemano.
Hola MariajoyAndrea,
ResponderEliminarHe entrado a ese blog y veo el tipo de fuente Lobster en esas áreas, supongo que era un problema temporal o que ya lo has resuelto.
Saludos.
Hola Potro! Deambulando por la red en busca de como poner la primera letra capital, he encontrado tu blog y quería pedirte ayuda, lo he intentado todo para poder ponerla y no consigo ver cual es el problema, por qué no se me diseña correctamente. Aún voy algo perdida en esto del blog y quiero diseñarlo, pero mis pasos están siendo algo torpes, si puedes ayudarme te lo agradaceré mucho :)
ResponderEliminarHola Sonia,
ResponderEliminarPrimeramente bienvenida a Ciudad Blogger!
Tienes que poner el código justo antes de donde se indica, ahí donde lo has puesto es muy parecido pero no es el mismo. Revisa de nuevo el código que tienes que buscar, para que se te haga más fácil usa las teclas CTRL + F
Cualquier cosa por aquí estamos ;)
Hola Potro!!
ResponderEliminarHe descubierto tus espectaculares consjos y los estoy practicando, pero no puedo poner mi primera letra del blokquote ¿tal vez xq tiene colores y líneas? Dónde lo pondría. Cuando lo hice me cambió todo y lo dejó sin efectos. Si es el caso que aclarás al final del post, está todo OK.
Gracias por compartir conocimientos...
Hola Estela,
ResponderEliminar¡Bienvenida a Ciudad Blogger!
¿En cuál blog has puesto el código del blockquote y la entrada de ejemplo?
Hola Potro!
ResponderEliminarQuise ponerlo en La sonrisa... pero en la prueba ya no me salía, así que lo dejé para no desconfigurarlo todo :S
No sé si el código va bien al principio o donde comienzan las especificaciones del texto.
Mi blokquote ahora está así
.post blockquote {
border-left: 3px solid #05E0FC;
border-right: 3px solid #05E0FC;
border.radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background: #F8FAFA;
padding: 10px;
font-size: 13px;
color: #2E2E2E;
font-family: segoe print;
}
Vos me dirás...
Gracias
Otra cosa, ¿dónde pongo otros modelos/alternativos de blockquote y cómo los identifico fuera del HTML?
ResponderEliminarCariños...
Hola de nuevo Estela,
ResponderEliminarNecesitaría ver puesto el código en la plantilla. Muchas veces el problema está en la forma que se ha colocado, así que sólo teniendo el código pudo detectar el problema.
Otra forma de personalizar los bloques entrecomillados es esta:
http://ciudadblogger.com/2009/11/personalizar-los-bloques.html
Holis!
ResponderEliminarDe nuevo yo con otro avatar :)
Potro... no puedo poner ni letra capital en el blokquote ni los separadores en las entradas o en los gadgets. He probado todas las alternativas que das, no sé si el problema es que mi plantilla es una simple a la que he modificado. Cuando pongo vista previa no veo ningún cambio... Sigo probando...
Chauchis...
Sos el mismo adm de mundo blogger? Porque allí está exactamente el mismo posteo de cómo poner separadores en gadgets...
ResponderEliminarYa pude con los separadores del post pero no de los gadgets :(
Hola Estela,
ResponderEliminarNo soy el mismo administrador de ese blog, ese sitio sólo se dedica a plagiar el contenido de los demás.
En cuanto a los códigos sigo sin saber en qué blog lo has puesto y sin saberlo me es difícil saber dónde puede estar el problema :/
Perdón... :S
ResponderEliminarEn "La sonrisa del gato..." Y no puedo poner los separadores en los gadget, ahora no están puestos. ¿Es necesario que los ponga en la edición HTML aunque no se vean en el blog para que identifiques el problema?
Gracias...
Hola de nuevo Estela,
ResponderEliminarSucede que cuando has puesto el código de la letra capital has eliminado la llave de cierre de los bloques entrecomillados, eso ha hecho que no funcione el de la letra capital. Mira esta entrada para que veas de qué hablo:
http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
En cuanto a lo otro sí, es necesario que esté puesto, pero seguramente es por la misma razón de la letra capital, seguro que eso ha causado que tampoco funcionen los separadores.
Saludos.
hola potro
ResponderEliminarsabes como puedo agregar mas formatos de letras para utilizar en el blogger?
Con la plantilla que tengo, se me redujeron las posibilidades.
Gracias
Hola, ¿a qué te refieres con más formatos y para qué áreas del blog?
ResponderEliminarPotro, buenas tardes
ResponderEliminarIntento ver los titulos de mis entradas tal como los escribo (text-transform: none), en lugar de todas las letras en mayusculas, pero no hay manera de cambiarlo. Me puedes ayudar?
Buenas tardes. Lo que sucede es que la fuente que has elegido así es, está en mayúsculas todos los caracteres, eso ya no puedes cambiarlo en el CSS pues así es la fuente, tendrías que elegir otra fuente que no se vea de esa manera.
EliminarMecachis, ya podia volverme yo loca cambiandolo. Gracias!
EliminarEl Potro, ¿donde debo agregar los estilos?
ResponderEliminarTodos los estilos van siempre antes de ]]></b:skin>
EliminarMuchísimas gracias, Potro, ¡truco recién puesto!, con las ganas y el tiempo que hacía que lo quería...
ResponderEliminarUn beso enorme
Re fácil ¿verdad? :)
EliminarUn beso.
Hola, Potro, b uenos días :))
ResponderEliminarAndo rebuscando en tu Ciudad una solución para una de mis cuitas, y es que me gustaría que los títulos de mis entradas no se vieran así, como aparecen, en mayúculas todas las letras. Me gusta el color y el tamaño, pero preferiría sólo en mayúsculas la primera letra, o las que yo quiera, y las otras en minúscula.
He estado indagando en el html, pero nada, no doy con la solución, si es que la hay, así es que te pido ayuda, si puedo cambiarlo, o tiene que ser así, sin remedio.
Otra cosa que también he estado intentando solucionar es acerca del gadget de seguidores; a veces lo pongo y a veces no, por eso, porque no soy capaz de personalizarlo, y los colores que salen, los que da blogger, la verdad es que no pegan con el resto del blog, y no me gustan: el azul de "Participar en...", el rojo que dice el número de miembros.
En fin, he leído por ahí que no se puede modificar, que es lo que hay y no hay más, pero la esperanza la perderé cuando me lo comentes tú, ¿tiene "arreglo" este gadget?
Gracias por tu paciencia y tu sabiduria en estas cuestiones que a más de un@ nos dan dolor de cabeza :))))
Te deseo un buen día
Un beso desde esta España en crisis
Ío
Hola Ío, buenas tardes desde acá.
EliminarNo mencionas en cuál blog tienes el problema, pero pueden ser dos cosas: que tengas el estilo: text-transform:uppercase, o que la fuente de los títulos esté diseñada así en mayúsculas.
De lo otro, siento ser yo quien rompa esas esperanzas pero es verdad, no se puede personalizar prácticamente nada de ese gadget, pues aunque agreguemos códigos para él nunca se aplican :(
Buen día para ti también (o noches más bien)
Buenos días, noches para ti, Potro,
ResponderEliminarSe me olvidó dejarte el enlace al blog, perdón, es ...
Ío
Acabo de buscar eso del "text-transform: uppercase", y sí, ahí está, y varias veces: en "header-wraper h1", en "header wraper p {", en "#menu a {", en ".post-title h3{", y en "#sidebar-wrapper h2 {".
Lo otro.... me lo temía, no había encontrado solución, y es que no la hay, esperanzas que se van por el desagüe, Potro; ya desisto, ahora sí.
Gracias por ser siempre tan amable, y por enseñarnos :)
Beso para ti
Ío
Es por eso entonces, quita el text-transform: uppercase; que está dentro de .post-title h3{ y dejarán de verse todas en mayúsculas.
EliminarOtro beso para ti.
Voy a ello ahora mismo, a ver si no me lío y lo lío todo :) ..... enseguida vuelvo con lo que haga .... a ver..... siiiiii, en vista previa parece bien :))))), me gusta como queda, es lo que quería¡¡¡¡, guardo plantilla y también copio y guardo lo que he eliminado, por si un día me da por volverlo a dejar en mayúsculas (que no creo, pero bueno...)
ResponderEliminarMil gracias, Potro, eres un sol; buenas noches, buenas tardes para ti
Beso :)
Ío
Buenas noches para ti también :)
EliminarBesos.
El Potro, como estas. En primer lugar perdon por comentar mi inquietud en esta entrada, , pero no he podido ubicar la correspondiente. Necesito cambiar la fuente de mis entradas pero cuando entro a algunas de ellas. En diseño de plantillas puedo cambiar la fuente, pero solo se ve enla lista de la pagina principal. Pero cuando entro a algunas de ellas, el titulo esta con una letra y color puestos por defoult. Hay manera de coambiarlo. Muchas Gracias!
ResponderEliminarHola, puedes usar una condicional para que en las entradas individuales tengas otro tipo de fuente si lo deseas (si es que entendí que eso quieres). Sólo agrega antes de </head> algo como esto:
Eliminar<b:if cond='data:blog.pageType == "item"'>
<style>
.post h3 {
font-size: 26px;
font-family: Impact;
font-weight: normal;
}
.post-body {
font-size: 14px;
font-family: Arial;
}
</style>
</b:if>
Estos estilos son suponiendo que uses una plantilla original de Blogger.
Hola Potro,
ResponderEliminarA mi, una vez dentro de los post, se me pone en mayúsculas la primera letra de cada palabra del titulo. Como puedo quitar ese efecto y que salga normal?
Saludos.
Ejemplo de una entrada:
http://bit.ly/13bCx4k
Hola, he entrado pero parece que ya lo has resuelto.
EliminarSolucionado.
Eliminartext-transform: capitaliz; lo cambié por text-transform: none;
;)