Seguimos destripando un poco el significado de todo ese texto "extraño" :-) que aparece en nuestra plantilla.
Si lo que queremos es modificar el formato de los títulos de nuestras entradas, tenemos que prestar atención al trozo de código CSS en el que se especifica la clase H3. Cada plantilla tendrá una descripción (propiedades) distinta, por lo que comentaremos lo más general, para que seais capaces vosotros mismos de cambiar aquello que deseeis.
Dentro del código, aparecerá declarada la clase y, entre corchetes, las distintas propiedades:
Las propiedades que se pueden poner son todas las que permite CSS. Por citar las más comunes, podremos encontrar fácilmente las que regulan el COLOR, tamaño del texto (FONT-SIZE), su alineación (TEXT-ALIGN), algunos efectos decorativos (TEXT-DECORATION), los márgenes (PADDING, MARGIN), los bordes (BORDER), el fondo (BACKGROUND)... Para ver una lista más completa de propiedades así como sus atributos y la forma de redactarlas para que no haya errores de sintaxis, echad un vistazo a este enlace de HTMLHELP.
Una vez que se tiene claro donde hay que meter mano y las herramientas para modificar lo que deseamos, hay que saber también lo que significan las distintas sub-clases h3 que normalmente nos encontramos:
Así, para un título grande, centrado, de color rojo sobre fondo negro y separado de los extremos derecho e izquierdo del contenedor definido para el post, las propiedades tendrían que ser...
Para que además, los títulos estén subrayados indicando que sirven de enlace (el título en Blogger siempre es un enlace a la dirección permanente de la entrada), para que al pasar el cursor por encima, el texto pase a negrita, deje de estar subrayado y cambie a color azul y, para que una vez visitados, salga en tono gris, habría que añadir las siguientes subclases:
Si lo que queremos es modificar el formato de los títulos de nuestras entradas, tenemos que prestar atención al trozo de código CSS en el que se especifica la clase H3. Cada plantilla tendrá una descripción (propiedades) distinta, por lo que comentaremos lo más general, para que seais capaces vosotros mismos de cambiar aquello que deseeis.
Dentro del código, aparecerá declarada la clase y, entre corchetes, las distintas propiedades:
.post h3 {
margin:0px 10px 0px 15px;
padding: 0px 0px 0px 0px;
font-size:150%;
text-align:center;
color:#555555;
background:url("http://flickr.com/1075/129.gif") no-repeat right top;
}
margin:0px 10px 0px 15px;
padding: 0px 0px 0px 0px;
font-size:150%;
text-align:center;
color:#555555;
background:url("http://flickr.com/1075/129.gif") no-repeat right top;
}
Las propiedades que se pueden poner son todas las que permite CSS. Por citar las más comunes, podremos encontrar fácilmente las que regulan el COLOR, tamaño del texto (FONT-SIZE), su alineación (TEXT-ALIGN), algunos efectos decorativos (TEXT-DECORATION), los márgenes (PADDING, MARGIN), los bordes (BORDER), el fondo (BACKGROUND)... Para ver una lista más completa de propiedades así como sus atributos y la forma de redactarlas para que no haya errores de sintaxis, echad un vistazo a este enlace de HTMLHELP.
Una vez que se tiene claro donde hay que meter mano y las herramientas para modificar lo que deseamos, hay que saber también lo que significan las distintas sub-clases h3 que normalmente nos encontramos:
- post h3 - Aspecto del título del post
- post h3 a - Aspecto del enlace del título
- post h3 a:visited - Aspecto del enlace del título, después de haberse visitado
- post h3 a:hover - Aspecto del enlace del título cuando se pasa el cursor por encima (sin pulsar).
Así, para un título grande, centrado, de color rojo sobre fondo negro y separado de los extremos derecho e izquierdo del contenedor definido para el post, las propiedades tendrían que ser...
.post h3 {
font-size:150%;
text-align:center;
color:#990000;
background:#000000;
margin:0px 20px 0px 20px;
}
font-size:150%;
text-align:center;
color:#990000;
background:#000000;
margin:0px 20px 0px 20px;
}
Para que además, los títulos estén subrayados indicando que sirven de enlace (el título en Blogger siempre es un enlace a la dirección permanente de la entrada), para que al pasar el cursor por encima, el texto pase a negrita, deje de estar subrayado y cambie a color azul y, para que una vez visitados, salga en tono gris, habría que añadir las siguientes subclases:
.post h3 a{
text-decoration:underline;
}
.post h3 a:hover {
font-weight:bold;
text-decoration:none;
color:#0000FF;
}
.post h3 a:visited {
color:#999999;
}
text-decoration:underline;
}
.post h3 a:hover {
font-weight:bold;
text-decoration:none;
color:#0000FF;
}
.post h3 a:visited {
color:#999999;
}
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Saludos...
ResponderEliminarEstaba pensando en poner algo en mi blog pero la verdad es que ni idea de como se pueda hacer y francamente ni siquiera se si se pueda hacer.
Se que se podría hacer con los post programados pero no me satisface la idea.
Soy muy olvidadizo con eso de los cumpleaños, entonces me gustaría poner algún gadget o algo donde un día antes o el mismo día me rcuerde y a todos los que entran a mi blog que es o va a ser el cumpleaños de alguien, una especie de calendario quizá o lo que sea pero programado.
Solo he visto calendarios muy simples y que no sirven de nada, em gustaría quizá que el gadget pusiera un texto recordando a la persona en cuestión.
Espero me entiendas y gracias por los tips de nuevo.
Sobre el boton de votación de BITACORAS (Ya lei la entrada que explica como se pone el boton pero me falta algo que no entiendo y no se de donde sacarlo):
ResponderEliminarNo entiendo como es eso del URL, ya puse el boton pero de mantenimientos de BITACORAS me dicen: El problema es que no estas indicando la URL de la anotacion...
Como es eso que tengo que poner, ya puse el boton donde debe ir y ahora de donde saco el URL (Que no se que es) y donde lo pongo.
Salu2.
Mi MADRE es mi PATRIA y mi NOVIA es mi BANDERA.
Me sacaste una sonrisa, Oloman, usando mi título de ejemplo.
ResponderEliminarEs una de las pocas cosas que voy a conservar cuando cambie el aspecto de la plantilla en unos días (espero no madarme ninguna macana).
Saludos.
Es que me pareció un buen ejemplo de lo que se puede hacer para mejorar el titulo, Emile. Tu diseño mola.
ResponderEliminarOye tio, no es "blogger para torpes", será para novatos. Torpe es quien dice que es para torpes.
ResponderEliminarExacto. Así me considero todavía, pero en este caso, se trata sólo de una "licencia poética".
ResponderEliminarHola! Disculpa me gustaría saber donde yo puedo encontrar imágenes parecidas al fondo de los post, que le da ese aspecto de libro o cuaderno.
ResponderEliminarSaludos!
No te sabría decir un sitio bueno donde encontrar fondos. Este lo hice montando varias imágenes y cambiando los colores a mi gusto.
ResponderEliminarEl fondo realmente es una franja de poca altura, pero lo suficientemente ancha como para ocupar todo el ancho de pantalla. Puedes coger o hacer cualquier dibujo tú mismo. Luego se repite verticalmente y listo. Sólo tienes que tener cuidado de que la parte superior del dibujo case exactamente con la inferior.
Si no tiene contenido asimétrico, como pasa por ejemplo en este fondo con la espiral de la izquierda, la imagen puede ser mucho menos ancha. En ese caso, además de coincidir parte superior con inferior, deberán coincidir parte derecha con izquierda.
Buenas! esta muy bien esto del titulo :)
ResponderEliminarmira tienes por aki algo para poner los menus horizontales de arriva como los tuyos? asi que se agranden y sobresalgan de los demas cuando le pasas el raton por encima.
Saludos y gracias
Ary, lo que tengo arriba hace de menú pero realmente son varios botones juntos.
ResponderEliminarLlevan incorporado un efecto "rollover" que es lo que hace que "se muevan" cuando pasas el raton por encima.
Lo puedes encontrar fácilmente ahora que conoces el nombre del efecto, no obstante, en cuanto pueda lo explico en una entrada.
Hola! La verdad no tengo ni idea como hacer la imagen, si tienes un poco de tu tiempo para ver si me puedes diseñar una pero con un tono azul. Y bueno si tuviera mi PC propia, la diseñara. Pero si no puedes no importa, te entenderé. Pero si encuentras un sitio donde tienen fondo sobre esto no dudes en hacer una entrada donde expliques además como colocarlo…
ResponderEliminarSaludos y disculpa la molestia.
Simplemente tienes que coger un editor de imágenes (paintbrush, photofiltre, photoshop,...) y crear una imagen que te guste de 606x58px.
ResponderEliminarA continuación la subes a algún servicio de alojamiento de imágenes o al propio Blogger.
Por último, en el código del ejemplo, sutituyes la dirección de la imagen gif que se muestra por la tuya.
Si quieres probar, te he creado esta:
http://img152.imageshack.us/img152/8207/vistobuenosas2.jpg
Un saludo,
Tras varios días, ahora te contesto Yop, pero con algo negativo.
ResponderEliminarNo he encontrado ningún gadget-agenda bueno para que puedas incorporar a tu blog.
Si algún día tengo tiempo (cosa que dudo) podría montar un script para que resultara algo parecido... pero lo dicho: no te quedes a la espera que puede que no lo haga nunca.
Hola Oloman! Me pasa algo "parecido" a lo de "Yop" pero, en mi caso, si encontré un gadget "ideal" y, me agregué un "Calendario-Reloj" de la siguiente página; gadget calendario reloj El "problema" es que, desde que le dí clic a "Reenviar a HTTPS", cada vez que la página se "carga", dicho gadget no se "conecta" a menos que, vayas al navegador y le des a "Cargar secuencias de comandos no seguras" Y tú, seguramente sabes que, ningún lector se va a tomar el "trabajo" de hacer eso así que, mi gadget, sencillamente no aparecerá o, aparecerá con una leyenda que dice ..."La página pagina-del-dia.euroresidentes.es ha rechazado la conexión"...(o algo así:))Por las dudas, este es el Código de mi gadget calendario reloj Conoces algún condicional o algo que haga que, solo y únicamente solo se active este gadget, siempre que entres a mi página? PD: Entiendo la importancia de la seguridad del cifrado y todo eso e incluso, he probado agregarle al código del gadget https (en lugar de http) pues, me había funcionado con otro pero, en este caso, es importante para que el lector, sepa que, mi página esta "vigente" (aún cuando mis artículos no tienen fecha:)
EliminarNo. Lo siento. No conozco ningún condicional de ese tipo.
EliminarDe todas formas y como ya te respondí en otro comentario de otro post, https sólo ejecuta utilidades que a su vez usen https. No puedes poner en páginas seguras utilidades que no lo sean.
Gracias Oloman. Igual, ya lo "eliminé":) pues, tienes razón y, en consecuencia, no tenía sentido seguir "renegando" con eso:)
EliminarHola!
ResponderEliminarGracias por los datos, tratare de hacer una a ver como me sale... Y gracias por la que hiciste la probare a ver que tal... Saludos!
eres todo genial tuuh *-*
ResponderEliminarsaludos........muy buena pagina.Me sacaste de varios problemas que tenia en mi blog
ResponderEliminarMuchísimas gracias!!! buscaba poder central el título hacía ya bastante!!!
ResponderEliminarMuy bueno tu blog!
Gracias, de nuevo!!
Saludos
Lola
Yo tengo una duda, puedo cargar otro formato de texto en el titulo de mis posts?
ResponderEliminarPor ejemplo, mi blog lo quiero con estilo de letras más europeo; tipo "Algerian" o algo así. Puedo hacerlo? Gracias!
Hola Marcelo, para eso tienes que incluir/modificar en la clase que aquí se explica, un FONT-FAMILY: con el tipo de letra que quieras. Ten cuidado porque para todos los usuarios veamos esa tipografía, la tenemos que tener en nuestros propios ordenadores y con fuentes no habituales, esto no es así.
ResponderEliminarHay ciertas fuentes que todos (o casi todos) tienen y son las que aparecen en la pestaña de configuración Fuentes y Colores. Ese es el motivo por el que casi todas las webs tenemos una gama pequeña de tipografías.
hola Oloman, tengo una pregunta. En google aparece el nombre de mi pagina como debe ser, pero cuando se busca el titulo de la entrada o post aparece de esta manera:
ResponderEliminar"Nombre de mi Blog:Nombre de la entrada"
Quisiera algo mas elegante, algo asi:
"Nombre de la entrada--Nombre de mi blog"
Donde puedo hacer esas modificaciones, o como?
TE AGRADEZCO LA AYUDA
Creía que ya lo había explicado anteriormente, pero como no lo encuentro ni yo, permíteme que lo explique en un post. En los próximos días lo preparo y lo publico.
ResponderEliminarComo ahi que hacer para qe las opciones de letras puedan ser mas???
ResponderEliminarSola esta la verdana, y yo qe se qe mas.
QIERO MASSS!!
El problema es que sólo hay unas pocas fuentes que tenga todo el mundo y para poner una "especial" hay que recurrir a scripts que realicen las sustitución.
ResponderEliminarPrueba a poner "fuentes" en el buscador de arriba y te saldrán varias entradas que hablan sobre el tema.
Hola oloman tengo un problema en Mi blog ahi te das cuenta del titulo esta un poco desubicado... solo queria saber si se puede tener un resultado como este clic aqui
ResponderEliminarHola. El asunto está en la clase post-title. Observa el margin-right y left que lleva:
ResponderEliminar<div class='post-title entry-title' style='font-weight: bold; float:left; margin-top:24px; margin-left:29px; line-height:24px;'>
<a href='http://narutolv.blogspot.com/2010/07/naruto-manga-502-espanol.html'>Naruto Manga 502 Español</a>
Cambiando esos valores, lo vas moviendo.
Saludos.
A ver , buenas he querido modificar el titulo del post con el coddigo que pones aqui, pero no se ha cambiado nada. Me explico mi intencion al poner tu codigo era cambiar la letra ya que sale subrayada y pensaba que era cosa de este codigo y por eso lo he cambiado.
ResponderEliminarEl antiguo:.post h3 {
margin-top: 0;
font: $titlefont;
letter-spacing: -1px;
color: $titlecolor;
}
.post {
margin-top: 0;
margin-$endSide: 0;
margin-bottom: 1.5em;
margin-$startSide: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 1.5em;
padding-$startSide: 14px;
border-bottom: 1px solid #ddd;
}
.post h3 a,
.post h3 a:visited {
color: $titlecolor;
text-decoration: none;
}
perdona el ladrillo, pero a ver si me das solucion, gracias.
Hola
ResponderEliminarEl problema es que en tu plantilla, los títulos están bajo la etiqueta H1 y por eso da igual los cambios que hagas en H3.
Lo más fácil es que busques en la parte HTML cual es esa parte que "escribe" los títulos y cambias h1 por h3. Luego controlas el formato con ese ladrillo que me escribiste :D
Oloman el delante el h1 pone header y no post, ademas en la vista previa no se aprecia el cambio, estoy un poco perdido la verdad y sigo sin poder quitar esa letra con la raya debajo.
ResponderEliminarYa diras cosas.
Seguro que lo tienes con H1. Creo recordar que la variable de los títulos es data:post.title. Busca eso y verás como está entre H1.
ResponderEliminarVale con eso que e has indicado ya me ha ido un poco mejor, ya lo retocare un poco mas, pero creo ir por el buen camino, gracias.
ResponderEliminar¿Para cambiar el formato de las etiquetas? en mi caso están debajo del título
ResponderEliminarhttp://rocksnrulestv.blogspot.com
Un saludo
Se hace igual RocksNRules, pero en lugar de cambiar la clase .post h3, tendrías que modificar la clase .post-labels a
ResponderEliminarSi no la tienes en tu plantilla, simplemente la agregas y le asignas propiedades.
gracias. me sirvió de mucho
ResponderEliminarNecesito modificar el tamaño del título de mis entradas. He probado con cambiar el "font-size", pero no funciona. La url de mi blog es http://www.vqueenofhearts.blogspot.com
ResponderEliminarAdjunto el código html :)
Gracias, desde ya. Espero que puedan ayudarme.
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #ffffff;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:1%;
font-weight:bold;
line-height:1.4em;
color:#333333;
font: arial;
font-style:italic;
letter-spacing: 2px;
line-height:18px;
padding-bottom: 3px;
text-transform:lowercase
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#a64d79;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:#333333;
}
.post-body {
margin:0 0 .75em;
line-height:1.6em;
}
.post-body blockquote {
line-height:1.3em;
}
.post-footer {
margin: .75em 0;
color:#666666;
text-transform:lowercase;
letter-spacing:.2em;
font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
line-height: 1.4em;
}
.comment-link {
margin-left:.6em;
}
.post img, table.tr-caption-container {
padding:4px;
border:1px solid #ffffff;
}
.tr-caption-container img {
border: none;
padding: 0;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
Pues tiene que funcionar Lolita... Lo que no sé cómo puede hacerlo ahora con ese 1%.
ResponderEliminarSería en esta parte. Prueba con un 150% y Vista Previa para hacerte una idea del valor que debes poner finalmente.
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:150%;
Ya lo hice, y no funciona. No importa qué número coloque; el tamaño del título del post sigue igual. :S
ResponderEliminar¿Puedes poner otra vez tu blog público? No puedo acceder a él...
ResponderEliminarHola Oloman.
ResponderEliminar¿Existe la posibilidad de limitar el número de caracteres del título del post? Es decir, una vez sobrepasado un número de letras, que aparezca en el título "...". Tengo ya localizado donde lo quiero aplicar, sólo me falta la parte de CSS.
Saludos!
Mi blog: http://ttm22.blogspot.com.es
Con un script lo podrías hacer, pero me parece más eficiente limitar el espacio con un width y luego añadir un overflow:hidden; Eso hará que lo que exceda del ancho que marques no se vea ¿valdría así? Es que como no sé la utilidad exacta que le quieres dar a esto...
EliminarHe conseguido el efecto ese que tú comentas, pero aplicando al [h3.post-title] el código [white-space: nowrap;], así los títulos sólo ocupan una línea en las entradas resumidas de la página principal.
EliminarCorrecto. Esa es también muy buena opción. No se me ocurrió :)
EliminarHola Oloman, ¿cómo podría con los títulos de los posts convertirlos en cajas de texto como se observa en estos códigos CSS?
ResponderEliminarhttp://codigos-css.es.tl/Cajastexto.htm
Hola. Sólo copia el código de la caja que te gusta y pégalo antes del cierre SKIN de tu plantilla. Una vez allí quita las dos etiquetas STYLE que llevan (una al principio y otra al final) y por último, cambia todos los ".cuadrorojo" por ".post h3". Guardas los cambios y listo.
EliminarHola oloman, muchas gracias, le dió un mejor toque a mi blog!! comparto mi resultado :)
Eliminar- Agregué un background-image para colocar la textura, modifiqué el margin derecho para unirlo con el acento de la sidebar y coloqué un padding para ajustar el título en la posición que deseaba.
http://solomacosx.blogspot.com/
Gracias nuevamente.
ResponderEliminar¡Hola Oloman! quiero hacer que los títulos de mis entradas tengan un "punto y aparte", como un subtítulo, y que queden así:
La mareé Haute
(Lhasa de Sela)
cómo lo consigo? he mirado la ayuda de códigos para HTML (HTMLHELP) que pusiste en esta entrada pero no me hago idea de dónde está lo que busco.
mi blog es: www.ladeojosabiertos.com.ar
ojalá puedas ayudarme y, desde ya, ¡muchas gracias!
Hola. Eso no lo puedes hacer con CSS, así que hay que insertar HTML en el título. Para esa frase en concreto que me pones de ejemplo, al crear (o editar) una entrada, en la parte del título escríbelo así:
EliminarLa mareé Haute<br/>(Lhasa de Sela)
Mil gracias Oloman!!! quedó genial.
Eliminar
ResponderEliminar¿Cómo puedo hacer que las entradas se vean como en las de "http://www.hentai-id.tv/"? ¿Usan blogger? ¿Cómo puedo poner también el paso de las imágenes que redireccionan? No entiendo mucho, apenas estoy iniciando
Hola. Ese tipo de gadget es posible hacerlo en Blogger sin problemas, pero si apenas sabes manejarte con código va a ser complicado que puedas reproducirlo. No obstante busca "slider" o "slideshow" y seguro que encuentras algún tutorial, porque así es cómo se llama ese tipo de imágenes que van pasando en carrusel
EliminarHola!
ResponderEliminarQuería hacer un pregunta a ver si puedes ayudarme a solucionar un problema.
Incluí lo siguiente en el CSS para añadir una línea en la parte superior del título de la entrada. Pero ahora esa línea también aparece cuando utilizo el modo Subencabezado para una frase dentro del texto de la propia entrada.
.post h3 {
font-family: 'Gentium Basic', serif;
font-size: 25px;
font: bold normal 25px 'Gentium Basic'
}
h3.post-title a, h3 {
color: #000000;
border-top: 1px solid #000000; /**Línea superior (aquí puesto en negro)**/
}
¿Podrías decirme qué debo hacer para eliminar la línea cuando pongo un Subencabezado?
Muchas gracias por tu tiempo de todas formas.
Hola Amaia
EliminarAl poner el borde tanto a h3.post-title como a h3, estás dándole ese estilo a todo lo que lleve h3 y eso incluye tanto los títulos como los encababezados. Todo eso que me indicas, que sea así:
.post h3 {
font-family: 'Gentium Basic', serif;
font-size: 25px;
font: bold normal 25px 'Gentium Basic'
}
h3.post-title a, h3.post-title, h3 {
color: #000000;
}
h3.post-title {
border-top: 1px solid #000000;
}
Hola buenos dias, una duda, es posible cambiar de lugar el titulo del post? He tratado pero solo me aparece TEMPLATE ERROR, bueno de antemano muchas gracias y por los buenos consejos que nos das :)
ResponderEliminarHola Gryzor. Claro que es posible, pero no lo es que yo te expliqué detalladamente desde aquí cómo, así que simplemente te puedo hacer un esbozo.
EliminarTienes que buscar en la plantilla unas cajas que llevarán un encabezamiento H (h3, hormalmente) con clase post-title. Eso es lo que "dibuja" los títulos en la página. Simplemente con que los cambies de lugar en la plantilla, ya te cambiarán en la página.
Eso sí, esos títulos no funcionan según el lugar de la plantilla dónde los pongas y por eso quizás te da el error. Es cuestión de probar.
Oloman, ¿como va? estuve revisando pero no encontré solución a un pequeño problemita que me ha ocurrido con una entrada. Busqué por horas en otros lados pero tampoco hubo forma. Tengo el título de una única entrada centrado, lo hice con un contenedor div aplicando text-align: center. El tema es que al compartir la entrada en facebook el debugger me devuelve el título CON el código div, es decir: no lo ignora, y queda feísimo. Intenté con espacios aplicando & nbsp; pero también lo mismo. ¿De qué forma puedo centrar un título de una entrada puntual sin que suceda ésto? Cabe aclarar que ésto sucede desde que el debugger de facebook cambió, o se actualizó.
ResponderEliminarHola Lunático
EliminarNo sé seguro si funcionará, pero si es para sólo ciertas entradas prueba añadiendo a la entrada en cuestión, al final del texto que tenga redactado, esto:
<style>.post-title {text-align:center;}</style>
Sos el mejor! Funcionó perfecto! mil gracias Oloman!
Eliminar