Widget dei Post in Evidenza con Miniature per Blogger.

Come realizzare e come automatizzare il widget degli Articoli in Evidenza con Miniature per Blogger.

In alcuni Temi e Modelli soprattutto di Wordpress ma anche di Blogger i designer spesso inseriscono di default un widget degli articoli che il web master ritiene utile mostrare a tutti i lettori. Si tratta in sostanza di una vetrina dei contenuti pubblicati che ritengono più interessanti. Questo presuppone una operazione manuale per scegliere questi post ma vediamo come in Blogger possa essere parzialmente automatizzata e come si possa realizzare un widget che mostri appunto i Post in Evidenza. 

Si può infatti sfruttare la funzionalità delle etichette per crearne una nuova da utilizzare come filtro. Si va quindi su Bacheca > Post e si mette la spunta agli articoli che vogliamo mostrare nel widget. Successivamente si clicca sulla freccia verticale del menù accanto alla icona delle etichette e si sceglie Nuova Etichetta.

Come nuova etichetta possiamo metterne una che andrà ad aggiungersi a quelle già esistenti

In questo modo come ho già illustrato nel post su come gestire le etichette di Blogger l'etichetta evidenza sarà aggiunta a tutti i post selezionati. Questa aggiunta non sarà definitiva ma di volta in volta potremo toglierla dai post che ormai consideriamo obsoleti e invece aggiungerla ai contenuti più recenti che intendiamo mettere in vetrina. Aggiungendo o togliendo delle etichette a Blogger in realtà si creano o si eliminano delle pagine web ma questo non avrà effetti sul ranking del nostro sito perché come è noto Google non indicizza le etichette di Blogger (con qualche eccezione).

Dopo aver selezionato gli articoli non ci resta che installare un widget che mostri i post con l'etichetta "evidenza" o quella che abbiamo scelto per questa operazione. Si può scegliere un qualsiasi gadget che mostri gli ultimi post relativi a una etichetta tra i molti che ho presentato:

1. Widget per etichetta per Blogger (Opzione 1) -
2. Widget per etichetta per Blogger (Opzione 2) -
3. Widget per etichetta per Blogger (Opzione 3) -
4. Widget per etichetta per Blogger (Opzione 4) -

Alternativamente si può usare il widget che vado a illustrare e che non ha neppure bisogno di essere adattato alle dimensioni della sidebar e per la cui installazione non occorre modificare il template.

Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e in Sezioni del sito si incolla

<style>
.post-evidenza {
    float: left;
    padding: 0px;
}
.post-evidenza li {
    list-style:none;
    float: left;
    text-align:justify;
    margin-bottom: 20px;
    border-bottom: 1px solid #c1c1c1;
    padding-bottom: 20px;
}
.post-evidenza img {
    float: left;
    margin-right: 10px;
    border: 1px solid #ddd;}
.post-evidenza h2 {
    font-size: 14px;
    margin: 0px;
    font-weight: bold;
}
.post-evidenza br {
    margin: 0px;
    padding: 0px;
}
</style>
<script>
//<![CDATA[
function etichetta_thumbnail(w) {
    document.write('<ul class="post-evidenza">');
    for (var v = 0; v < numposts; v++) {
        var f = w.feed.entry[v];
        var g = f.title.$t;
        var z;
        if (v == w.feed.entry.length) {
            break
        }
        for (var r = 0; r < f.link.length; r++) {
            if (f.link[r].rel == "replies" && f.link[r].type == "text/html") {
                var n = f.link[r].title;
                var o = f.link[r].href
            }
            if (f.link[r].rel == "alternate") {
                z = f.link[r].href;
                break
            }
        }
        var j;
        try {
            j = f.media$thumbnail.url
        } catch (q) {
            s = f.content.$t;
            a = s.indexOf("<img");
            b = s.indexOf('src="', a);
            c = s.indexOf('"', b + 5);
            d = s.substr(b + 5, c - b - 5);
            if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
                j = d
            } else {
                j = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuWeZr2VpK6E1xMZB6KUNXRYRdYjLXKkdb-piQ-IjETiKSOsVYy7qQ2FXU_r24CnsRTBe8Dtndby-UsKZaTDbT3xKis29A1gdqKuXENvRgU5lz1Z5X-omahYZKuvIjFmEWRtz4gJO0u64/s400/noimage.png"
            }
        }
        var x = f.published.$t;
        var m = x.substring(0, 4);
        var l = x.substring(5, 7);
        var t = x.substring(8, 10);
        var h = new Array();
        h[1] = "Ge";
        h[2] = "Feb";
        h[3] = "Mar";
        h[4] = "Apr";
        h[5] = "Mag";
        h[6] = "Giu";
        h[7] = "Lug";
        h[8] = "Ago";
        h[9] = "Set";
        h[10] = "Ott";
        h[11] = "Nov";
        h[12] = "Dic";
        document.write('<li class="clearfix">');
        if (showpostthumbnails == true) {
            document.write('<a class="picturelabela" href="' + z + '" target ="_top"><img class="label_thumb" src="' + j + '"/></a>')
        }
      document.write('<strong><h2><a class="titlelabel" href="' + z + '" target ="_top">' + g + "</a></h2></strong><br>");
        if ("content" in f) {
            var y = f.content.$t
        } else {
            if ("summary" in f) {
                var y = f.summary.$t
            } else {
                var y = ""
            }
        }
        var p = /<\S[^>]*>/g;
        y = y.replace(p, "");
        if (showpostsummary == true) {
            if (y.length < numchars) {
                document.write("");
                document.write(y);
                document.write("")
            } else {
                document.write("");
                y = y.substring(0, numchars);
                var e = y.lastIndexOf(" ");
                y = y.substring(0, e);
                document.write(y + "...");
                document.write("")
            }
        }
        var A = "";
        var u = 0;
        document.write("<br>");
        if (showpostdate == true) {
            A = A + h[parseInt(l, 10)] + "-" + t + " - " + m;
            u = 1
        }
        if (showcommentnum == true) {
            if (u == 1) {
                A = A + " | "
            }
            if (n == "1 Comments") {
                n = "1 Comment"
            }
            if (n == "0 Comments") {
                n = "No Comments"
            }
            n = '<a href="' + o + '" target ="_top">' + n + "</a>";
            A = A + n;
            u = 1
        }
        if (displaymore == true) {
            if (u == 1) {
                A = A + " | "
            }
            A = A + '<a href="' + z + '" class="url" target ="_top">Leggi tutto...»</a>';
            u = 1
        }
        document.write(A);
        document.write("</li>");
        if (displayseparator == true) {
            if (v != (numposts - 1)) {
                document.write("")
            }
        }
    }
    document.write("</ul>")
};
//]]>
</script>    
    <script type='text/javascript'>
    var numposts = 5;
    var showpostthumbnails = true;
    var displaymore = false;
    var displayseparator = false;
    var showcommentnum = false;
    var showpostdate = false;
    var showpostsummary = true;
    var numchars = 160;
    </script>
    <script type="text/javascript" src="/feeds/posts/default/-/evidenza?orderby=updated&alt=json-in-script&callback=etichetta_thumbnail">
    </script>

Si salva l'elemento pagina e si posiziona con il mouse quindi si salva la disposizione. Si possono operare diverse personalizzazioni a partire dal nome dell'etichetta evidenza. Si possono settare il numero di post da visualizzare (5 quelli proposti) e il numero dei caratteri dell'incipit dell'articolo (160). È anche possibile cambiare l'immagine di default che viene mostrata come miniatura qualora non ce ne siano nel post. Opzionalmente si può anche mostrare la data, il Read More e il numero dei commenti. Per attivare queste funzionalità basterà sostituire false con true nel codice.

Mostrare ai lettori il meglio della nostra produzione è necessario per farli rimanere più a lungo nel nostro sito, per farli aprire più pagine e per diminuire la frequenza di rimbalzo. In una parola è importante per migliorare parecchi fattori di ranking dei più di 200 usati da Google per il posizionamento nei risultati di ricerca.