JMiur [E]

Me preguntaron si era posible agregar un subtítulo a las entradas y la respuesta es ... depende. No hay manera de hacerlo de manera automática ya que para eso, Blogger debería tener ese dato interno y no lo tiene. Sin emabrgo, podemos hacerlo de manera manual, creando una clase CSS que agregamos a la plantilla y que luego, usamos en los posts, adicionándola al párrafo con el texto.

Por ejemplo, lo más sencillo sería agregar antes de </b:skin> algo así:
.post-subtitulo {
[propiedades de la fuente a utilizar]
}
Y la primera línea de un post sería:
<div class="post-subtitulo">Este es el subtítulo de la entrada.</div>
o bien:
<p class="post-subtitulo">Este es el subtítulo de la entrada.</p>
No es mucho pero con un poco de CSS puede experimentarse y conseguir algun efecto más  si empleamos las propiedades que nos permiten ubicar un elemento con precisión (más información). Estas propiedades son: position, left, top, right y bottom.

Normalmente, los títulos de las entradas tienen una etiqueta de encabezado (h1, h2, h3) y debajo de este hay un DIV cuya clase se llama post-body que contiene la entrada en si misma.

El titulo de la entrada

Este es el subtítulo de la entrada ...
Sed ipsum tellus, feugiat vel, porttitor eget, pretium consectetur; nisl! Duis nulla turpis; congue in; lobortis at, facilisis vel, magna. Duis mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras dui. Nullam iaculis, nibh non fermentum ultrices, nisi nisl laoreet quam, sit amet malesuada odio elit in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend velit non dolor! Aliquam in purus? Nullam ullamcorper urna ac dolor. Pellentesque ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras bibendum justo et dui. Nam turpis duis.

Ver cada uno de los sectores: la pagina | el título | el subtítulo | las entradas

Lo que nos permite la propiedad position es ubicar un elemento dentro de otro de manera exacta. Para esto, el elemento contenedor (el externo) debe tener establecida la propiedad como relative y el elemento a mover (el interno) debe tenerla estabecida como absolute. Con esto, lo que hacemos es decirle al navegador que ubique el segundo, no donde normalmente iría sino en alguna coordenada cuyo inicio (0,0) es el contenedor.

Por ejemplo, si tenemos dos DIVs, uno dentro del otro con este código:
<div style="position:relative;background-color:white;width:300px;margin:0 auto;height:150px;">
<div style="position:absolute;background-color:red;width:150px;margin:0 auto;height:100px;">
</div>
</div>

El rectángulo rojo se mostraría a partir del ángulo superior izquierdo del blanco que es el que lo contiene pero, como establecimos las posiciones, podemos "mover" el cuadrado rojo a cualquier lado dentro del contenedor usando las propiedades left y top:
<div style="position:relative;background-color:white;width:300px;margin:0 auto;height:150px;">
<div style="position:absolute;background-color:red;width:150px;margin:0 auto;height:100px;left:50px;top:50px">
</div>
</div>

left y top son las coordenadas relativas al origen del contenedor (el blanco) y aceptan valores negativos así que es sencillo "sacar" el contenido del contenedor:
<div style="position:relative;background-color:white;width:300px;margin:0 auto;height:150px;">
<div style="position:absolute;background-color:red;width:150px;margin:0 auto;height:100px;left:-100px;top:-10px">
</div>
</div>

Con este criterio, podríamos hacer que el subtítulo "subiera" y ubicarlo más arriba, junto al título o debajo de este. Para eso, debemos hacer dos cosas, agregar la propiedad position: relative al DIV de los posts y la propiedad position: absolute a los subtítulos de tal manera de poder moverlos con left y top:
.post-body {
position: relative;
}
.post-subtitulo {
position: absolute;
left: valorpx;
top: valorpx;
[propiedades de la fuente a utilizar]
}

El titulo de la entrada

Este es el subtítulo de la entrada ...
Sed ipsum tellus, feugiat vel, porttitor eget, pretium consectetur; nisl! Duis nulla turpis; congue in; lobortis at, facilisis vel, magna. Duis mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras dui. Nullam iaculis, nibh non fermentum ultrices, nisi nisl laoreet quam, sit amet malesuada odio elit in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend velit non dolor! Aliquam in purus? Nullam ullamcorper urna ac dolor. Pellentesque ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras bibendum justo et dui. Nam turpis duis.

Ver cada uno de los sectores: la pagina | el título | el subtítulo | las entradas

click para ver el resultado en esta entrada.

Algo similar a eso podría hacerse con los títulos en si mismos, modificando la plantilla, duplicándolos y luego, desplazando uno de ellos unos pocos pixeles para, por ejemplo, crear un efecto de sombras. Un ejemplo:
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<span class='sombraTitulo'><data:post.title/></span>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<span class='sombraTitulo'><data:post.title/></span>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<span class='sombraTitulo'><data:post.title/></span>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Para eso, hay que agregarle al título la propiedad position: absolute y agregar las definiciones de la nueva:
.post h3 {
position: absolute;
.......
}
.sombraTitulo {
left: 1px;
position: absolute;
top: 1px;
.......
}

34 comentarios:

blank space  

Muy interesante como lo de youtube te felicito muchas gracias ^^

Saludos yANyZx

http://geovannishadow.blogspot.com/

Responder
Admin  

Donde se pone lo de position: absolute para hacer la sombra del título?
Y al css o estilo solo ponemos .sombraTitulo { y lo que está debajo? Y como le cambio el color a la sombra, por ejemplo me gusta la del primer modelo pero en naranja, como haría eso?

Conocés el cuento de Juan y el preguntón? :D Yo soy la preguntona ja ja

Responder
Anónimo  

tu blog es exelente me ayudaste un monton a hacer mi sitio web GRACIAS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
:)

Responder
Deybi  

Hola.

Yo tampoco he entendido muy bien como se pone. No me funciona pegandolo en el CSS debajo de .post h3{?.

Parece que hay que realizar otros pasos?.

Responder
Gem@  

¿Los subtítulos afectan la optimización de los títulos?

Responder
Gem@  

Donde "click para ver el resultado en esta entrada" no puedo acceder :O

Responder
JMiur  

k_nelita:
Por ejemplo, en te propongo deberia esta acá:
.post h3 {
position:relative;
.....
}
todo lo demás, colores, fuentes, etc, se ponen en la clase de la sombra. Allí tambien se posiciona, puede ser que, requiera valores mucho mas altos si hay márgenes en el título.

Birdelo:
Para que pueda posicionarse el título debe tener la propiedad position:relative y l oque quieras mover, la propiedad position:absolute. Debería verlo online para decirte donde está el error.

Gem@:
Sí, me olvidé de corregir el enlace. en realidad, es un enlace a este mismo post, Si haces click, se verá el efecto aplicado a esta misma entrada.

Responder
Deybi  

Entonces... nada. Seguiré intentado que para eso sn los días libres de cole!.

Responder
Pedro  

Epale JMiur! Una pregunta, como hago para inhabilitar el click del ratón MIENTRAS se carga la página web? Gracias! Salu2!

Responder
JMiur  

Juan:
Lo desconozco, me gustaría saberlo .)

Responder
Unknown  

Hola JMIUR, espero que estés bien. mi consulta como manipulo con intenciones de acercar un poco mas la parte que le corresponde a los post o las entradas con la cabecera, y lo otro es que quiero reducir el ancho de la entrada y obvio ampliar el de la sidebar, después de ampliar la información es decir en las paginas que siguen después de la principal. este ejemplo quisiera me lo explicaras,(si no es mucho pedir) en mi blog de prueba 2

Responder
Pedro  

Jeje bueno muchas gracias brother! =D

Responder
JMiur  

Solidaridad:
Me da la impresión que para acercar las entradas, tal como está el código, lo mejor es que le agregaues un margen con valores negativos:

#main-wrapper {
margin-top: -10px;
....
}

Lo de los anchos no l ocomprendo muy bien. en ese blog de pruebas veo los dos sectores creados pero no se como quieres cambiarlos.

Responder
Prof. Cristian E. Moyano  

JMiur: tengo un problema. Me encanta este "truco" del subtítulo, pero no lo puedo plasmar en mi blog. Estaría más que agradecido si me ayudaras. Y esto es lo que hice:

ESTO ES LO QUE HE PUESTO ANTES DE (/b:skin) :

.post-body {
position: relative;
}
.post-subtitulo {
position: absolute;
left: 50px;
top: 50px;
color: rgb(102, 0, 0);
font-weight: bold;
font-family: lucida grande;
font-size:130%;
background-color: red;
}

Y ESTA ES LA LÍNEA QUE PUSE EN EL POST :
(div class="subtitulo") Este es el subtitulo (/div)

Y NO ME SALE!! :(( QUE HICE MAL?? QUÉ HAGO?

PD: cambie <> por () porque stoy comentando al "viejo estilo"

Responder
JMiur  

Oops, había un error en el post. el DIV debe ser de este modo:

<div class=">post-subtitulo">Este es el subtítulo de la entrada.</div>

Así funcionaría. el resto lo veo correcto. La altura, es probable que debas corregirla con el valor de top que puede ser negativo.

Responder
Prof. Cristian E. Moyano  

Michas gracias!!

Responder
Epyros  

Que buen Blog
De mucha ayuda todo

Responder
Anónimo  

Hola JMiur :)

utilizndo este truco he colocado el nombre del autor, osea el mio :$ a un lado del titulo de la entrada.

Sin embargo como quiero utilizar siempre el mismo subtitulo, he querido incluirlo dentro de la plantilla... como antes estaban los div de la fecha, autor, comentarios, etc.

Sin embargo, al hacerlo, y colocarlo delante del codigo que afecta a lo que iría debajo del titulo, solo consigo que aparezca en un post, en el último, no en todos, imagino que se debe a la propiedad de position: absolute...

Existe otra manera de colocar justo ahí el texto de "escrito por Uve"?
saludosss :)

Responder
JMiur  

Uve: me parece que ese caso deberías modificar un par de cosas. Ya que pasará a ser un texto fijo, debería ser ubicado junto con el título del post.

Priemro, agrega esta proipedad en:
.post {
........
position:relative;
}

con eso no hay cambios de ninguna clase pero, permitirá ubicar elementos de manera precisa.

Lo lógico sería colocar el DIV class="post-autora" debajo del título del post. Para que te ubiques, ahora debe haber algo así:
<div class="post-header-line-1" />

En lugar de eso, allí colocas el DIV autora y a ese le agregas estas propeidades

.post-autora {
.........
position:absolute;
right:25px;
top:15px;
}

de ese modo, la posición absoluta no es con respecto a la página entera (que es lo que pasa ahora, sino a cada post. Y con right left top y bottom ubicas ese texto donde quieras.

No se si la explicación es demasiado confusa :$

Responder
Anónimo  

Genial JMiur :)
se entiende clarito, colocaba ahí justo el div que se coloca por cada entrada, pero claro, al no tener puesto el valor en el post... salía todo feo :(


gracias!!!

Responder
echuus  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

Para que el título no ocupe todo el ancho, fíjate en esta entrada:
http://vagabundia.blogspot.com/2010/04/facilitar-la-seleccion-de-los-titulos.html

Para lo de los posts no es necesario ver la plantilla sino verlo online. En términos generales, ahi hay definido un efecto hover por defecto apra todos los enlaces:
a:hover {
color:#ffffff;
background-color: #000000;
}
Si en los posts quieres cambiarlo deberías agregar la definicion, algo así:
.post-body a:hover {
color:#000 !important;
background-color: transparent !important;
}

Responder
echuus  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

Como dije, sin ver el sitio, solo se trata de especular. Si quieres colocar cualquer otro efecto, simplemente lo colocas en esa definición:

.post-body a:hover {
...............
}

Si quieres que el título tenga un efecto, busca algo similar a:

.post h3 a:hover {
...............
}

y allí agregas las propiedades que desees.

Responder
elhumanisto  

Buenas JMiur,

Gracias por el tema de los subtíutlos, aunque lo leo con un poco de retraso... Espero que me puedas resolver una duda: cuando incluyo los subtítulos dentro del título, aparecen también en el archivo de noticias como "título. subtítulo" y en ocasiones es tan largo que lo afea o se corta. Existe alguna manera para que el subtítulo no aparezca con el título cuando las entradas se archivan??

Gracias, un saludo y enhorabuena por el blog!!

Responder
JMiur  

Utilizando este método, el subtítulo es parte del título por lo tanto se verá así como lo ves. PAra que eso no ocurra, debería colocarse dentro del post en si mismo.

Responder
Anónimo  

Me ha funcionado perfectamente, pero encontré un defecto, al entrar en la entrada el subtitulo queda encima del titulo, eso no pasa cuando están todas seguidas, ojala me haya hecho entender, lo estoy haciendo en este blog se pruebas

http://dinamodeprueba.blogspot.com

Responder
Anónimo  

Me retracto de lo dicho anteriormente, ya logre solucionarlo, aunque la diferencia de espacios no logro arreglarla, cuando estan todas las entradas juntas y cuando solo se ve una

Responder
JMiur  

No sé a cuá distancia te refieres.

Responder
Anónimo  

Me refiero a la distancia del titulo al contenido de la entrada, cuando uno entra al blog ve una cosa, pero cuando un entra a la entrada se ve otra, y no se por que @_@

Responder
JMiur  

La diferencia de altura es debido que los posts del home, comienzan con una etiqueta <p&lg; y los posts individuales no; probablemente, eso es provocado por el script que funciona en las páginas que no son individuales.

La distancia extra en el home se debe a que las etiquetas P tienen un margen por defecto.

Responder
Tomás  

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

JMiur  

Con CSS es poco lo que se puede hacer aunque una propiedad text-overflow que sólo funcionará en algunos navegadores.

Si se trata del home, como las entradas se escriben con un script, podría hacerse pero requeriría cambiar la estructura y crear el código para que muestre títulos de cierta longitud máxima de modo similar a como se hace para mostrar resúmenes.

Tomás  

Finalmente le apliqué al [h3.post-title] el código [white-space: nowrap;] para que el título ocupe sólo una linea en las entradas resumidas de la página principal.
Es lo más parecido a lo que buscaba ;)

Un saludo y gracias!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR