JMiur [E]

¿Es posible agregar subtítulos en los posts? Sí, claro que sí pero, bueno, hacerlo de manera más o menos automática ya es otro cantar. Sin embargo, podemos hacerlo con algo de CSS.

Como es sabido, la mayoría de los controles de los formularios admite una limitada cantidad de etiquetas HTML así que vamos a usar el cuadro de títulos de las entradas para generar un título y un subtítulo.

Por razones que tienen que ver con la indexación y los buscadores, el título de una entrada es muy importante así que siempre conviene que sea claro y que no contenga caracteres "extraños". No hay problemas con ellos en si mismos, se verán bien pero, como en Blogger, la URL de cada entrada es generada en función del título, esas URLs serán un poco estrafalarias. Por ejemplo, si el título contiene vocales acentuadas, estas no se verán o serán reemplazadas por vocales sin tildes; las eñes se convertirán en enes y los símbolos ¡ y ? no se verán.

En otros sistemas de blogs, las cosas son peores ya que esos caracteres se reemplazan por símbolos extraños, porcentaje y números estrambóticos.

Esa URL es generada por Blogger una sola vez, cuando publicamos la entrada y no cambiará aunque editemos el post una y mil veces. Por lo tanto, nos tomaremos el trabajo de publicar dos veces el mismo artículo, la primera vez, teniendo en cuenta esas limitaciones para crear una URL amigable y la segunda vez, cambiándolo para que muestre otra cosa.

Por ejemplo si publico la primera vez con este título:

Este es mi titulo

la URL generada será esta:

http://miblog.blogspot.com/2009/07/este-es-mi-titulo.html


Edito el post, cambio ese título por otra cosa, por ejemplo:

Este es mi título <small>y este es el subtitulo de la entrada</small>

y lo publico otra vez.

La URL será la misma pero lo que veré será diferente:


Ahora, necesitamos agregar un poco de CSS para, por ejemplo, mostrarlo en otra línea, cambiarle la fuente, los colores y todo eso que a uno se le ocurra.

La definición dependerá de la plantilla pero, en una mínima sería algo así:
.post h2 small {
display: block;
font-size: 14px;
font-weight: normal;
/* y el resto librado a la imaginación */
}

62 comentarios:

Mozz  

Muy bueno JMuir!!! Seguramente lo este implementando dentro de poco ^^

Responder
Nav!´s  

Jmiur solo he cambiado un par de códigos y los subtitulos han quedado super bien :)

Me ha gustado la idea :p

;)

Responder
Chaantii  

Muy útil :D

Responder
Vku  

a mi no me queda
solo cambia el tamaño de la fuente, le agrege color y fondo y no lo cambia, tampoco lo pasa para abajo
si podes fijate en mi blog de pruebas

Responder
Vku  

utilizo Son of Moto y cambie h2 por h3 y funciona

Responder
Claudio  

¿En que parte de la plantilla inserto los codigos?

.post h2 small {
display: block;
font-size: 14px;
font-weight: normal;
/* y el resto librado a la imaginación */
}

¿Podría hacer un subtítulo algo con tamaño de letra mas pequeño?

Responder
Claudio  

retiro lo de antes. YA esta solucionado. Pero me surge otra duda: Me gustaria que el subtítulo no me apareciera tan pegado al título. Solo quiero ponerlo un poquitín mas abajo. Lo que intento decir es que quiero augmentar el espacio entre el título y el subtítulo

Responder
Graciela  

muy bueno JM, utilizo en cada entrada blockquote para hacer una pequeña síntesis, pero no he leído la anterior :O...ya lo probaré...buen lunes :)

Responder
Gem@  

Es increíble la de cosas que descubres cada día, Blogger-Google debería contratarte pero no creo que puedan pagar tus aportaciones quizás por eso callan y los obtienen gratis.

Responder
Luckitas  

Un comentario fuera de lugar pero queria hacerte ver esto que me salta:

http://i30.tinypic.com/md0328.jpg

Responder
Ignacio  

Yo use h3 en la plantilla mínima y funciona perfecto.
Gracias, estaba buscando este truco.

Responder
JMiur  

Es bastante fácil de aplicar, casi una curiosidad :D

Claudio, claro, dependiendo de la plantilla, podría ser H2 H3 u otra etiqueta, la que se use para los títulos. Lo de la separación, depende de lo que quieras pero en .post h2 small puedes agregar margin-top o padding-top o line-height o height. Con cualquiera de esas propiedades podrías controlar la separación y la altura del subtítulo.

Luckitas: No tengo la menor idea que es eso de dg.specificclick.net. Fíjate en el código fuente de esa página y verás que no aparece por ninguna parte. Puede ser que tengas alguna cookie en el navegador que lanza ese sitio. Borra las cookies por las dudas.

Responder
Manfenix  

Muy bueno el dato JMiur. Ya lo tengo aplicado en mi blog. Saludos :)

Responder
Arnaldo  

jmiur me podrias ayudar:Estoy creando una pagina web pero quiero tener una cabecera flash yo hago las imagenes con un programa aparte pero quiero lograr un efecto en el que se vayan pasando las imagenes con flash quisiera que me dijeras como hacer estas cabeceras en flash por favor..necesito ayuda saludos :D

Responder
Theemilio_crazy  

JMiur Gracias por esta entrada :D... Quiria hacerte una pregunta: Debido a que muchos le molesta el Sonido del Chat que tengo en mi blog, quiero saber si se puede ocultar y luego mostrarlo algo asi Como Expandir y Cotraer, Espero que puedas ayudarme Aqui Mi Blog

Responder
JMiur  

Quedó muy bien, Manfenix :)

Arnaldo: No sabría decirte, no se manejar Flash.

Theemilio_crazy: A muchos nos molestan las páginas "ruidosas" :D Primero que nada, verifica si esa no es una opción que puede deshabilitarse desde el mismo código que genera el chat. No lo sé pero podría haber una.

Puede ocultarse pero necesitarías usar un enlace y un script para que pudiera ser mostrado. Cualquiera que permitiea expandir y contraer algo pero, n oseé si eso eliminará el sonido porque, que no se vea no signifiica que no esté cargado en la página.

Responder
Monjaguerrillera  

AH gracias!!!!!!!! Funcionó también en mi otro blog de wordpress!!!

Responder
Theemilio_crazy  

JMiur, no se puede quitar el sonido o desabilitar, pero creo cuando se oculta el chat no se olle el sonido por que eso lo e visto en muchas Web.

Responder
JMiur  

Monjaguerrillera: No lo probé en WordPress, creo que es una característica propia de esos controles de INPUTpero es bueno saber que también funciona :D

Theemilio_crazy:
Entonces, debería colocar todo el código (no sé cual es) en un DIV que tenga un ID y luego, arriba de ese dic, colocar un enlace que lo abra y cierre, algo similar a lo que se explica acá. En realidad, hay muchísimas formas de expandir y contraer algo, depende de lo que quieras mostrar.

Responder
Eulalia  

Gran idea, porqué a veces hago títulos larguisimos para explicar qué voy a contar.
¡Gracias genio!
Un abrazo.

Responder
Solidaridad  

Excelente truco creo que con esto ajustare el espacio que queda en algunas entradas con un titulo de pocas palabras. por otro lado JMIUR, hice todo lo indicado con respeto de colocar dentro de la cabecera flash el buscador y el traductor, le coloque transparencia a la cabecera pero no funciono obsérvalo en el blog de pruebas.

Responder
JMiur  

Me alegro que te sea útil, Eulalia. Me parece que en tu caso podría ser muy útil. Experimenta con otro tipo de etiquetas ya que hay varias que pueden ser usadas y tal haya algunas variantes.

Solidaridad: En un rato lo miro y te digo a ver si se encuentra el problema.

Responder
Bonzu Pipinpadaloxicopolis III  

no se me había ocurrido algo así para el post, gracias :-)

Responder
Bonzu Pipinpadaloxicopolis III  

Un detalle para el enlace al comentario, me di cuenta que los enlaces que muestra Blogger para un comentario específico no siempre te lleva a dicho comentario o recarga la página. Cuando hay paginación no te lleva a dicho comentario.

El código original de Blogger es:

<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>

y da lugar a una url así:
http://miblog.blogspot.com/2009/07/este-es-mi-titulo.html?showComment=1247700505969#c9075613624258725560

Y lo único importante es lo que va desde el # hacia la derecha.
Quitando data:comment.url y combinándolo con el <a expr:name='data:comment.anchorName'/>:

<a expr:href='&quot;#&quot; + data:comment.anchorName' title='comment permalink'>
<data:comment.timestamp/>
</a>

Las url's resultan:
http://miblog.blogspot.com/2009/07/este-es-mi-titulo.html#c9075613624258725560

y con la paginación asi http://miblog.blogspot.com/2009/07/este-es-mi-titulo.html?commentPage=2#c9075613624258725560.

Aquí en vagabundia la url se muestra http://vagabundia.blogspot.com/2009/08/agregando-subtitulos-las-entradas.html#comment-1341750265948777416

Creo que la palabra comment- está de sobra. ¿Será útil?.

Responder
JMiur  

Eso dependerá de cómo esté armada la plantilla o qué cosas se han modificado. La exprseión numeral seguida de un ID indica un anchor o alguna etiqueta con cierto ID. Si ese anchor no existe o ese ID no existe, el navegador lo ignora y se posiciona en la parte superior.

En este blog, es indiferente ya que tanto:
........ #comment-1341750265948777416
como:
........ #1341750265948777416
existen así que ambas te llevarán al mismo lugar, al comentario. Una a un DI y la otra a un ANCHOR; ambos están uno al lado del otro así que es indistinto.

Responder
Gato Guga  

Hola, este gran truco.
Me pregunto qué parte de la plantilla debe colocarse el código CSS que usted ha mencionado. He intentado en varias partes y no funcionaba, con el subtítulo en la misma línea del título.
Gracias por su atención
Abraços

Responder
JMiur  

El estilo normalmente lo colocas antes de </head> Sólo debes revisar que los títulos de tu blog tengan el mismo esquema porque puede haber variaciones. Si colocas el CSS, pones un ejemplo y me dices donde puedo verlo, me fijo y te digo si hay alguna corrección que deba hacerse.

Responder
Marcos Gabriel  

Bom, juro que realmente não tinha pensado na possibilidade de usar [small] no titulo apesar de ja ter usado [strike] nunca pensei em usar outra tag e personaliza-la, sao coisas assim que passam dispercebidas XD.
De qualquer jeito ...fez um bom trabalho! e obrigado :) .

Responder
JMiur  

Marcos Gabriel: Con STRIKE podrías hacer lo mismo, en realidad, con cualquier etiqueta. Basta agregarles display: block que es lo que se muestren en otra línea.

Responder
Oloman  

Si que es curioso, sí. Si no llega a ser por tí, nunca se me habría ocurrido poner código en el título de post. Ya mismo lo voy a estrenar. Gracias.

Responder
JMiur  

Es curioso, en realidad, funcionan como cualquier otro control. Creo que acepta las mismas etiquetas que acepta el formulario de comentarios incluyendo enlaces l oque lo hace extrañísimo porque se crea un enlace dentro de otro :D

Responder
MonjaGuerrillera  

Hola Jmiur, un problema que encontré en el tema de los subtítulos (que por cierto funciona muy bien) es que en la sidebar los títulos de los post aparecen junto con los subtitulos. Más chiquitos, por el small, claro. Pero no debajo, sino al costado.
¿Cómo se haría para que el display: block se pudiera usar en la sidebar en el widget de los post más recientes?
O sea, que el subtítulo no se vea seguido del Título, sino debajo del título. Probé con display: block en los enlaces en la sidebar, pero a mí no me funciona.

Gracias.

Responder
JMiur  

Sin verlo online se me hace difícil de contestar porque va a depender de las propiedades que haya y de ñlas etiquetas que tenga ¿Podría ver un ejemplo?

Responder
MonjaGuerrillera  

Sí, en unos días habilito el blog y paso un enlace para que se vea cómo es que me aparecen en la sidebar los subtitulos.
Muchas gracias!

Responder
JMiur  

Listo, me avisas y me fijo :)

Responder
MonjaGuerrillera  

Gracias Graciassss
Ya entendi esto:
Me faltaba colocar en el CSS general, y no en la sidebar, este código:

small {
font-family:Georgia,serif;
font-size:75%;
line-height:140%;
display:block;
}

y ahora sí que en la sidebar se ve el subtítulo debajo del título.
Muchisimas gracias!!!!

Responder
JMiur  

Perfecto :D

Responder
Vaylon  

Pido permiso para que me llamen idiota total, pero como aún ando conociendo a HTMl y CSS (las saco a pasear, las llevo al cine... A veces nos rozamos las manos y sonreímos juguetones) no sé, en el código del post, donde colocar el CSS para que el subtítulo aparezca debajo.

De momento lo intento hacer en el blog que uso para las pruebas (plantilla mínima blanca) y no consigo que quede como explicas. ¿Podrías ayudarme? Le recuerdo que soy, en este aspecto, tan inútil como una sardina. Bueno, quizá no tanto, que he conseguido entender el Header :P

Este es mi blog de pruebas: http://fragglepruebas.blogspot.com

Y éste es donde quiero colocar los resultados: http://fraggleskine.blogspot.com

¡Gracias de antemano!

Responder
JMiur  

Vaylon:
Pués, lo que veo en tu ejemplo de pruebas es correcto:

.post h3 small {
display: block;
font-size: 14px;
font-weight: normal;
}

Lo que no veo es que eso esté agreagdo como estilo.

Responder
Vaylon  

¿Ves como te decía que soy más inútil que una sardina? En vez de en el HTML de la plantilla estaba poniendo código en el HTML del mensaje. No me extraña que digan que mi novia es una santa.

¡Gracias!

Responder
JMiur  

Esas son cosas que nos pasan a todos, no hay problema, Vaylon :)

Responder
GordoPotter  

¡Hola! Última vez que te molesto :p, y ya te agradezco desde ahora por tu tiempo y la paciencia que nos tenes ^^.

Una preguntita, es que generalmente me las puedo arreglar solo, pero es que a veces no me da jajaja. No entiendo donde tengo que poner esta parte:

.post h2 small {
display: block;
font-size: 14px;
font-weight: normal;
/* y el resto librado a la imaginación */
}

Y, o sea, cuando me respondas donde ponerla, ¿después que hago? ¿Le escribo un título más largo a la entrada y automáticamente lo que antes no estaba me lo pone como subtítulo?

Gracias =)

Responder
JMiur  

Eso lo colcoas antes de &ñt;/b:skin> con el resto del CSS.

Si escribes el títul ode ese modo, con una etiqueta como SMALL, automáticamente se formateará. Pero, siempre publica antes el título "normal" porque so, gererará la URL del post, luego, editas el título sin problemas.

Responder
GordoPotter  

Te lo agradezco muchísimo, ya me funcionó =). No sé por qué pero tuve que ponerlo justo debajo de donde se genera toda esa parte de los Posts, o sea, no me basto con ponerlo solo detras de /b:skin, tuve que ir más atrás.

No sé si me podes orientar en esto, pero te hago una pregunta más :p ... ¿Pasa algo si en esa parte del CSS uso estos? < ! -- -- > . Porque no entiendo, ¿hay dos tipos? ¿Esos que mencione recien y estos? /* */

¡Saludooos y graciasss! =)

Responder
JMiur  

La sintaxis básica para escribir comentarios en CSS es:
/* este es un comentario */
para hacerlo en HTML es:
<!-- esto es un comentario -->

La estructura de <b:skin> </b:skin> usa CDATA y eso permite que las reglas se modificquen levemente pero, mi consejo es ceñirse a la sintáxis y usar /* y */

Responder
Juan Carlos  

Algo así hice en mi blog, pero en forma manual, o sea poniendo después del Título la etiqueta <br/ > y luego el subtítulo entre las etiquetas <small></small>. Me dio resulado, pero en el buscador Google muestra las etiquetas, aunque en el navegador no se vean. Mi pregunta es si con lo propuesto aquí no pasará lo mismo. De todas maneras voy a hacer la prueba, y si Google indexa enseguida mi página pondré los resultados en otro comentario. Por supuesto esta es una forma mucho más elegante y maleable, con un "mando a distancia" que es el css, que permite cambiar el aspecto de los subtítulos sin editarlos nuevamente, así que aparezcan o no las etiquetas en Google lo adoptaré. Gracias.

Responder
JMiur  

Sí. Por supuesto que la etiqueta será parte del título y se verá en los buscadores.

Responder
Juan Carlos  

Me corría una fija de que el css me funcionaría, pero aunque en la vista previa se ve bien, por alguna razón el subtítulo no pasa debajo en la página publicada. Es una plantilla muy modificada y es probable que algo esté interfiriendo, pues veo que a la mayoría le funciona bien. Lo que más me interesaba, comprobar si se ven las etiquetas en el buscador Google, va a tener que esperar porque aunque hice el cambio en pocos segundos ya había indexado la página con el nombre que pongo para que tome como URL. Dudo que dejen de aparecer, pero no estará demás comprobarlo. Aclaro que el css lo toma, lo único que no hace es pasar el subtítulo debajo del título. Si descubro lo que es lo pondré en un nuevo comentario, por si puede servirle a alguien que también haya personalizado mucho la plantilla.

Responder
Juan Carlos  

Gracias por confirmarme lo de las etiquetas JMiur.
Finalmente el código también funcionó en mi blog. Quizás cuando lo probé no se actualizó la página, aunque se viera bien en la vista previa. A quienes les pase lo mismo les sugiero que hagan una página de prueba y esperen unos días, a veces Blogger tarda en reaccionar.

Responder
Yurika-Chan  

Genial el truco y es tan fácil que da hasta risa, pero una duda me asalta

En la barra superior del navegador y en los resultados de las busquedas como aparece el titulo???

Responder
JMiur  

En ambos casos, se verá el código HTML como si fuera texto.

Responder
Yurika-Chan  

Pero se ve todo completo?? o solo la parte que no tiene el código????

Responder
JMiur  

En la barra del navegador, se verá exactamente tal como lo haya escrito:

Este es mi título <strong>y este es el subtitulo de la entrada</strong>

Responder
3rn3st0  

Luego de implementar éste hack. Me di cuenta de que en las listas de Blogroll de quienes me tienen agregados, en el lector de feeds y en mi propio blog aparecían los subtítulos pegados a los títulos y la verdad no me pareció elegante.

Se me ocurrió otra manera y aquí la expongo como un pequeño aporte a lo mucho que JMiur nos regala casi a diario.

Primero hay que editar la plantilla en modo HTML y agregar el siguiente código en la sección de estilos CSS, inmediatamente debajo de la etiqueta <![CDATA[

p.subtitulo {
display:block;
color:#555;
font-family:Georgia;
font-size:20px;
letter-spacing:-1px;
margin:-10px 3px 10px 3px;
text-align:left;
text-shadow:3px 3px 2px #CCC;
}

Luego, editamos el post que deseamos publicar normalmente y agregamos cómo primer párrafo esto:

<p class="subtitulo">Aquí va el subtítulo</p>

...

Aquí el resto del texto

---

Cambién los códigos CSS para que se adapten a sus plantillas y voilà!

Responder
JMiur  

Está perfecto; dependerá mucho de la plantilla pero si no hay elementos entre el título y el post, todo andará bien.

Responder
MariaMercedes Orueta  

Hola!!! Quiero agregar subtítulos en mis páginas estáticas, nada más, esto sirve??? Las modificaciones que decís, se hacen la parte del CSS se agrega en la plantilla y lo demás, directamente en ed.html de la página? Lo del CSS, obviamente, cuando decís "lo demás lo dejo librado a tu imaginación", en mi caso, que no entiendo ni medio, se complica bastante. Si quiero poner un subtítulo con el mismo estilo que los títulos de mis páginas estáticas, entonces, cómo sería el CSS. Es para mi blog asesoramientoconsorcios.blogspot.com.ar Gracias!

JMiur  

No creo que valga la pena hacer algo de este tipo, si se trata de pa´ginas estáticas, es mucho más sencillo que coloques el subtítulo en la entrada misma y uses CSS.

Un ejemplo simple. Pongo estas dos reglas de estilo dentro de <b:skin></b:skin>

.post-body {position:relative;}
.post-body h4.subtitulo {position: absolute; margin: 0; top: 50px;}

y en la entrada pongo esto al inicio:

<h4 class="subtitulo">este es el subtitulo</h4>

Responder
itext  

Sencillo y muy eficaz. Gracias.

Responder
Almudena Arnaldos  

Hola!
he implantado esto en The Lemon Pear para mostrar, como si fueran subtítulos, la sección de cada post. Como escribimos de varios temas, cuando escribo sobre moda, detrás del títuli pongo el subtítulo moda y así.

El problema es que tengo un widget a la derecha llamado "lo último" en el que soy incapaz de eliminar ni cambiarle el subtítulo y que sólo aparezca el título, puesto que las secciones están indicadas de forma distinta. Sabrías ayudarme con eso? Gracias!

JMiur  

Sólo se me ocurre usar JavaScript para cambiar eso, eliminando l oque está después de la llave {

$(document).ready(function(){
$('.recent_posts_with_thumbs a').each(function(){
var arr = $(this).text().split(" {")
$(this).text(arr[0])
});
});

Almudena Arnaldos  

Muchas gracias! Es curioso, pero funciona... Para dos subtítulos en concreto! He utilizado el script en el widget en cuestión, pero a pesar de tener exactamente el mismo funcionamiento, sólo me lo aplica a las secciones de moda y de belleza. He probado y si las copio repetidamente, a esas dos me hace caso, pero a las de interiorismo y otros no les hace ningún efecto. No tiene mucha lógica, pero yo soy nueva en JavaScript y no entiendo mucho. Si por casualidad se te ocurre alguna lógica a tí, te agradeceré mucho que la compartas conmigo!

En realidad, el sistema de subtítulos tiene otros problemas, como que al publicarse automáticamente en Google +, se publica el "título <sub.." tal cual, o cuando la gente lo comparte en twitter... Todo lo que no sea el post en sí toma el subtítulo a su manera. ¿Quizá el problema debería ser atacado en ese sentido?

Muchas gracias por tu ayuda

JMiur  

Para lo primero, podrías probar:
$(window).load(function(){
en lugar de:
$(document).ready(function(){
muchas de esas cosas dependen del orden en que cargan las páginas.

Lo segundo no tiene solución. Blogger no tiene subtítulos así que todo lo que está en esa etiqueta es tomada como título literal; sólo podría modificarse si se usara JavaScript cosa que no tendría sentido ya que normalmente no sería detectado por los boots que indexan ni por sistemas que leen contenidos.

La otra solución cuando se emplean sistemas como Blogger, donde las limitaciones las define el servicio, es usar HTML en cada posts y escribir una etiqueta de subtítulos en cada una de las entradas.

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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