Ayer me mandaron un correo interesante, me preguntaba cómo podía detectar el primer post publicado, pero también en la página del propio post (no nos vale un check isFirstPost).

La solución no es fácil (me llevó tiempo encontrarla), y reside en usar la variable <data:top.newerPageUrl/>. Básicamente, si es un post nuevo, no tendrá un post siguiente, así que ahí está la clave:

El código debería de ir en la plantilla (edición HTML y accesorios expandidos), dentro de cualquiera de estos elementos:

  • <b:includable id='post' var='post'> (cualquiera de sus ocurrencias, aunque tened en cuenta que algunas sólo se muestran en la plantilla para móbiles).
  • <b:loop values='data:post' var='post'>

Código básico

<b:if cond='data:post.isFirstPost'>
	<!-- Si es el primer post de la página -->
	<b:if cond='data:top.newerPageUrl'>
		<!-- El post tiene un post nuevo, abortar! -->
	<b:else/>
		<!-- Éste es el último post publicado -->
		Último post
	</b:if>
</b:if>

Ejemplo de uso básico: mostrar el texto “último post”

Debajo de <b:includable id='post' var='post'> (o en el sitio donde quieras que aparezca dentro de ese includable):

<b:if cond='data:post.isFirstPost'>
	<b:if cond='data:top.newerPageUrl'><b:else/>
		<p class='last-post-text'>Último post</p>
	</b:if>
</b:if>

Ejemplo de uso avanzado: añadir una clase con CSS al post-outer

El método de uso será similar al utilizado para personalizar las entradas según sus etiquetas. Simplemente sería cambiar:

<div class='post hentry' ...>

Por:

&lt;div class='post hentry<b:if cond='data:post.isFirstPost'><b:if cond='data:top.newerPageUrl'><b:else/> last-post <b:if cond='data:post.pageType == "item"'> last-post-item<b:else/>last-post-homepage</b:if></b:if>
</b:if>'&gt;

Y su correspondiente </div> (encima de el </b:includable>) por &gt;/div&lt;

Conseguido! Ahora puedes hacer con tu CSS:

.last-post {
	/*Estilos comunes para el primer post aquí*/
}
.last-post-item {
	/*Estilos para el último post en su página*/
}
.last-post-homepage {
	/*Estilos para el último post en la página principal*/
}

13 pensamientos en “Detectar el último post publicado en blogger

  1. Bitacoras.com
  2. Imagen de JerryJerry el dijo:

    Hola emilio estado buscando algo para blogger es un efecto que cuado pasas el maus sobre un enlace que se desvanesca lo evisto en muchas partes por ahora no lo e conseguido me podrias ayudar deAntemano saludos

    • Imagen de Emilio Cobos Álvarez el dijo:

      Eso es sólo un poquito de CSS ;)

      Sería poner esto encima de ]]></b:skin>:

      a {
      	-webkit-transition: opacity .5s ease;
      	-moz-transition: opacity .5s ease;
      	-o-transition: opacity .5s ease;
      	transition: opacity .5s ease;
      }
      
      a:hover {
      	opacity: .7;
      }

      Donde .5s es el tiempo que durará la animación, y .7 el nivel de opacidad (70%).

  3. Imagen de JerryJerry el dijo:

    Hola emilio quisiera saver y si me puedes ayudar como hacer para que el menu de mi blog por ejemplo la opcion (INICIO) quede selecionado de algun color, lo evisto que en algunas webs se podra para blogger ? gracias :)

  4. Imagen de JerryJerry el dijo:

    Hola de nuevo emilio no es un widget de las paginas estaticas, es un menu xD lo que me refiero es que por ejemplo mira esta imajen http://i47.tinypic.com/2mg2s95.png te vas adar cuenta que todo el menu esta de un solo color, pero donde dice bienvenidos a windows 8 esta como selecionado y de un color diferente se podra ahcer eso mismo en el blog ? Saludos :)

    • Imagen de Emilio Cobos Álvarez el dijo:

      Ese es el problema. Desde un menú no hay forma (al menos sin Javascript) de detectar la página actual. No es tan difícil de tornar un menú en un widget de páginas estáticas, y en ese caso blogger detecta por ti si es la página actual añadiendo la clase active.

  5. Imagen de JerryJerry el dijo:

    hola de nuevo respecto alos comentarios de arriva logre haciendolo de esta menera
    .active {background-color: #CC0000;}

    class=”active”

    si me funciono xD, te voy a molestar otraves se podra poner algun logo en algun menu por ejemplo mira esta imajen http://oi47.tinypic.com/5b1ogz.jpg veras un logo que dice raw ese lo tengo avajo del menu, pero quisiera ver si hay la posibilidad de que quedara dentro del menu como se aprecia en la imajen raw en oscuro dentro del menu mira tedejo el blog http://envivo.wwemexico.in aver si me entiendes xD ,aver que se puede hacer saludos emilio

  6. Imagen de JerryJerry el dijo:

    Hola emilio ya meda pena escrivirte xD Por que lo hago cada rato, mira sobre este tema

    a {
    -webkit-transition: opacity .5s ease;
    -moz-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease;
    }

    a:hover {
    opacity: .7;
    }

    Hay manera de ponerlo solo en algunos enlaces por que cuando lo coloco todo lo que es } a hover se desvanese por ejemplo solo ponerlo en un enlce en varias partes se podra ? ;)

Add Comment Register



Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.