Pubblicato il 05/06/13 - aggiornato il  | 7 commenti :

Come mostrare il ribbon New nell'ultimo post di Blogger.

Come visualizzare un nastro nell'ultimo articolo in un blog su Blogger solo in homepage, nelle pagine di archivio e in quelle delle etichette.
Abbiamo già visto come mettere in evidenza l'ultimo articolo del nostro blog su Blogger modificandone il colore di sfondo e lo stile. Ci si può anche accontentare di una modifica più minimalista scegliendo di visualizzare nell'ultimo articolo un nastro che indichi ai visitatori che si tratta dell'ultimo post pubblicato. Tale ribbon sarà mostrato nei primi articoli della Homepage, delle pagine delle etichette e in quelle di archivio. Può essere un sistema per invogliare i visitatori a leggere la nostra ultima pubblicazione.

Per l'installazione della personalizzazione bisogna salvare il template quindi andare su Modello > Modifica HTML e cercare la riga di codice </head>. Subito sopra va incollato questo nuovo codice

<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>
       $(document).ready(function() {
           $(&quot;.dropdown img.flag&quot;).addClass(&quot;flagvisibility&quot;);
           $(&quot;.dropdown dt a&quot;).click(function() {
               $(&quot;.dropdown dd ul&quot;).toggle();
           });                      
           $(&quot;.dropdown dd ul li a&quot;).click(function() {
               var text = $(this).html();
               $(&quot;.dropdown dt a span&quot;).html(text);
               $(&quot;.dropdown dd ul&quot;).hide();
               $(&quot;#result&quot;).html(&quot;Selected value is: &quot; + getSelectedValue(&quot;sample&quot;));
           });                   
$(&#39;.blog-posts&#39;).find($(&#39;.post&#39;)).first().prepend(&quot;<span class='nuovo'/>&quot;)
           $(&quot;#flagSwitcher&quot;).click(function() {
               $(&quot;.dropdown img.flag&quot;).toggleClass(&quot;flagvisibility&quot;);
           });
       });
   </script>
</b:if>
quindi si cerca la riga ]]></b:skin> e subito sopra si incolla questo CSS
.nuovo {
width: 114px;
height: 114px;
position: relative;
left: 20px;
top: -5px;
float: right;
background: url(https://lh4.googleusercontent.com/-QAawbrv2oj0/Ua7wwehA28I/AAAAAAAAh_Q/ZVxBHIRjO4Q/s114/nuovo.png) no-repeat scroll 0% 0% transparent;
}

Si salva il modello e l'ultimo post sarà visualizzato in questo modo

fascetta-nuovo-post

con la fascetta sulla destra che lo indica come nuovo. Le personalizzazioni e gli accorgimenti da prendere riguardano innanzitutto JQuery. Se fosse già presente nel modello si può tralasciare la riga evidenziata di giallo. Al posto della fascetta proposta se ne può mettere un'altra sostituendola nell'URL colorato di rosso, ricordandoci delle dimensioni che possono anche essere modificate. Il corretto posizionamento del ribbon si effettua mediante la modifica dei valori di left e top nel secondo codice.


7 commenti :

  1. Bella personalizzazione. L'ho inserita nel mio blog, grazie. :)

    RispondiElimina
  2. Mi sono appena accorta che il ribbon compare anche nelle pagine statiche.

    RispondiElimina
    Risposte
    1. @# Non è un problema. Ci aggiungi altri due tag condizionali uno all'inizio
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      e questo alla fine
      </b:if>

      Elimina
  3. Ciao! Io, seguendo passo a passo le istruzioni, non sono riuscita ad inserirlo...

    RispondiElimina
    Risposte
    1. Prova a modificare la posizione cambiando questi parametri
      left: 20px;
      top: -5px;
      anche di parecchio. Per esempio
      left: -20px;
      top: 15px;
      oppure
      left: 40px;
      top: 25px;
      Poi se riesci a vederlo calibri meglio le distanze. È una cosa che dipende ovviamente dal modello utilizzato
      @#

      Elimina
    2. Ok, grazie mille! Provo subito e se funziona ti faccio sapere.

      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