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.
![ribbon-new-old ribbon-new-old](http://lh4.ggpht.com/-r8x8G9VAqoM/UjcWnlaOf4I/AAAAAAAAjfQ/C2dx7e5XLJI/ribbon-new-old%25255B4%25255D.jpg?imgmax=800)
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'>.
![cercare-codice-blog cercare-codice-blog](http://lh5.ggpht.com/-cCnU4q78mvo/UjcWqsrDacI/AAAAAAAAjfY/SyKDtetpFP0/cercare-codice-blog%25255B4%25255D.jpg?imgmax=800)
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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
![](https://lh4.googleusercontent.com/-OhXMb54XR2w/T4vFJTqnXlI/AAAAAAAAXlc/gVAp-Vfxwi4/s64/demo.jpg)
Ciao, ho seguito attentamente il tutorial ma nulla, non si vedono i ribbon.
RispondiEliminaNel mio test funzionano. Forse vanno fuori campo. Prova a mettere dei valori piuttosto diversi al posto di -4px. Prova con molto più grandi tipo -50px e poi con valori positivi tipo 10px per vedere se è quello
Elimina@#
Dopo molti tentativi, la posizione è sistemata, ma la targhetta old si vede solo nel secondo post (Penultimo).
EliminaProva a rimettere i parametri iniziali e a aggiungere sopra a </head> questo codice
Elimina<style>.post{position:relative;} .post-body {position:relative;} </style>
@#
Funziona, grazie per l'aiuto!
Elimina