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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtVKZBFMY4-SeX-ZPaVnPgO1QyzoN9fANUY6M6cVev2HAr6HgetN8naxSjUbkWl110AYdLeVKtXb1CMgN1LC8Z1_bbetq72FTZHfKuwTiAl3WDjrExHIrIWJarcMrS05lU7G-fTcFpTiY/s114/nuovo.png) no-repeat scroll 0% 0% transparent;
}

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

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.