BPT. Cambiar el formato del título del post. | Oloblogger Seguimos destripando un poco el significado de todo ese texto "extraño" :-) que aparece en...

8 de septiembre de 2008

BPT. Cambiar el formato del título del post.

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:

.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;
}

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).
En la primera pondremos las propiedades comunes al título y en las otras clases, definiremos los distintos aspectos que tendrá el título en su función de enlace.

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;
}

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;
}

¿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.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

56 comentarios :

  1. Saludos...

    Estaba 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.

    ResponderEliminar
  2. 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):

    No 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.

    ResponderEliminar
  3. Me sacaste una sonrisa, Oloman, usando mi título de ejemplo.
    Es 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.

    ResponderEliminar
  4. Es que me pareció un buen ejemplo de lo que se puede hacer para mejorar el titulo, Emile. Tu diseño mola.

    ResponderEliminar
  5. Oye tio, no es "blogger para torpes", será para novatos. Torpe es quien dice que es para torpes.

    ResponderEliminar
  6. Exacto. Así me considero todavía, pero en este caso, se trata sólo de una "licencia poética".

    ResponderEliminar
  7. Hola! 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.
    Saludos!

    ResponderEliminar
  8. 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.

    El 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.

    ResponderEliminar
  9. Buenas! esta muy bien esto del titulo :)
    mira 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

    ResponderEliminar
  10. Ary, lo que tengo arriba hace de menú pero realmente son varios botones juntos.

    Llevan 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.

    ResponderEliminar
  11. 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…
    Saludos y disculpa la molestia.

    ResponderEliminar
  12. Simplemente tienes que coger un editor de imágenes (paintbrush, photofiltre, photoshop,...) y crear una imagen que te guste de 606x58px.

    A 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,

    ResponderEliminar
  13. Tras varios días, ahora te contesto Yop, pero con algo negativo.

    No 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.

    ResponderEliminar
    Respuestas
    1. 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:)

      Eliminar
    2. No. Lo siento. No conozco ningún condicional de ese tipo.

      De 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.

      Eliminar
    3. Gracias Oloman. Igual, ya lo "eliminé":) pues, tienes razón y, en consecuencia, no tenía sentido seguir "renegando" con eso:)

      Eliminar
  14. Hola!

    Gracias 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!

    ResponderEliminar
  15. saludos........muy buena pagina.Me sacaste de varios problemas que tenia en mi blog

    ResponderEliminar
  16. Muchísimas gracias!!! buscaba poder central el título hacía ya bastante!!!

    Muy bueno tu blog!

    Gracias, de nuevo!!

    Saludos

    Lola

    ResponderEliminar
  17. Yo tengo una duda, puedo cargar otro formato de texto en el titulo de mis posts?
    Por ejemplo, mi blog lo quiero con estilo de letras más europeo; tipo "Algerian" o algo así. Puedo hacerlo? Gracias!

    ResponderEliminar
  18. 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í.

    Hay 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.

    ResponderEliminar
  19. 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:
    "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

    ResponderEliminar
  20. 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.

    ResponderEliminar
  21. Anónimo6/6/10 22:54

    Como ahi que hacer para qe las opciones de letras puedan ser mas???

    Sola esta la verdana, y yo qe se qe mas.

    QIERO MASSS!!

    ResponderEliminar
  22. 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.

    Prueba a poner "fuentes" en el buscador de arriba y te saldrán varias entradas que hablan sobre el tema.

    ResponderEliminar
  23. Anónimo16/7/10 8:45

    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

    ResponderEliminar
  24. Hola. El asunto está en la clase post-title. Observa el margin-right y left que lleva:

    <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.

    ResponderEliminar
  25. 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.
    El 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.

    ResponderEliminar
  26. Hola

    El 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

    ResponderEliminar
  27. 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.
    Ya diras cosas.

    ResponderEliminar
  28. 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.

    ResponderEliminar
  29. Vale 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
  30. ¿Para cambiar el formato de las etiquetas? en mi caso están debajo del título

    http://rocksnrulestv.blogspot.com

    Un saludo

    ResponderEliminar
  31. Se hace igual RocksNRules, pero en lugar de cambiar la clase .post h3, tendrías que modificar la clase .post-labels a

    Si no la tienes en tu plantilla, simplemente la agregas y le asignas propiedades.

    ResponderEliminar
  32. Necesito 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
    Adjunto 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;
    }

    ResponderEliminar
  33. Pues tiene que funcionar Lolita... Lo que no sé cómo puede hacerlo ahora con ese 1%.

    Serí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%;

    ResponderEliminar
  34. Ya lo hice, y no funciona. No importa qué número coloque; el tamaño del título del post sigue igual. :S

    ResponderEliminar
  35. ¿Puedes poner otra vez tu blog público? No puedo acceder a él...

    ResponderEliminar
  36. Hola Oloman.
    ¿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

    ResponderEliminar
    Respuestas
    1. 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...

      Eliminar
    2. He 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.

      Eliminar
    3. Correcto. Esa es también muy buena opción. No se me ocurrió :)

      Eliminar
  37. Hola 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?

    http://codigos-css.es.tl/Cajastexto.htm

    ResponderEliminar
    Respuestas
    1. 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.

      Eliminar
    2. Hola oloman, muchas gracias, le dió un mejor toque a mi blog!! comparto mi resultado :)

      - 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.

      Eliminar

  38. ¡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!

    ResponderEliminar
    Respuestas
    1. 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í:
      La mareé Haute<br/>(Lhasa de Sela)

      Eliminar
    2. Mil gracias Oloman!!! quedó genial.

      Eliminar


  39. ¿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

    ResponderEliminar
    Respuestas
    1. 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

      Eliminar
  40. Hola!

    Querí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.

    ResponderEliminar
    Respuestas
    1. Hola Amaia

      Al 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;
      }

      Eliminar
  41. 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 :)

    ResponderEliminar
    Respuestas
    1. Hola 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.
      Tienes 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.

      Eliminar