Pubblicato il 17/08/14e aggiornato il

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.

creare-nuova-etichetta-blogger

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


etichetta-evidenza-blogger

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:
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.

gadget-post-evidenza-blogger

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 = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/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.

demo-widget

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.




4 commenti :

  1. Salve Ernesto complimenti per le tue dritte e per il tuo ottimo blog. Una domanda: come faccio a mettere in "bold" la data dopo che ho impostato l'opzione "true" in questi codice per evidenza post? E come posso fare per aumentare la grandezza delle miniature? Mi potresti almeno spiegare le immagini perché non sono riuscito ad ingrandirle. ciao.

    RispondiElimina
    Risposte
    1. Per le miniature prova a aggiungere una riga tipo
      width:50px;
      dopo
      .post-evidenza img {
      float: left;
      Per il grassetto è più complicato ...
      @#

      Elimina
  2. lo script così com'è non funziona. Posso utilizzarlo mettendo il nome di qualsiasi etichetta al posto di "evidenza", nello script? o devo creare appositamente una etichetta "evidenza"?

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.