Cambiar títulos de páginas | Oloblogger Lo habitual en las plantillas de Blogger, es que el título de la página (el que saldrá luego en las pestañas de nuestro navegador y en los r...

22 de enero de 2010

Cambiar títulos de páginas

Lo habitual en las plantillas de Blogger, es que el título de la página (el que saldrá luego en las pestañas de nuestro navegador y en los resultados de los buscadores), esté en la forma Nombre_blog: Titulo_post. Por ejemplo, para esta entrada sería Oloblogger: Cambiar títulos de páginas.

Este título de página lo genera la línea de código en rojo que podeis encontrar normalmente al principio de vuestra plantilla, entre las líneas que en la siguiente reproducción hemos marcado en gris:

<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*

blog.pageTitle es una de esas variables DATA que almacenan datos importantes y necesarios de los blogs Blogger. Esta en concreto guarda los títulos de las páginas individuales de cada entrada, en la forma indicada al principio, salvo para la página de inicio (home) y las de navegación (etiquetas y recientes/antiguos). Para estas últimas, almacena el nombre del blog.

De esta manera, para cambiar el aspecto de nuestros títulos, podemos cambiar la variable por otro texto que nos venga bien o todavía mejor, por una variable que tenga lo que nos interesa mostrar. Incluso se pueden combinar texto y variables.

Muchos sitios recomiendan que lo óptimo es mostrar el título en la forma inversa a como Blogger lo hace por defecto. Esto es, Titulo_post: Nombre_blog ó siguiendo con el ejemplo de este mismo post, Cambiar títulos de páginas: Oloblogger Para ello, tendríamos que sustituir la línea antes marcada por cualquiera de estas otras dos:

<title><data:blog.pageName/>: Nombre_blog</title>
...
<title><data:blog.pageName/>: <data:blog.title/></title>


blog.pageName, nos sirve para mostrar el nombre de cada página correspondiente a cada entrada (permalink), mientras que blog.title, será el nombre (título) de nuestro blog. Con ambos, obtenemos el efecto deseado.

La segunda opción es la más recomendable, en cuanto que toma el dato grabado en Blogger, del nombre del blog. Si lo hacemos así y alguna vez cambiamos el titulo del blog (no confundir con el de las entradas), los títulos de los posts se cambiarán automáticamente. Si lo hacemos de la primera manera, nos tendremos que acordar en el caso mencionado de cambiar también aquí, Nombre_blog por el nuevo nombre.

Evidentemente, podríamos usar sólo blog.pageName y olvidarnos del nombre del blog, pero como he comentado, parece que a efectos de posicionamiento y esas cosas, ambos datos son importantes.

Todavía nos queda un problema por solucionar y es que con este simple código, el título de la página de inicio y las páginas de navegación, nos aparecerían de manera un poco extraña con la URL. Para solucionar eso el código final debería contener una condición para diferenciar un caso u otro. Y este no es ni más ni menos que...

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/>: <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>


Ahora, cuando se trate de una página individual de una entrada (item) se verá...
Cambiar titulos de paginas: Oloblogger
...y cuando no sea una página de este tipo (los otros casos antes comentados), sólo aparecerá
Oloblogger

Una vez queda claro que podemos construir el título de nuestras páginas con los elementos que queramos y en el orden que queramos, el último apunte que se me ocurre, es que se puede modificar también sin problemas el signo de puntuación (:) que separa las dos variables:

| \ ~ » ¦ ® >


Tras incorporar Blogger las páginas estáticas a su plataforma (2010), el código anterior se quedó un poco cojo, así que habrá que añadir una condición más para recoger la casuística. Este sería el código final:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/>: <data:blog.title/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<title><data:blog.pageName/>: <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
</b:if>

¿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

40 comentarios :

  1. Oloman,
    No sé por qué pero en mi blog cuando haces clic en publicar un comentario no sale el formulario

    Te dejo la dirección:http://elartedelafotografiaconjavierlota.blogspot.com

    HELP

    ResponderEliminar
  2. HOLA YO SE QUE NO ES EL TEMA DE ESTE POST, PERO TE PIDO PÒR FAVOR NOS ENSEÑE A MIGRAR LOS COMNETS DE HALOSCAN A DISQUS….

    claro q en la web ahy uno pero no lo suficiente entendible (ESTA EN LENGUAJE PARA PROGRAMADORES), a que la mayoria de blogger no somos expertos en sistemas

    http://lateral.netmanagers.com.ar/tr/es/weblog/posts/BB856.html?fbc_channel=1


    gracias

    ResponderEliminar
  3. Javierlota, prueba con esta entrada y esta otra a ver si comparando con tu plantilla, encuentras lo que falta.

    Paolita, lo siento pero no te puedo ayudar porque no conozco ni Haloscan ni Disqus. He intentado entender el enlace que me has puesto, pero para mí es chino (no soy programador). El primer paso precisamente es instalar una librería... ¿dónde demonios hay que instalarla? Intentando comprender qué es lo que había que hacer, no he podido pasar de ahí. De verdad que lo siento...

    ResponderEliminar
  4. Ey Oloman en draft.blogger.com Paginas en BLogger, Haz una entrada Sobre Eso
    ......Abner

    ResponderEliminar
  5. Yo recomendaría no instalar Disqus en un blog de Blogger, porque si cae el servidor de Disqus, te quedas sin los comentarios.

    Aparte, a mi personalmente no me convencía demasiado. HAce ya un tiempo escribió mi compañera Uve sobre el tema, con su correspondiente tutorial. Por si a alguien le interesa , especialmente a Paolita, con el permiso de Olomán, por supuesto.

    A mi, entradas como estas de este tipo, de códigos de Blogger, son las que más me interesan. Es bueno saber qué es lo que estás copiando, pegando o borrando. Así puedes saber con más certeza qué es lo que puede haber fallado si ha pasado algo que no esperábamos.

    En este caso le han tocado a las variables de Blogger del título de página. Pero hay muchas más. De hecho, me topé hace un tiempo con un buen listado de todas estas variables, pero no me acuerdo donde fue ya. Tal vez esté la dirección perdida entre los marcadores.

    Un saludo, Oloman.

    ResponderEliminar
  6. Perdón, un pequeño error en el enlace que quería facilitaros en el comentario anterior. Esta es la buena.

    ResponderEliminar
  7. Anónimo, pensé hacerla, pero cuando fuí a construir una, el servicio está temporalmente fuera de servicio. Algo les habrá salido mal, por lo que prefiero esperar.

    José GDF, aquí no hay que pedir permiso para dar enlaces a sitios dónde se pueda aprender algo y menos aún para aportar ideas o códigos que puedan ser útiles a alguien.
    Por el lado de las variables DATA, tienes la lista en inglés en Blogger Help y el enlace de este mismo post, apunta a una entrada de Vagabundia con una lista muy extensa en castellano.

    ResponderEliminar
  8. Se me pasó por alto ese enlace de Vagabundia que dices... Y resulta que es ahí donde vi esa lista precisamente (¿donde si no?) Y si que la tenía en los marcadores...

    (Emoticono sonrojado aquí)....

    ResponderEliminar
  9. Es normal. Hay tanta información en cada página y en la Red en general, que es imposible que no se escapen cosas.

    ResponderEliminar
  10. hace poco que soy usuaria más asidua de Blogger, pero me resulta bueno y todo lo que sea para mejorar mi manejo se lo agradezco.

    ResponderEliminar
  11. Hola Oloman, quisiera que me digas paso a paso que tengo que hacer para que la parte del comentario se vea asi como la tuya! O sea un rectangulo blanco. No me gusta como lo tengo yo! esto creo que ya lo explicaste pero no entendi!
    tengo un blogger.

    ResponderEliminar
  12. No es muy largo de explicar, pero necesito reproducir el código y ver un poco las distintas posibilidades, así que dame un tiempo y publico algo.

    ResponderEliminar
  13. ok, desde ya muchas gracias.
    hasta mientras te pido otra ayuda... quiero poner unos mapas en mi blogger, son como 9 aproximadamente, pero no quiero llenar la pagina de tanta cosas. Quiero crear un link que diga "mapas" y entrar a otra parte donde estén unicamente los mapas, pero nose como hacer, nose si me explico.
    todo lo que voy agregando se va agregando en una sola pagina que es la principal, y no quiero cargar tanto la pagina principal, pero nose como hacer para sacar otra pagina secundaria para agregar los mapas.

    ResponderEliminar
  14. Administrador, puedes colocarlos en una entrada y a esa entrada quitarle los comentarios y/o el footer...o lo que quieras. La fecha tendría que ser una ya pasada para que no te aparezca como primer post. Quizás lo mejor es que sea anterior al más antiguo de tus posts. Luego copias la dirección de esa entrada y esa es la que te servirá para el enlace.

    Para poner los mapas en un lugar distinto a las entradas: Mostrar o esconder artilugios en páginas secundarias.

    ResponderEliminar
  15. Hola, mil gracias por todas las ayudas!! llevo tiempo intentando poner unas "pestañas" en el blog y no se como hacerlo por mas que lo intento. Quiero que cada "pestaña" al pinchar abra diferentes temas (mujer, embarazo, salud, etc). Me podrias ayudar como hacerlo? estoy bastante perdida. Gracias.
    Aqui me podras encontrar: www.onlyforbabies.blogspot.com
    Gracias!

    ResponderEliminar
  16. Algunas opciones explicadas en este blog, aunque hay muuuuchas más:

    http://oloblogger.blogspot.com/2009/11/menu-de-pestanas.html

    http://oloblogger.blogspot.com/2008/05/menu-vertical-desplegable.html

    http://oloblogger.blogspot.com/2008/05/mens-crea-tu-propio-estilo.html

    Sólo tienes que seguir las instrucciones que se dan.

    PD: Simpática cabecera la de tu blog :D

    ResponderEliminar
  17. Anónimo28/2/10 5:22

    Sabes que te falta? La descripcion que va justo debajo del titulo en los resutados de google. Tu le tienes algo asi como : blog para topes y para no tanto, en todo caso, seria bueno que explicaras donde editarla.

    ResponderEliminar
  18. Ok. En cuanto tenga un rato lo redacto, porque es muy fácil hacerlo.

    ResponderEliminar
  19. Anónimo2/3/10 0:38

    no se te olvide

    ResponderEliminar
  20. Anónimo4/3/10 22:43

    Oloman no quiero ser intensa pero me gustaria que explicases como editar la descripcion del blog. Te lo agradezco

    ResponderEliminar
  21. Lo que tengo anotado no se me olvida y esto lo está... pero sigo un orden.

    ResponderEliminar
  22. Buenos dias

    Quisiera saber si alguien me podia ayudar a despejar la siguiente duda que tengo, no tengo mucha experiencia en esto de los blogger, llevo aproximandamente una semana en tratar de enterder como se configura un blogger a mi gusto, lo que necesito es hacer lo siguiente la direccion de blogger es la siguiente http://suscripcionderevistasgratis.blogspot.com/, pero al crear una nueva entrada la direccion que daria haci http://suscripcionderevistasgratis.blogspot.com/2010/04/suscribehoymismo.html y lo que quiero hacer es lo siguiente cambiar esta url es decir este ultimo por ejemplo por http://suscripcionderevistasgratis.blogspot.com/2010/04/revistainformatica.html, me puede dar cuenta que esta url aparece automaticamente, si alguien me puede indicar si puedo hacer esto.

    ResponderEliminar
  23. Las URL se asignan en Blogger según el título del post PUBLICADO. Y aquí está el problema y el truco.

    Publicas el post con el título "Revista informática". Se le asignará la dirección http://suscripcionderevistasgratis.blogspot.com/2010/04/revistainformatica.html

    Si quieres que el título sea otro, acto seguido, editas el post y le pones el que quieras. ;)

    ResponderEliminar
  24. Hola
    Si alguien por favor me puede ayudar a diseñar un blog similar a este, me refiero al diseño, que porfavor me indique que programa necesito para crear una plantilla similar a este o como lo hago.
    Y para el administrador de este blog si me pudiera indicar si este diseño de plantilla lo diseño o lo descargo de alguna pagina de internet.

    ResponderEliminar
  25. Parte y parte Roberto. Es una plantilla pre-existente, pero modificada después. Busca en Google "notepad chaos blogger".

    ResponderEliminar
  26. probe en mi blog aun veo un error me puedes ayudar
    http://sharpiton.blogspot.com/

    ResponderEliminar
  27. Guauuu! Sin duda me ayudaste, desde hace tiempo buscaba algo así. Yo usé el código final que señalaste y me funcionó de maravilla. PERO sucede que en los títulos de mis posts yo usaba códigos, y ahora aparecen así: < b>Título de mi post< /b>: Título de mi blog. Eso no pasaba antes. ¿Cómo hago para solucionarlo?, ¿tendré que borrar esos códigos de los títulos de mis posts? o ¿puede arreglarse desde el hmtl?.

    Saludos y felicitaciones por tu blog, además de que parece una página y no un blog (común y corriente como el nuestro), el contenido es buenísimo y muy claro.
    Gracias!

    ResponderEliminar
  28. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  29. Oh, este, jeje, ya estuve moviéndole al html según tu otra entrada "Cambiar el formato del título del post". No lo logré del todo porque al modificar algo se cambiaba otra cosa, me desesperé y ya lo dejé más o menos como quería.

    ResponderEliminar
  30. Supongo que esto quiere decir que ya lo dejas tal cual...

    ¡Ah! Y sobre la imagen, sin problemas. ;)

    ResponderEliminar
  31. Hola Buenas.
    He añadido el código "adicional" y me da error. Lo he dejado así y en principio no veo nada raro. Me cambia el orden del Title tal y como quería, primero el titulo de la entrada y luego el titulo del blog

    ResponderEliminar
    Respuestas
    1. Hola. Si el código al que te refieres como "adicional" es el último trozo, decirte que no es complementario de los otros. Es el que sustituye a los otros, el que realmente deberías usar si quieres aplicar esto.

      Eliminar
  32. Buenas.
    Muchas gracias por la aclaración, He añadido este código y he comprobado que en Google si que sale primero el nombre de la entrada y después el nombre del blog, sin embargo en Yahoo y en Bing sólo sale el título del blog. ¿Podría ser que tardan varios días en actualizarlo? Saludos.

    ResponderEliminar
    Respuestas
    1. Podría ser, porque lo que manda tu página ahora es lo que pusiste.

      Eliminar
  33. Hola Oloman. Seguro que es una pregunta tonta, pero bueno:
    En relación al título del blog, me gustaría saber como desplazar las letras del título hacia la derecha sin desplazar también la imagen de la cabezera que tengo detrás del título y la descripción. Pensé en aplicar delante del nombre del blog algunos espacios tipo:   pero seguro que es una tontería capaz de afectar negativamente el seo. ¿Como muevo sólo las letras del título?

    ResponderEliminar
    Respuestas
    1. Iván, es sólo cuestión de encontrar el selector adecuado. En tu caso es #header h1 y para lo que quieres has de añadir en el estilo un padding-left: 30px;

      Eliminar
    2. Funcionó, muchas gracias. Como tengo alguna que otra dudilla más compleja, creo que próximamente requeriré los servicios de oloblogger low cost ;)
      Un saludo, Oloman.

      Eliminar
  34. Hola Oloman!!
    Justo ahora estoy cambiando un poco el aspecto de mi blog y me ha venido de perlas el tuyo!! Muchas gracias!!
    Tengo una duda respecto a los títulos. Usando el último código que dejas, el cambio de orden sólo funciona para los post del blog, pero no para las páginas!! Sabes cómo podría ajustar el código para que funcione bien en todos los casos??
    Gracias!!

    ResponderEliminar
    Respuestas
    1. Hola. Cuando hice este post no existían las páginas estáticas. Ahora mismo el código completo sería este:
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <title><data:blog.pageName/>: <data:blog.title/></title>
      <b:else/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <title><data:blog.pageName/>: <data:blog.title/></title>
      <b:else/>
      <title><data:blog.pageTitle/></title>
      </b:if>
      </b:if>

      Eliminar
    2. Guay!! Muchas gracias Oloman!! :)

      Eliminar