Come mostrare il ribbon New negli ultimi post e quello Old nei vecchi articoli in Blogger.

Come mostrare i ribbon o nastri New o Nuovo e Old o Vecchio rispettivamente negli Ultimi post e eni post meno recenti di Blogger.

Mi sono già occupato di come inserire il ribbon o nastro New nell'ultimo post che è stato pubblicato. Tale personalizzazione utilizzava la libreria JQuery e un ribbon modificabile a piacere da visualizzare solo nel post più recente delle pagine multiple come potrebbero essere la homepage o la pagina delle etichette.

Vediamo come sia possibile fare una cosa analoga senza javascript ma solo utilizzando i tag condizionali. Con il codice che andrò a presentare tutti gli articoli della Homepage, delle varie Etichette e delle Pagine di archivio avranno il proprio Ribbon. L'ultimo post mostrerà il nastro New o Nuovo mentre accanto agli articoli meno recenti si visualizzerà il nastro Old. Non propongo la dicitura Vecchio perché il testo risulterebbe graficamente troppo lungo.

Dopo aver salvato il template si va su Modello > Modifica HTML > Vai al widget > Blog1 e si cerca la sezione del codice <b:includable id='post' var='post'>.

Si clicca sulla freccetta nera per visualizzare il codice della sezione e si cerca la riga <div class='post hentry'> che nei modelli più recenti può essere diventata anche così

<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

In ogni caso basta cercare la prima parte del codice evidenziata di giallo. Quando si è individuata, subito sotto a questa si incolla il seguente codice

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.isFirstPost'>
<span style='display:block;position: absolute;top: -4px;right: -4px;margin: 0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAMBoUEpHFUZptkWe6IIatA5wfS3BFTfWPatE2kYfzx2VMu3UyumXIg314Vv2wXiPJgPsUhL4YzzG7_wbCkc6zMUaea6V1MGujFGHcb1a3-EDZ4w4b-w7BqEqqmBnssHma9kOSyQPazgqX/s56/new.png);width: 56px;height: 56px;'/>
<b:else/>
<span style='display:block;position: absolute;top: -4px;right: -4px;margin: 0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd4f3c1FtHRgteCRDSwWD6u939rmVbOAIU_h65HEhefON4TBFWAz6FBf1Q1fmJt8tXeUEs5hVNk0WcrsY4ffOeUijwbYf5PWzYdAVu7uSh3OeOJBahngqhQAu0uODbVXJwE4IBdQRLZrRK/s56/old.png);width: 56px;height: 56px;'/>
</b:if></b:if></b:if>

I tag condizionali presenti sono quelli che determinano che l'immagine di background inserita non venga visualizzata nei post (1) e nelle pagine statiche (2) ma se l'articolo è il primo (FirstPost) allora viene mostrato il ribbon New, se non fosse così (b:else) allora il ribbon visualizzato sarà quello Old. Si salva il modello. Le immagini proposte sono caricate su Picasa e i relativi URL sono colorati di rosso. Si possono usare anche altre immagini di sfondo come per esempio queste

È sufficiente cliccarci sopra con il destro del cursore e selezionare Copia URL Immagine. Concludo ricordando che il ribbon può essere posizionato al meglio modificando i parametri di colore blu. Se non si riuscisse a vedere i ribbon si può provare a incollare subito sopra alla riga </head> questo codice
<style>.post{position:relative;} .post-body {position:relative;} </style>