Cabecera para páginas de etiquetas. Secciones del blog. | Oloblogger Este truquillo parece adecuado para aquellos que tengan su blog dividido en "secciones". ...

9 de noviembre de 2010

Cabecera para páginas de etiquetas. Secciones del blog.

Este truquillo parece adecuado para aquellos que tengan su blog dividido en "secciones".

Esto de las secciones o apartados de temática común, se puede simular en Blogger mediante la creación de un menú,  cuyos enlaces coinciden con las distintas etiquetas de nuestro blog. Así es como por ejemplo lo tiene construido Elite Voley.

Como podeis ver allí, el menú superior es prácticamente una reproducción de la lista de etiquetas, pero a diferencia de ese gadget, esta lista está construída manualmente. Hay diversas maneras de programar un menú y por citar un ejemplo, List-o-matic puede facilitaros mucho la tarea.

El enlace a cada una de las categorías (o etiquetas) tiene la forma

http://nombre_blog.blogspot.com/search/label/nombre_etiqueta

Pues bien, una vez que tenemos nuestro menú y nuestros enlaces bien configurados, podeis observar cómo al acceder a alguno de estos apartados, lo primero que nos sale es un mensaje del tipo:


Probablemente este mensaje y formato no sea de nuestro agrado, en cuyo caso, ahora comienza el truco que proponemos para cambiar esto.


En primer lugar, editamos la plantilla marcando Expandir plantillas de artilugios y eliminamos la llamada al artilugio Blogger que genera este mensaje. Para ello, simplemente borramos esta línea de nuestro código.

<b:include data='top' name='status-message'/>

Hay un includable que contiene el código completo del artilugio, pero no es necesario tocarlo porque con que suprimamos la llamada (el include), ya lo hemos inutilizado.

Ahora generamos un nuevo gadget cuyo código es el que va a construir una frase con el nombre de la etiqueta (sección para nuestros lectores). Hay que colocarlo inmediatamente antes de <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>


<b:widget id='Label99' locked='false' title='Titulo secciones' type='Label'>
<b:includable id='main'>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<div class='secciones' expr:dir='data:blog.languageDirection'>ESTA VIENDO LA SECCION <data:label.name/></div>
<b:else/>
</b:if>
</b:loop>
</div>
</b:includable>
</b:widget>

El texto en verde se puede suprimir o cambiar por el que se desee. En cualquier caso, la etiqueta data:label.name, mostrará el nombre de la sección dónde nos encontremos.

Ya lo único que falta es dar estilo a nuestra cabecera. Para eso, simplemente insertamos en la parte CSS de nuestra plantilla (antes de ]]></b:skin> para los que no lo recuerden), una nueva clase llamada secciones, con las propiedades que gustemos. Este sería un ejemplo, pero lo mejor es que lo adapteis a la apariencia de vuestro blog.

.secciones {
text-align:center;
margin:0px auto;
text-transform:uppercase;
font-size:130%;
font-weight:bold;
color: #ffffff;
padding:10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #cedce7;
background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 );
}

¿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

35 comentarios :

  1. Oh, Gran Olomán:

    Lo he probado y funciona!

    Aunque... hay tres cosas que no (me) funcionan:
    1) el degradado de color que hay en los estilos css
    2) en cuanto en una etiqueta pincho en "entradas anteriores" desaparece
    3) tengo una etiqueta con el código "max-results=25". Ahí tampoco sale...

    ¿cómo ves estos 3 puntos?

    ResponderEliminar
  2. a mi con mozilla no me funciona, bueno, no me aplica los estilos...

    ResponderEliminar
  3. Muy buena idea me gusta!!

    ResponderEliminar
  4. Pues lo veo mal Pepeworks :(
    Y es que este truco hace que esta "cabecera" salga en los mismos casos en que lo hace el artilugio status-message (mensaje estándar de Blogger) y en los que mencionas no sale. No se me ocurre otra alternativa. Quizás con condicionales o algún script que detecte la dirección de páginas de etiquetas, pero desde luego, sería más complicado.

    Y sobre los estilos (y esto también vale para contestar a Carmen) los que se incluyen aquí son CSS3, lo que implica que no son visibles en todos los navegadores. Sólo en los más modernos. De todas formas, en tu caso he visto que sólo has dejado el border-radius, pero no incluiste las otras dos propiedades para esto mismo que hacen que sea más compatible con más navegadores.
    Podeis probar con otros bordes, fondos planos o de imagen, etc. más "antiguos".

    Gem@ como no tengo botón para eso (Me gusta) lo has hecho al viejo estilo ¿no? :D

    ResponderEliminar
  5. Ok, perfecto, gracias por la respuesta!
    No pasa nada, lo sigo utilizando tal cual.

    Según pude comprobar después, el degradado no me funcionaba en internet explorer, pero sí en google chrome... De todas formas terminé por quitarlo del código, no me convencía mucho...

    ResponderEliminar
  6. Pepeworks si pusierais todas las cosas que propongo por aquí, vuestros blogs serían insufribles. Cada cual que coloque lo que le cuadre ;)

    Carmen, como el anuncio: prueba, compara, pero si encuentras algo mejor ¡Úsalo!

    ResponderEliminar
  7. Hola Oloblogger.
    Te queria preguntar como se podria hacer para que funcione cuando utilizas un enlace a una etiqueta pero con el condicioenente: max-results=6

    Saludos que andes bien...

    ResponderEliminar
  8. Ni idea MR. Es cierto que no funciona. He estado haciendo pruebas, pero en cuanto colocas el max-results, el aviso desaparece. Se ve que al ser un gadget Blogger, algo lleva en destino que elimina eso cuando se cambia cualquier cosa.

    ResponderEliminar
  9. Ok muchas gracias oloblogger.
    Si a mi me funciono sin el max results pero lo que pasa es que lo necesito porque sino la extension de cada pagina seria descomunal.
    Repente alguna solucion sera darle ese condicional de max reults pero de otra manera pero no se3 si habra.
    De nuevo muchas gracias y que andes bien..

    ResponderEliminar
  10. Hola Oloman, lo probe y me va muy bien, pero ahora tengo una duda, cuando configuro el gadget entradas para la pagina principal a un valor mayor de 10 entradas a mostrar solo aparecen 10 post, no mas, como si hubiese alguna condicionante como maximo resultado=10. En otras webs me funciona bien, pero no en esta:

    http://www.fashionrentalsperu.com/

    Podrias darme una mano o una pista de q cosa puede ser, gracias anticipadas.

    ResponderEliminar
  11. Oloman, ya lo arregle...Tenia 13 post publicados y lo configure para q aparezcan 12. Solo aparecian 10, luego sin hacer casi nada aparecieron 11 y ahora hice la prueba ingresando un post nuevo y ya aparecen los doce programados. No se porq sucede esto pero asi me trabaja la web, curioso no?

    Gracias hombre y disculpa el laberinto =)

    ResponderEliminar
  12. Jaime, eso que comentas seguramente es por la autopaginación (segunda parte del post enlazado)

    ResponderEliminar
  13. holaaa me re sirvio tu truco!!! ^^ ahora una preguntita...esto se va a aplicar a tooodas las etiquetas que tengamos no?
    A mi me gustaria que el cartelito salga solo en algunas etiquetas...es medio complicado hacer algo asi?

    O de ultima hacer que el mensaje sea mas personalizable para cada etiqueta, perdon si te mareo todo u.u

    De todas formas te agradezco mucho el truco ^^

    ResponderEliminar
  14. Más que complicado, es largo de escribir Curu-Curu.

    Tendrías que cambiar esta parte:
    <b:if cond='data:blog.url == data:label.url'>
    <div class='secciones' expr:dir='data:blog.languageDirection'>ESTA VIENDO LA SECCION <data:label.name/></div>
    <b:else/>

    Ahí habría introducir más condiciones:

    <b:if cond='data:blog.url == data:label.url'>

    <b:if cond='data:label.name == "ETIQUETA1"'>
    <div class='secciones' expr:dir='data:blog.languageDirection'>ESTA VIENDO LA SECCION ETIQUETA1</div>
    </b:if>

    <b:if cond='data:label.name == "ETIQUETA2"'>
    <div class='secciones' expr:dir='data:blog.languageDirection'>ESTA VIENDO LA SECCION ETIQUETA2</div>
    </b:if>

    <b:else/>

    En el ejemplo sólo he puesto dos, pero tendrías que poner tantas como usaras y cambiar el texto según quisieras para cada una. Si también quiers cambiar el estilo, pues igualmente hay que cambiar la clase "secciones" por otras nuevas que tendrías que crear.

    ResponderEliminar
  15. Hola Olobloger, he estado buscando la línia y no me sale... ¿me podrías decir antes de esta línea qué va? O a ver si la encuentras en mi blog... :S

    ResponderEliminar
    Respuestas
    1. Asegúrate de estar con "Plantillas de artilugios expandidas". Pero de todas formas ¿cuál es la línea que no encuentras?

      Eliminar
  16. Gracias por todo Oloman! Ya lo hice y quedo de lujo, eliminé los bordes y cambié el color.

    Solo hay algo que no sé cómo implementar y es que además de salir la categoría (o etiqueta) en la cual se está, al igual que a ti me salga así: "Home » Blogger" y así se puede volver a home inmediatamente dando click ahí mismo.

    Este widget incluye eso, o es otro más que debo implementar?

    Gracias anticipadas por tu respuesta y sobre todo por tu gran ayuda.

    ResponderEliminar
  17. Por cierto, mi blog es Amandysha.net (por si quieres verificar que hice algo mal y por eso no me funciona bien)

    ResponderEliminar
    Respuestas
    1. No hace falta que lo mire, es que eso segundo es un código adicional.

      Se llama migas de pan o breadcrumbs y lo tienes explicado en el enlace.

      Eliminar
  18. Amigo disculpa, ¿cómo puedo modificar esto para lograr lo que me recomendaste en tu post http://www.oloblogger.com/2008/09/indice-automtico-para-tus-posts.html?showComment=1368581291212#c7263359430602829638?

    La verdad no tengo la más mínima idea de cómo hacerlo :$

    ResponderEliminar
    Respuestas
    1. Dijiste que no querías eliminar el status-message. Aquí se explica cómo modificar el texto para que salga lo que tú quieras. Fíjate en el tercer trozo de código. Ese es el que tienes que modificar tú.

      Eliminar
    2. ¿Entonces solo tengo que incluír el tercer código modificando el texto: "ESTA VIENDO LA SECCION"?

      Por cierto, dices que hay que incluirlo dentrás de
      pero a mí me aparece es

      En vez de locked='true' tengo locked='false'.

      Eliminar
    3. Por cierto, dices que hay que incluirlo dentrás de b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'
      pero a mí me aparece es b:widget id='Blog1' locked='false' title='Entradas del blog' type='Blog'

      Eliminar
    4. Siguiendo todos los pasos he hecho que aparezca "ESTA VIENDO LA SECCION XXXXXX" cuando selecciono una etiqueta, pero no busco eso, lo único que quiero es cambiar el texto "No hay ninguna entrada" por otro texto, sin que me aparezca ese otro texto en otras páginas aparte del home, ni cuando esté en una entrada ni cuando esté explorando las etiquetas, solo en el home.


      Eliminar
    5. Un poco de imaginación y sobre todo de paciencia. No te puedo dar todo hecho porque son cosas generales y como ves, probando vas avanzando en tu propia idea.

      Hay una condición para un caso aquí:
      ...
      <div class='secciones' expr:dir='data:blog.languageDirection'>ESTA VIENDO LA SECCION <data:label.name/></div>
      <b:else/>
      </b:if>
      ...
      Pues prueba a meter una frase entre el ELSE y el IF que serían el resto de casos.

      Eliminar
  19. Hola Oloman podrías verificar que impide que funcione en mi blog ya que en el de pruebas anda perfectamente.
    He probado, revisado, copiado el código directamente desde aquí y nada.
    Saludos y gracias.

    Deprueba

    ResponderEliminar
    Respuestas
    1. Hola. No puedo saber desde aquí que es exactamente, pero si el código funciona (tú mismo lo has comprobado) entonces es que algo, por pequeño que sea, estás haciendo de manera errónea. No sé, que copias en lugar distinto, que te comes algún cierre... o algo así.

      Lo único que he podido comprobar es que el gadget no funciona. Lo tienes creo en el lugar adecuado, pero no se ejecuta, no hace nada.

      Eliminar
  20. Buenas noches,
    hice las modificaciones en mi Blog (http://norbafilatelica.blogspot.com.es/search/label/Filatelia) y funcionó, pero de pronto ha desaparecido. ¿cual puede ser el motivo?.
    Gracias

    ResponderEliminar
  21. Buenos días, Oloman
    ya funciona.
    Gracias por todas tus aportaciones.

    ResponderEliminar
  22. hola Oloman, quiero aplicar esto en mi blog, pero en vez de cambiar el cartelito quiero que aparezca una imagen tipo banner arriba que identifique a la sección, gracias por tu ayuda y saludos

    ResponderEliminar
    Respuestas
    1. Para eso simplemente cambia la parte de texto y lo que genera el nombre de la etiqueta...
      ESTA VIENDO LA SECCION <data:label.name/>
      ...por la imagen que desees.

      Eliminar
    2. :O esto era lo que estaba buscando desde hace meses!!! Gracias Oloman!! Sos el dios del blogger..!!!

      Eliminar
    3. Ya, como Maradona con el fútbol XD

      Eliminar