JMiur [E]

Hace unos días, en uno de los artículo sobre Posts Relacionados, hubo dos comentarios que proponían algo interesantes:

Joseph preguntaba:
¿Conoces alguna forma de poner algo similar a los links de "Anterior y Siguiente" que tiene Blogger, pero en lugar de eso que muestre los titulos de las entradas... así como:
Siguiente: "Blogger: Posts relacionados (1)"
Anterior: "Blogger: Posts relacionados"?

Y Kurodesu agregaba:
Yo creo que sería cuestión de por medio de Javascript dividir el link a partir de los "-" y deshacerse de lo demás.

Estuve dándole vueltas al asunto y hay una forma de hacer esto con bastante sencillez pero, el resultado no es 100% perfecto.

El problema surge porque uno de los secretos mejor guardados del universo es la forma en que Blogger guarda los títulos del post anterior y el post siguiente. Parece ser un secreto de estado, no hay ninguna referencia la tema en ninguna parte, sólo hay preguntas y la respuesta más clara al respecto fue: "no sé, habría que preguntarle a los desarrolladores de Blogger".

Por lo tanto, nos encontramos con una limitación, sólo podemos usar los datos a los que sí tenemos acceso y ese dato nos da una dirección URL de este tipo:

http://nombreBlog.blogspot.com/año/mes/tituloPost.html

Parece no haber problema pero, lo hay. Por un lado, el título del post y la dirección URL (permanent link) son cosas diferentes. Si creamos un post con un cierto título y lo publicamos, la primera vez que lo hagamos, se generará una dirección. Si posteriormente lo editamos y cambiamos el título, Blogger lo hará perfectamente pero NO cambiará la dirección URL. Esto mismo pasará si publicamos un post sin título; se generará la dirección una vez y será inmutable. Para modificarla deberemos eliminar el post y volver a publicar uno nuevo.

A esto, se le agrega el problema de los caracteres especiales. Por ejemplo, ninguna dirección URL contendrá acentos, signos de interrogación o de admiración, comas, etc.

De ¿Blogger offline? podremos leer blogger-offline
De ¿A dónde va YouTube? podremos leer dnde-va-youtube

Por último, esto sólo podrá hacerse en las páginas individuales porque cualquier otra abre una página con una lista de posts y, por lo tanto, no hay titulos.

Si pese a todas estas limitaciones queremos hacerlo, el truco es bastante sencillo, debemos "leer" dos datos que nos provee Blogger y que se encuentran en la parte de navegación de la plantilla:

<data:newerPageUrl/> es la dirección hacia adelante
<data:olderPageUrl/> es la dirección hacia atrás

Y luego "interpretarlas" y "escribirlas" en lugar de los datos por defecto:

<data:newerPageTitle/> es el texto "Entradas más recientes"
<data:olderPageTitle/> es el texto "Entradas antiguas"

Vamos por partes, primero que nada, modificaremos la plantilla, marcando la opción expandir artilugios y buscamos el bloque correspondiente. Por defecto, se verá algo así:
<b:includable id='nextprev'>

<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link'
expr:href='data:newerPageUrl'
expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>

</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link'
expr:href='data:olderPageUrl'
expr:title='data:olderPageTitle'>
<data:olderPageTitle/>
</a>

</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<data:homeMsg/>
</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<data:homeMsg/>
</a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>
Todo lo que haremos será modificar esas líneas resaltadas. La primera, contiene el enlace a las páginas siguientes:
<b:if cond='data:blog.pageType == "item"'>
<a class='blog-pager-newer-link'
expr:href='data:newerPageUrl'
expr:title='data:newerPageTitle'>
<script language='javascript'>
var navURL = &quot;<data:newerPageUrl/>&quot;;
escribirTitulo(navURL)
</script>
</a>
<b:else/>
<a class='blog-pager-newer-link'
expr:href='data:newerPageUrl'
expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>
</b:if>
La segunda contiene el enlace a las páginas anteriores:
<b:if cond='data:blog.pageType == "item"'>
<a class='blog-pager-older-link'
expr:href='data:olderPageUrl'
expr:title='data:olderPageTitle'>
<script language='javascript'>
var navURL = &quot;<data:olderPageUrl/>&quot;;
escribirTitulo(navURL)
</script>
</a>
<b:else/>
<a class='blog-pager-older-link'
expr:href='data:olderPageUrl'
expr:title='data:olderPageTitle'>
<data:olderPageTitle/>
</a>
</b:if>
En ambos casos, usamos un código condicional para que el script sólo se ejecute si estamos en una página individual; en cualquier otra, seguiremos utilizando el código por defecto.

Por último, agregaremos el script antes de </head>:
<script type='text/javascript'>
function escribirTitulo(navURL) {
// dividimos la dirección URL en trozos con la barra inclinada como separador
var partes = navURL.split(&#39;/&#39;);
// la última, será el nombre de la página (por ejemplo indice-blogger.html)
auxiliar=partes[partes.length-1]
// reemplazamos todos los guiones por espacios
auxiliar = auxiliar.replace(/-/g,&quot; &quot;);
// y eliminamos la extensión .html
nombrePagina = auxiliar.replace(&quot;.html&quot;,&quot;&quot;);

// formateamos el texto y ponemos la primera letra en mayúsculas
var primerLetra = nombrePagina.substring(0, 1).toUpperCase();
var elResto = nombrePagina.substring(1, nombrePagina.length).toLowerCase();
nombrePagina = primerLetra + elResto;

// y escribimos el texto
document.write(nombrePagina);
}
</script>
Si quisiéramos poner el texto todo en mayúsculas, deberíamos cambiar la parte del formateo del texto por esto:
nombrePagina = nombrePagina.toUpperCase()
En este momento, está aplicado en este blog, no se si lo mantendré o lo sacaré pero, por ahora puede vérselo funcionando sin mayores problemas salvo las limitaciones antes citadas.

26 comentarios:

Percy Salazar  

Entonces creo que plantear una paginación en Blogger como en Wordpress se tornaría algo complicado.

Responder
Kurodesu  

Bueno, antes que nada, un buen trabajo.

Un par de consejos para los que quieran usar este hack:

Nunca pongan acentos en los títulos, primero pongan todo sin acentos y una vez que Blogger ya tenga la dirección registrada simplemente pongan todos los acentos necesarios, esto ayuda mucho con google.

Segundo, pongan puntos suspensivos al final de los titulos ( por medio del hack ), de esta forma el usuario sabrá que el titulo no se muestra por completo, esto es debido a que google no pone URL's muy largas.

******************************

Entre otras cosas JMiur, estaba pensando en buscar una forma de hacer esta función por medio de JSON, de tal forma que se muestre el titulo completo de la entrada ( con acentos y de más ).

Ahora, cambiando de tema~ JMiur te envié un email, leelo cuando puedas.

Responder
solrac  

Estaba pendiente a ver como resultab y tiene muy buena pinta el hack JMiur.

Según iba leyendo el artículo se me ocurrió lo mismo que a Kurodesu, creo que es buena idea, aunque claro, las pocas veces que he intentado descifrar el JSON me he tenido que tomar varios litros de tila.

Responder
JMiur  

Todo lo que dicen es cierto; por el lado de los códigos de Blogger no parece haber muchas más alternativas así que deberá usarse JSON.

Como bien dice Solrac, eso requiere litros de calmantes varios :D

Responder
Kurodesu  

Pues propongo un trabajo coperativo para resolver este problema, debe debe de haber alguna forma de contactarnmos de forma rápida.

En fín, dejo mi msn, solo a los Bloggers Experimentados ( porfas ) ~ :

kuro [ @ ] exolimpo.com

Saludos

Responder
Edward Yanquen  

quisiera saber como insertar elementos en la parte entre el final de la entrada y antes de los comentarios, creo que estos dos van unidos, así que todos lo que agrego por debajo de la entrada, en páginas individuales aparece debajo de los comentarios perdiendo visibilidad.Gracias!

Responder
JMiur  

Kurodesu:
la invitación esta hecha, no conozco el tema JSON pero prometo ponerme a leer a ver si esta vez logro entender de qué se trata :)

Edward Yanquen:
Tal como dices, no se puede porque el elemento Blog es uno solo e incluye todo, comentarios incluidos.

Pero, sí puedes hacerlo desde el código HTML de la plantilla, allí hay una serie de línea en el footer de cada post:

<p class='post-footer-line post-footer-line-1'>
<p class='post-footer-line post-footer-line-2'>
<p class='post-footer-line post-footer-line-3'>

Puedes usar alguna de ellas o agregar la cantidad que quieras.

Responder
Edward Yanquen  

@jmiur: gracias, voy a intentarlo....

Responder
solrac  

Hola a tod@s,

estoy intentado entender como funciona el "GData feeds", creo que sería posible utilizarlo haciendo algún tipo de query.

Os mantendré informados.

Responder
JMiur  

Espero que tengas suerte.

Por si no lo conoces, hay un manual online de JASON (en inglés) bastante completo: AQUÍ

Responder
Sergio  

Al hilo de este artículo, quería plantear una cuestión para la que no he encontrado respuesta. Mi blog tiene, por ejemplo, 35 entradas publicadas en distintos meses. El sistema de archivos de blogger permite clasificar las entradas por fechas y, en modo jeraquizado, también muestra el título de cada entrada. ¿Cómo podría modificar el código de la página para mostrar el título de todas las entradas, sin ninguna jerarquía y, a lo sumo, ordenadas por fechas? Saludos.

Responder
JMiur  

Sergio:
No estoy seguro si eso es posible hacerlo de manera sencilla. Déjame pensarlo.

Responder
solrac  

¡¡¡ LO HE CONSEGUIDO !!!

Me ha costado entender el funcionamiento del JSON pero lo he conseguido y funciona :)

Podéis ver el resultado en mi blog http://solrackorner.blogspot.com/

Ahora solo me falta publicarlo para que todo el mundo pueda utilizarlo.

Responder
JMiur  

Estoy allí, curioseándolo :D

Parece funcionar bien, veo los títulos con acentos, imagino que se trata de ese script buscarpost pero ... no me quiero adelantar y esperaré tus explicaciones.

Felicitaciones !!!!!!!!!!!

Responder
jαvιєя_ɢ  

Gracias, no se ve dificil de implementar, sin embargo no me sirve, ya que no uso las entradas directas a cada post, sino que una división con etiquetas.

Saludos, y nuevamente gracias por la ayuda.

Responder
Adrián J. Messina  

Don J. me funciona perfectamente.
Mi idea es colocar estos links debajo del título de la entrada individual y mantener el enlace debajo del formulario de comentarios.
Ahora está funcionando en este blog de pruebas

El tema es que cuando estás en el home me muestra "entradas antiguas " y entradas recientes algo así como nulo si observamos el primer post ya que no hay entrada más reciente que ese.
¿Tiene alguna soluciòn?

Gracias, abrazo.

Responder
Adrián J. Messina  

Perdón de este blog de pruebas.

Responder
JMiur  

Correcto. Es que, tal como dice la entrada, el script debe estar condicionado para que sólo se muestre en las paginas individuales.

En el home no puede ser utilizado.

Adrián J. Messina  

Perfecto, entendido al %100. Lo condicioné para que no se muestre en el home y sí en las entradas individuales.
Estoy contento con los resultados.
¡Muchas gracias :D!

Responder
Adrián J. Messina  

J. perdón olvidé de algo.
Mira este es el resultado de lo logrado. ¿Qué te parece?

El único inconveniente es que si esta es la primera entrada en el recuadro de entrada reciente vendrìa a ser esa misma. ¿Hay alguna forma de evitar ese enlace únicamente en el primer post?

Ahora sì a descansar,

Abrazo!

JMiur  

OK. Creo que deberías agregarle una condición previa a ambos enlaces de tal modo que, si no hay una "anterior" como pasa en la primera página o no hay una "siguiente" como pasaría en la última, no se ejecute nada.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:newerPageUrl'<
... OK aca se crea el enlace y se pone el script ...
</b:if>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:olderPageUrl'<
... OK aca se crea el enlace y se pone el script ...
</b:if>
</b:if>

Adrián J. Messina  

Probado J. no funca.
Chequealo online como siempre acá.

JMiur  

No es algo que peuda verse online porque no se ve el código de Blogger.
<b:if cond='data:newerPageUrl'>
es algo que funciona perfectamente.

Un ejemplo:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:newerPageUrl'>
<script> alert("CUALQUIER PAGINA") </script>
<b:else/>
<script> alert("ESTA ES LA PRIMERA") </script>
</b:if>
</b:if>


Mostrará una ventana de alerta con el texto ESTA ES LA PRIMERA en la última entrada publicada y otro texto en cualquier ptra página.

Adrián J. Messina  

Funciona con el el alerta del script.
Pero me sigue mostrando ese cuadradito sin contenido en el caso de la primer entrada.
Por las dudas te dejo un archivo de texto donde figura lo que coloqué.

Adrián J. Messina  

Después que escribí el comentario hice una prueba más y funcionó.
Tenía que resumirlo. Quedaría así.
Te lo muestro por si las moscas J.

Un abrazo.

JMiur  

Sí. El que vae es el último; en el primer ejemplo, ese <b:else/> hace que siempre se escriba ya sea que haya o no hay a una página anterior.

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