Pubblicato il 16/09/13 - aggiornato il  | 5 commenti :

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.

ribbon-new-old

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

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

ribbon-nuovo

È 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>



5 commenti :

  1. Ciao, ho seguito attentamente il tutorial ma nulla, non si vedono i ribbon.

    RispondiElimina
    Risposte
    1. Nel 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
    2. Dopo molti tentativi, la posizione è sistemata, ma la targhetta old si vede solo nel secondo post (Penultimo).

      Elimina
    3. Prova a rimettere i parametri iniziali e a aggiungere sopra a </head> questo codice
      <style>.post{position:relative;} .post-body {position:relative;} </style>
      @#

      Elimina
    4. Funziona, grazie per l'aiuto!

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy