Título con forma de banda superpuesta plegada | Oloblogger Ni idea de cómo se llama técnicamente este efecto pero para decirlo en menos palabras sólo podría in...

2 de julio de 2012

Título con forma de banda superpuesta plegada

Ni idea de cómo se llama técnicamente este efecto pero para decirlo en menos palabras sólo podría indicar que es lo que podéis ver hoy día en este blog. Lo que se intenta es que el título simule ser una superficie superpuesta sobre las entradas, que cuando alcanza el borde de estas se pliega hacia atrás.

He usado un antiguo blog de pruebas para ilustrarlo, así que si cuando veas esto ya no observas aquí nada parecido a lo explicado, echa un vistazo a este otro ejemplo:

Realzando los títulos
Acceso a demo

El código que pondré es el utilizado para este último ejemplo, pero algunos valores variarán forzosamente según la plantilla utilizada así que lo mejor es entender cómo funciona todo y no limitarse a copiar y pegar. Si luego no se sabe ajustar, lo normal es que no sirva de mucho.


Lo que haremos será convertir el título en un elemento de bloque para poder tratarlo en cuanto a propiedades de manera independiente y lo único destacable en esta parte será que lo desplazaremos a la izquierda mediante un margen izquierdo negativo.

Luego añadiremos un triángulo un poco más claro para completar el efecto, situándolo bajo el título y alineado con el lado izquierdo de este. Es así de sencillo.


Para lo primero añadimos este CSS antes del cierre SKIN (]]></b:skin>):

h3.post-title {
position:relative;
display:block;
overflow:hidden;
width: 85%;
height: 2em;
margin: 5px 0 0 -28px;
padding:2px 4px 4px 40px;
background: #333;
border: 1px solid #555;
border-radius:10px 10px 0 0;
line-height:1.10em;
}

Si probamos con Vista Previa observaremos cómo el título ha quedado dentro de un rectángulo con fondo negro, un borde más claro y desplazado hacia la izquierda.

Evidentemente, cada cual puede ajustar márgenes, padding, fondo y bordes como mejor le cuadre con su blog, pero lo que es imprescindible es que el cuarto valor del margin sea negativo. Ese valor es el que se lleva el título hacia la izquierda, fuera del cuerpo de las entradas, y es el que deberéis ajustar para que quede exactamente dónde vosotros queráis.

En algunas plantillas puede que esa parte no sobresalga como debiera. En ese caso es porque probablemente el cuerpo de las entradas tenga un overflow:hidden que precisamente hará invisible todo lo que sobresalga.

Hay dos opciones si ocurre esto. Una es comprobar si es prescindible ese overflow y quitarlo. La otra es directamente olvidarse de este truco. Lo siento, pero habría que modificar muchas cosas para mantener el overflow y compatibilizarlo con esto.


Para el triángulo tendremos que crear una nueva clase CSS para después incluirla en la parte HTML de la plantilla.

Esta sería la clase que formaría el triángulo y su posición se controla nuevamente con el margin. El primer valor hace que se muestre bajo el rectángulo del título y el último es el que controla el desplazamiento a la izquierda. Otra vez, ese es el dato a modificar para colocarlo en el sitio exacto:

.trih3 {display: block;
z-index: -1;
height: 0px;
width: 0px;
margin: -12px 0 0 -40px;
border: 12px solid transparent;
border-right: 12px solid #222;
}

Vista Previa no nos mostrará todavía nada porque no hemos utilizado esa clase en nuestra plantilla. Tras incluirla de la forma que se explica a continuación ya podremos echar un vistazo e ir ajustando su posición. Paciencia.

Con Expandir plantillas de artilugios seleccionado buscamos post.title hasta llegar a un trozo de código como este. En él insertamos justo antes del último cierre if una capa vacía con la clase trih3. La línea la he marcado en color verde.

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
<div class='trih3'/>
</b:if>

Ahora sí que podemos ver cómo queda el conjunto y rectificar lo necesario modificando los valores de margin negativos de h3.post-title y .trih3.

El resto es la parte "artística". Cuando el fondo del título sea claro, el del triángulo tendrá que ser un punto más oscuro para simular profundidad. Cuando el fondo del título sea muy oscuro, como en este ejemplo, el triángulo tendrá que ser un poco más claro para que se aprecie el cambio de tonalidad.

El fondo del título en el código de esta entrada está definido en la línea background: #333; y el del triángulo en la que reza border-right: 12px solid #222;. Suele resultar interesante el añadir una imagen como fondo en lugar de un color plano.

En el código podéis ver también un border-radius que he añadido y que es prescindible, pero os permitirá redondear ciertas esquinas. El orden de los valores que contiene marca las esquinas superior-izquierda, superior-derecha, inferior-derecha e inferior-izquierda, respectivamente.

Nota: La caja contenedora, en este caso post, no debe tener un overflow: hidden o el efecto quedará oculto al desbordar la misma. En su caso quitar esa propiedad CSS si no es imprescindible.

Y si quieres el mismo efecto pero doble y quizás incluso más fácil de montar, en esta otra entrada lo tienes

¿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

99 comentarios :

  1. La idea es fantástica pero si escribimos títulos muy largos la zona de la ¿banda se agranda automáticamente? ¿o quedara texto por fuera de la banda?
    Gracias

    ResponderEliminar
    Respuestas
    1. No se agranda, pero por eso tiene doble alto, para que quepa en una segunda línea si es necesario. Si aún así no cabe todo, lo que sobra se queda oculto.

      Eliminar
  2. Hola que tal, Oloman,

    he colocado en mi blog la banda plegada, y muy bien, muchas gracias por el aporte, te lo agradezco enormemente. Iván de Aizum Blog.

    ResponderEliminar
  3. Hola!!!
    Me encanta tu Blog y como lo llevas. Hace tiempo que te sigo, aunque jamás te había escrito ningún comentario ... Lo siento!!!

    He hecho lo que has dicho y me gusta el efecto, pero tengo un problema. En mi Blog, tengo puesta la plantilla "Picture Window" de Blogger y no me deja cambiar el color del título de la entrada, sólo el tipo de letra. Lo tengo en rojo y quiero ponerlo en blanco. Además cuando abro la entrada, no se ve el título, sólo la banda. Imagino que se puede hacer modificando el código HTML, pero no tengo ni idea ... :-( Si tu me pudieras ayudar .... !!! Mi Blog es: http://lascositasdelyra.blogspot.com.es/

    Muchas gracias y un saludo!!!
    Lyra

    ResponderEliminar
    Respuestas
    1. Pienso que en Diseñador de Plantillas debe existir esa opción, pero si no la encuentras simplemente inserta una línea más con COLOR: WHITE; a ese primer código que di (h3.post-title).

      Y estás perdonada :)

      Eliminar
    2. En esta plantilla en diseñador, no me da la opción de cambiar el color del texto. Y haciendo lo que tu me dices tampoco cambia ... no sé, igual no lo hago bien. Y como ya te dije, cuando abro la entrada el título desaparece, se ve la banda, pero no las letras. Así que de momento lo quito porque no me gusta con el color que me sale y si me das otra solución ... lo intentaré de nuevo ... :-)

      Mil gracias y un saludo!!!
      Lyra

      Eliminar
    3. Vale, otra solución que en el fondo es la misma. Cuando accees a un post desaparecen las letras poque tienes como opción que los enlaces visitados cambien de color y este coincide con el fondo que yo puse de ejemplo. Lo podrías comprobar cambiando en este código dicho color.

      Intenta utilizar en lugar de un clase, tres:

      h3.post-title, h3.post-title a, h3.post-title a:visited {
      }

      Entre las llaves inserta las propiedades del ejemplo más el color:white; que te dije.

      Eliminar
    4. Ahora SI ... Eres genial, ha quedado de maravilla!!!!

      Muchísimas gracias ... me encanta!!!

      Eliminar
  4. Hola Oloman bueno este comentario no tiene que ver nada con este post por es que he estado buscando un codigo para hacer algo como en esta web http://www.muycomputer.com/ para poner asi como noticias principales y asi que vallan cambiando pero no encuentro nada aqui en tu blog, queria saber si podrias hacer un post acerca de esto porfa

    ResponderEliminar
    Respuestas
    1. Es un artilugio que aunque reconozco que es bastante espectacular, nunca me ha convencido del todo y por eso nunca lo he probado ni he publicado nada al respecto. Sin embargo sí que tengo pensado ver alguno algún dia. Mientras, si no quieres desesperar esperando, tendrás que buscar "slider automático de entradas" o algo así. Te aparecerán varios.

      Eliminar
  5. Gracias Olo por publicar este truco,implemente todo como tu escribe,pero el traingulo no se ve y el borde de afuera no cierra,se puede hacer algo para que se vea como el demos.
    Gracias
    Pedro

    ResponderEliminar
  6. Gracias Olo por publicar este truco,implemente todo como tu escribe,pero el traingulo no se ve y el borde de afuera no cierra,se puede hacer algo para que se vea como el demos.
    Gracias
    Pedro

    ResponderEliminar
    Respuestas
    1. Es que en tu blog no se ven los títulos de las entradas. No sé si es que las publicas sin título o que los hiciste desaparecer desde el estilo. Sin títulos es imposible aplicar este efecto PARA TÍTULOS... ;)

      Eliminar
  7. La verdad lo que me atrajo fue el título medio marciano. No me imaginé de qué se trataba hasta leer el contenido.

    ResponderEliminar
    Respuestas
    1. Eso se llama buen marketing, aunque prometo que no fue mi intención :)

      Eliminar
  8. Que tal Oloman, hace poco te escribí en el formulario de contacto sobre una asesoría para instalar un menú en Wevoluciona.com, solo para avisarte que funcionó muy bien tu consejo de colocar el script en un gatget.

    Muchas gracias viejo!

    PD. Solo una cuestión, si gustas entrar a mi sitio verás que los submenús de las categorías 4,5 y 6 se ven en la parte de abajo, esto solo pasa al inicio, ya que si pasas el cursor por dichas categorías ya se colocan como deben estar.

    ResponderEliminar
    Respuestas
    1. No sé a qué te refieres con eso de que "se ven en la parte de abajo". Eso parece lo normal y yo no veo nada mal en el menú actual.

      Eliminar
  9. No se como lo haria en mi plantilla con posts en cuadros xD
    Saludos gente!

    ResponderEliminar
    Respuestas
    1. Aunque quizás necesites algunos pequeños ajustes, se hace igual. Sólo tienes que ver mi página principal. Los tiene hechos así mismo.

      Eliminar
    2. Cierto, lo voy a intentar pues ya no supe que poner en la parte de los trih3 que en mi caso no pude encontrar ni como trih2 ni trih solo, voy a revisar tu plantilla principal entonces, saludos!

      Eliminar
    3. El trih no lo vas a encontrar porque es precisamente una cosa que tienes que añadir. De todas formas mira unos cuantos posts adelante (más recientes) porque he publicado otro sistema que no necesita eso.

      Eliminar
  10. mmm... a mi me sale el triangulo sobre la barra de titulo y no detras, se ve raro...

    ResponderEliminar
    Respuestas
    1. No doy con la tecla, pero en tu plantilla el efecto no quedaría igual. Para realzar los títulos de esta manera lo mejor es que el cuerpo de cada post sea de color distinto al del fondo. De otra manera parecería una banda flotante.

      Eliminar
  11. Muchas gracias por el aporte y por haberme avisado de tu post. Lo voy a intentar a ver que tal me queda.
    Saludos

    ResponderEliminar
    Respuestas
    1. No hay de qué. Me acordé de casualidad. Suerte.

      Eliminar
  12. Saludos Olo,este mismo truco como se puede implementar en los gadget
    Gracias
    Alfonso

    ResponderEliminar
    Respuestas
    1. En tu caso, cambiando h3.post-title por .sidebar h2

      El problema es con el trih3, ya que lo insertar más de una vez; una para cada gadget justo antes del div de cierre.

      Eliminar
    2. Vale. Hay otra solución más fácil. La estoy comprobando...

      Eliminar
  13. Gracia Olo,espero por la solución mas fácil
    Saludos

    ResponderEliminar
  14. Creo que lo voy a poner en mi blog. Hace tiempo pensé hacer algo similar con una imagen png. pero resulto un tanto chapucero, el css es lo suyo ... así que gracias por tus ocurrencias y felicidades de nuevo por la transición tan bien llevada de Oloblogger.

    ResponderEliminar
    Respuestas
    1. Gracias Carlos. Ya sabes que no soy ningún experto y siempre da gusto que te hagan saber que acertaste... aunque sea de casualidad :D

      Eliminar
  15. Hola. Una pregunta muy tonta, por si lo estoy hacindo mal: ¿cual es la parte html de la plantilla donde hay que poner ".trih3 {display: block;....."?

    ResponderEliminar
    Respuestas
    1. En el último trozo de código de esta entrada se ve el sitio y en el texto anterior se explica. No olvides seleccionar "Artilugios de plantillas expandidos".

      Eliminar
  16. Saludos, amigo:
    Como estoy suscrito a tus entradas, me he asomado a tu post más reciente, el adorno de los títulos de la sidebar y he visto la referencia al adorno del título, que ya he colocado en "Curiosón".
    Un saludo por tu esfuerzo y siempre agradecido.

    ResponderEliminar
  17. No hay de qué. Por mi parte he visto el cambio en tu blog y queda "mu potito" :)

    ResponderEliminar
  18. felicidades por el blog...

    Mi pregunta es como controlo (que cogigo debo añadir) para reducir el espacio del titulo de la entrada (rectángulo explicado en esta entrada) con el inicio de la entrada...

    Agregue su aportación, pero la separación del titulo (rectángulo) y el contenido de la entrada es casi de dos espacios, quisiera disminuirlo

    ResponderEliminar
    Respuestas
    1. Tendría que ver tu blog para ver qué clases maneja (no hay ninguno asociado a tu perfil), pero en un principio, este truco no mete espacios entre título y contenido del post. Eso lo haría el tercer valor margin de h3.post-title

      Quizás tengas algún margen para esa clase por otra parte de tu plantilla o quizás en el bloque siguiente (cuerpo de entradas).

      Eliminar
  19. ¡Saludos Olomann!

    Hace un tiempo agregue este truco a mi blog pero justo hoy me di cuenta de algo. Cuando inicia el post como tal queda muy separado de la parte de la banda.

    Osea...

    Banda
    ESPACIO ancho
    Inicio de post

    ¿Cómo puedo hacer para que ese espacio no sea tan ancho? ¡Gracias mil de antemano, mi blog TVboricuaUSA.com, Saludos!

    ResponderEliminar
    Respuestas
    1. No es cosa de la banda, sino de la estructura del post. Tienes un header vacío, pero que incluye un margen que sí ocupa espacio. Es este y sólo tienes que poner el valor 1em a 0:
      .post-header {
      margin: 0 0 1em;
      }

      Eliminar
    2. ¡Graciasssssssss! Problema resuelto. ¡Un abrazo Oloman! :)

      Eliminar
  20. no he entendido nada me podria hacer un video porfavor

    ResponderEliminar
  21. Hola muy bueno pero como hago para que solo se muestre el truco solo una entrada endividual? porque mi blog es tipo megazine de cuatro colunnas de post y no se ve bien el truco en las miniaturas sera que se puede hacer algo? llevo mucho tiempo buscando algo asi como esto ayuda please....

    ResponderEliminar
    Respuestas
    1. No es muy correcto, pero podrías ir a la parte HTML y allí poner ese código entre etiquetas STYLE y todo a su vez dentro de una condición:

      <b:if cond='data:blog.pageType == "item"'>
      <style type='text/css'>
      AQUI TODO EL CODIGO DE ESTILO DE LA ENTRADA
      </style>
      </b:if>

      Si lo pones así sólo te saldrá ese efecto cuando se accede a una entrada individual.

      Eliminar
  22. Buenas Oloman he visto este truco y esta genial me salio casi a la perfeccion al aplicarlo pero cuando intento poner el triangulo mas afuera como sale en tue entrada de diseño lo que hace es correr el triangulo como quiero pero al correlo desaparece y lo que hace que no se vea el efecto espero tu ayuda

    ResponderEliminar
    Respuestas
    1. Como cito en post ¿comprobaste si tienes un overflow en el bloque dónde intentas ponerlo? Yo no puedo verlo porque no tienes dado de alta tu blog en tu perfil.

      Eliminar
  23. Y gracias por el truco lo andaba buscando

    ResponderEliminar
  24. Hola, necesito de tu ayuda !! Hace modifique el diseo de mi blog porque ya me aburria el que tenia anteriormente, y puse el "picture window" y este no me deja cambiar el fondo del blog, quiero colocar un fondo de esos que te da el blog el blog como por ejemplo: naturaleza, viajes, etc. Quisiera saber como puedo hacer para poder cambiarlo, creo que hay que cambiarle algo al HTML pero no se que. Espero tu respuesta !

    ResponderEliminar
    Respuestas
    1. Vale. Esta es la manera habitual y esta otra la de emergencia. Supongo que con alguna de las dos podrás hacerlo.

      Eliminar
  25. que mal.. es que no se donde se ponen los ultimos dos codigos.. es que no das el sitio exacto y no encuentro nada.. no se donde ponerlos. si juntos o que.. :S oh es que soy muy bruto para no entender.. de cualquier manera agradeceria tu ayuda amigo.

    ResponderEliminar
    Respuestas
    1. Todo eso del .trih3 se mete también antes del cierre del SKIN, pues es también CSS (estilo).

      El último trozo es la referencia y debes tenerlo igual que puse. Sólo hay que añadir una línea, la marcada en verde. Recuerda marcar Plantillas de artilugios expandidas.

      Eliminar
  26. Hola ya tenia tiempo buscando este efecto ribbon en los titulos... pero no lo lograba incorporar a blogger.

    Pero tengo un problema.. siguiendo tal cual no me salia nada asi que decidi poner el codigo "h3.post-title " directamente en mi ".post.title" y aparecio el cuadro... pero ahora quiero el triangulito para que el efecto quede completo... donde pongo el "div class='trih3'/" me hago bolas entre tanto b:if...

    mi blog: www.kiwiandpizza.blogpspot.com

    ResponderEliminar
  27. Me encantaría verlo pero no si tengo que aceptar el premio ;)

    ResponderEliminar
  28. Mmmhh... este se me resite. Quité el hidden del overflow que tenía mi plantilla pero algo sigue sin ir del todo bien... T_T Desesperación absoluta xD

    ResponderEliminar
    Respuestas
    1. En .post .post-title {} quita el margin que tienes puesto porque se "come" el que tenemos en h3.post-title. Y ya que estamos, añade ahí un position: relative; y un z-index:2; por lo que veremos al final.

      Haz lo mismo con el background (quitarlo de .post .post-title) y cambia el de h3.post-title para que quede así:
      background: url(http://img248.imageshack.us/img248/8439/peter2.png) no-repeat darkSlateBue;

      Una vez hecho eso no se te verá bien el color de fuente, así que vas a .post h3 a y le pones otro color, por ejemplo blanco: color: #fff; Allí mismo añade un padding-left: 30px; para que el texto no se monte sobre la imagen que pusiste.

      Por último, el triángulo ahora se ve por encima del título del post, así que vas a .trih3, le añades un position:relative; y le cambias el z-index de -1 a 0.

      Era complejo por culpa de la estructura de esa plantilla, por eso no te terminaba de salir.

      Eliminar
    2. Como para haberlo solucionado sola, ¿sabes?

      Muchas gracias^^

      Eliminar
  29. De nuevo yo con la flechita negra que no sé por qué motivo me sale en otro color y encima no cuadra con la banda del título.

    Thanks por todo^^

    ResponderEliminar
    Respuestas
    1. Si es en pippersdiary, el ajuste tienes que hacerlo en .trih3

      El margen superior lo pones en -13px (margin: -13px 0 0 -40px;) y para el color ya tienes que cambiar el de la última línea: border-right: 12px solid red;

      Eliminar
  30. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  31. Amigo Oloman, yo tengo problemas con el triángulo, hay una punta de más, mire lo mal que queda en mi blog de pruebas: http://elultimojedi.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola. Añade a este selector un position:relative;

      h3.post-title {
      position: relative;
      ...

      Eliminar
    2. Hola otra vez, muchísimas gracias, ya quedó de 10. Pero para no quedar de neófito, ¿qué hace ese atributo?

      Eliminar
    3. Pues es algo complicado explicarlo aquí, así que te remito a esta entrada y la siguiente.

      Eliminar
  32. Oloman ya lo he puesto, y me encanta, solo una pregunta, podría ser posible modificar el final de la banda y que en lugar de que acabe recondeada, acabe en 2 puntas?, muchas Gracias apañao

    ResponderEliminar
    Respuestas
    1. Metiendo mi cuchara otra vez, creo que eso se arregla en h3.post-title { cambiando el atributo border-radius:10px 10px 0 0; y donde tenga 10px o cualquier otro valor poner uno menor o directamente 0 para que en vez de salir redondeada salga en punta.

      Eliminar
    2. Métela todas las veces que quieras

      Eliminar
  33. Hola oloman una pregunta como haria para redondear la esquina inferior derecha, muchas gracias............ Sé que tengo que meter mano al border-radius:10px 10px 0 0 pero cuando le pongo 10px a los ceros se pone todo cuadrado, como haria?

    ResponderEliminar
    Respuestas
    1. ¿Qué navegador usás? porque creo que este truco no funciona en Internet Explorer, yo uso Google Chrome y veo que funciona bien en tu blog.

      Eliminar
    2. Por ahi escuche que la propiedad css3 para redondear no se ve en internet explorer

      Eliminar
    3. Se ve pero sólo a partir de la versión 9, en las anteriores no.

      Los valores de border-radius siguen este orden: arriba-izquierda, arriba-derecha, abajo-derecha, abajo-izquierda. Es como recorrer el rectángulo en el sentido de las agujas del reloj empezando por arriba-izquierda.

      Por tanto, el 10px 10px 0 0, deja sin redondear las dos esquinas de abajo. No le encuentro explicación a eso que dices de que se ponga todo cuadrado cuando pones cuatro 10px. Supongo que algún carácter de menos o de más pones.

      Eliminar
  34. Olo tengo una duda si quiero que los bordes sean completamente rectangulares, SIN nada redondeado como hago? Gracias.

    ResponderEliminar
    Respuestas
    1. Ya logre hacer esto, mi pregunta si quier que la barra sea mas gruesa como lo hago?

      Eliminar
    2. Si por la barra te refieres a la banda y por gruesa te refieres a su altura, eso se cambia en h3.post-title {, cambiando el atributo height: 2em; por otro mayor por ejemplo height: 4em;

      Eliminar
  35. hola oloman, me estas siendo de mucha ayuda, ya que no soy muy experta en el tema, tengo un problema que me encantaría me dieras una solución. Me gustaría cambiar el fondo tanto de las entradas como de las columnas laterales,archivo del blog..,y poner de fondo una imagen, para poder escribir en ella,pero no se como hacerlo.Además cuando intento cambiar, se me transparenta el fondo, Muchas gracias

    ResponderEliminar
    Respuestas
    1. Lo del fondo de las entradas te lo he contestado en otro comentario que hiciste por otro sitio. Para las columnas laterales tendrías que añadir a tu CSS algo así:

      .sidebar {background: #fff; padding: 5px;}

      Eliminar
  36. Bueno haciendo unas pequeñas modificaciones a este codigo de Oloman he pasado este codigo a HTML/CSS3 para poder usarlo en cualquier tipo d web no solo en blogger tal y como le habia comentado a Oloman dejo aqui el codigo, es un codigo muy sencillito con tan solo unos pequeños cambios para que por ejemplo la banda del titulo se autoajuste segun el texto que añadamos ya sea largo o corto al igal que el cuerpo del mensaje que tambien es autoajustable, el codigo aun se podria depurar un poco mas como por ejemplo el espacio entre lineas, cosa que no he ajustado ya que he puesto todo e texto del titulo en una sola linea, aqui os dejo el css junto con el html para quien quiera usarlo

    [code]

    #post {
    background-colo#post { /*Contenedor Principal*/
    background-color: #FFE897;
    width: 40%;
    margin-left: 40px;
    padding-top: 5px;
    padding-bottom: 15px;
    margin-top: 15px;
    -moz-box-shadow: 4px 4px 2px #315335; /*codigo para sombreado para firefox y navegadores basados en mozilla */
    -webkit-box-shadow: 4px 4px 2px #315335; /*codigo para sombreado para webkit , chrome, etc */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#315335,direction=125,strength=5)"; /*codigo para sombreado para internet explorer */
    }
    #post-title { /*contenedor del titulo del post (banda superpuesta) */
    position: relative;
    display: block;
    overflow: hidden;
    width: 95%;
    margin: 5px 0 0 -13px;
    padding: 12px 4px 0 20px;
    background: #666;
    border: 1px solid #555;
    border-radius: 0px 10px 10px 0;
    line-height: 1.1em;
    color: #FFE897;
    text-shadow: 4px 4px 2px #000; /*Sombreado del texto*/
    -moz-box-shadow: 4px 4px 2px #000; /*codigo para sombreado para firefox y navegadores basados en mozilla */
    -webkit-box-shadow: 4px 4px 2px #000; /*codigo para sombreado para webkit , chrome, etc */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#000,direction=125,strength=5)"; /*codigo para sombreado para internet explorer */
    }

    .trih3 { /*Triangulo*/
    display: block;
    z-index: -1;
    height: 0px;
    width: 0px;
    margin: -12px 0 0 -25px;
    border: 12px solid transparent;
    border-right: 12px solid #222;
    }
    [/code]

    Como podeis observar en "#post" y en "#post-title" n le he puesto la altura "height", esto es debido a que si no le añadimos la altura la altura se autoajusta ella sola. Tambien podreis obsrvar que en el contenedor del "#post" que es el contenedor principal le he puesto un "width" de 40% esto lo he hecho para que asi escribamos lo que escribamos no sobrepase el 40% del tamaño de nuestra pantalla, logicamente eso podeis cambiarlo para que se ajuste a vuestra plantilla o web

    Y aqui os dejo el html que haria falta para hacerlo funcionar, como podreis observar es un html muy sencillo que tan solo tendreis que añadirlo en donde querais que se muestre vuestro post noticia o lo que querais poner en vuestra web, cabe destacar que siempre se puede automatizar un poco todo pero eso ya seria cosa de añadir algo de codigo php el cual no es objeto de este post

    [code]
    <.div id="post">
    <.div id="post-title"><.h3>Titulo del Post<./h3><./div>
    <.div class='trih3'><./div>
    <.div id="post-text"><.p>Cuerpo del mensaje <./p><./div>

    [/code]

    Mis agradecimienos a Oloman por haber crado este post ya que sin este post no me hubiera dado por investigar a ver como podria adaptarlo a html para usarlo en una web que estoy haciendo, asi que por lo tanto todos los derechos son suyos ya que yo lo unico qu eh ehecho ha ssio adaptarlo a html/css3.

    Aqui os dejo una web que he subido de pruebas para que podais ver su funcionamiento:

    http://guild.adesigns-graffic.com/

    P.D.: Recordad quitar el punto que hay delante de cada DIV - /DIV, H3 - /H3 y P - /P ya que he tenido que onerlo por que sino no me dejaba añadir la respuesta ;)

    ResponderEliminar
    Respuestas
    1. Pues gracias TanTris/Varak ;)

      Y para otra ocasión que necesites meter HTML en un comentario, pásalo primero por aquí :)

      Eliminar
    2. Se agradece la verdad es que no sabia de esa ayuda, soy muy muy my novato en cuanto a blogger se refiere xD

      Eliminar
    3. Amigos justo hoy busqué nuevamente este post para preguntar cómo se podía hacer para que la banda fuera autoajustable al texto, sorpresa mia cuando veo el aporte de TanTris Castilla :)

      Verán, yo tengo este código:

      h1.post-title {
      position:relative;
      display:block;
      overflow:hidden;
      width: 96%;
      height: 1em;
      margin: 15px 0 30px -8px;
      padding:8px 0 10px 35px;
      background: #ffffff;
      border: 3px solid #9d0000;
      border-radius:100px 0 100px 0;
      line-height:1em;
      }

      Es el de la banda con el título del post (le quité lo del triángulo).

      ¿Qué debo introducirle para hacerlo autoajustable? Es que no encuentro en el código de TanTris algo específico para eso.

      Muchas gracias a ambos.

      Eliminar
    4. En el código de TanTriS, dónde pone #post-title, para Blogger tiene que poner h3.post-title y en tu caso h1.post-title. Sólo eso... sin olvidar incluir en el HTML el div class='trih3'

      Eliminar
    5. ¿Pero lo del div class='trih3' es solo cuando se quiere utilizar el triángulo cierto?

      Yo no introduje ninguno de esos códigos de trih3 porque no quería el triángulo, solo la barra rectangular del título.

      Y pues en cuanto a los valores de la barra rectangular, veo que el código de TanTris solo varía del tuyo en que este tiene valores de sombreado, de resto todo lo veo igual.

      Entonces... ¿cómo es que TanTris logra el autoajuste?

      ¿Será que debo incluir los códigos trih3 del triángulo (aunque no quiero que aparezca)?

      ¿O será que debo incluír este código? -->
      <div id="post">
      <div id="post-title"><h1>Titulo del Post</h1></div>

      De ser esto último... ¿en qué parte específica lo coloco?

      Eliminar
    6. Con la demora que llevo y con tanto comentario cruzado me perdí. Si no quieres el titular tipo banda plegada ¿qué quieres entonces hacer exactamente?

      Eliminar
  37. Por cierto soy el mismo que ha dado la brasa en sar Google Docs como base de dats con la cuenta de Varak Cstilla solo qu ese me habia olvidado cambiar de cuenta (es lo malo de tener demasiados mails xD)

    ResponderEliminar
  38. bendiciones :) ya use el super fb man y me gustaria que me ayudes con el fanbox fb con efecto deslizante... lo que pasa esk me cuesta mucho trabajo editar html y esas cosas .. si me ayudas te lo agradecere :) contactame xf www.facebook.com/djshompy

    ResponderEliminar
  39. ¡Qué estupendo!
    Lo he añadido ipso facto a mis entradas.
    Además, he querido ir más allá, aumentando la anchura a 105% e intentando crear una nueva clase triángulo similar pero tal que el efecto quede a la inversa (para el lado derecho) y simular así que la banda cubriese la entrada por ambos lados.
    Como era de esperar no lo he conseguido...
    El problema es que al incluir en el código:
    div class='trih3'/ div class='trih4'/
    La segunda clase (la he denominado así por inercia) queda una línea por debajo, y se visualiza algo diferente a lo que busco.
    =(
    Intuyo que habría que incluir en la propia clase los dos triángulos, pero no sé cómo resolverlo.
    ¿Alguna idea?

    ResponderEliminar
    Respuestas
    1. Por cierto, se me ha olvidado decir que, para el segundo triángulo, únicamente hay que suplir "border-right" por "border-left".

      Eliminar
    2. Indagando en la web con cada línea de código del maravilloso trih3, supongo que el juego estaría en modificar su display, pero se me escapa de las manos...

      Eliminar
    3. No me lo puedo creer...
      Siento formar trasiego en el blog, estando ya la respuesta dada: http://www.oloblogger.com/2012/07/banda-plegada-doble-gadget.html
      Muchas gracias.

      Eliminar
    4. De nada. No hay que ser impaciente ;)

      Eliminar
  40. ¡Hola Oloman! Me ha encantado esta entrada, pero llámame torpe, pero con la nueva forma de las plantillas no se como insertar el código. ¿Podrías ayudarme?

    ResponderEliminar
  41. Ya encontré tu entrada http://www.oloblogger.com/2013/04/nuevo-editor-html-blogger.html
    ¡Gracias!

    ResponderEliminar
  42. Hola amigo todo funcionando, pero quiero que tenga el mismo efecto de ambos lados como le hago,, y explicame un poco del codigo que coloco el otro amigo donde y como debo insertarlo,, para ajusta el texto este es mi blog,,http://graphicsonlinedg.blogspot.com/
    gracias,,

    ResponderEliminar
    Respuestas
    1. Creo que ya encontraste el otro post dónde se explica eso. Me paso para allá.

      Eliminar
  43. Fascinante esto Oloman, lo he probado ya en mi blog de pruebas. Como has advertido, lo del triángulo no me sale "nipatrás" porque además tengo otras cosas como los sumarios de entradas y el primer post diferente con título centrado... Así que veo la complicación. Sin embargo, me gusta como queda sin el triángulo, porque he redondeado las esquinas y le he dado forma al borde, añadiendo otros tutoriales que también explicaste y la verdad, me gusta mucho como queda así también. Cada vez voy entendiendo más las cosas de este lenguaje y todo es gracias a vosotros que las explicáis tan bien, no os limitáis a dar un código y punto, es genial aprender y así atreverse a hacer cosas por nuestra cuenta. Poco a poco, voy terminando en el blog de pruebas, el que espero sea uno definitivo. Gracias ;)

    ResponderEliminar
    Respuestas
    1. Pues nada Maluy, me alegro de que lo que publicamos te sirva de ayuda. Para eso nos molestamos en explicar las cosas como dices. Si sólo pusiera cosas de copiar y pegar os quedaríais igual, sin saber ni lo que habéis hecho.

      Eliminar