Pubblicato il 17/08/14 - aggiornato il  | 13 commenti :

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.


13 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
  3. Invece di mettere un solo widget con i post in evidenza è possibile utilizzare il widget dei post in evidenza già pronto dal layout?
    Ad esempio se creo sezioni multiple sopra e sotto lo header posso inserire in ciascuna un post in evidenza diverso invece di usare un solo widget che me li mette tutti in fila?

    RispondiElimina
    Risposte
    1. Oltre al widget illustrato in questo post ci sono altre quattro opzioni linkate. Poi puoi procedere a eventuali personalizzazioni. Però da un paio di anni anche Blogger ha introdotto un widget che si chiama proprio Post in Evidenza
      http://www.ideepercomputeredinternet.com/2015/12/post-in-evidenza-blogger-widget.html
      che è singolo e che che mi pare è quello che ti piacerebbe avere
      @#

      Elimina
  4. Ciao e grazie per il codice, tutto ok ma se voglio aumentare le dimensioni della miniatura non basta aggiungere, ad es., width:300px perché l'immagine sgrana... qualche suggerimento?

    RispondiElimina
    Risposte
    1. Aggiungi
      width:100px;
      subito sotto a
      .post-evidenza img {
      Devi considerare che la dimensione delle miniature di Bloggerr è di 72 pixel quindi se si mette una dimensione molto superiore a 72 la miniatura perde di risoluzione. Viene rilevata con il tag media$thumbnail.url presente nel codice e non c'è modo ch'io sdappia di avere una miniatura di dimensioni maggiori
      @#

      Elimina
  5. Ciao, scusami ma ho provato a inserire un gadget html col codice che hai fornito, ma dopo aver salvato non compare nulla... Come mai?

    RispondiElimina
    Risposte
    1. Hai messo nel codice il nome della etichetta al posto di evidenza nella penultima riga? La demo funziona. Altra possibilità è che tu stia usando un blog di prova con un numero di post inferiore a 5 per quella data etichetta infine che tu abbia scritto l'etichetta non correttamente. P.e. l'etichetta blogger è diversa da Blogger e diversa da BLOGGER
      @#

      Elimina
    2. E' vero, non avevo messo la maiuscola all'etichetta! :) ora però avrei un altro problema: vorrei che il widget mettesse i post in ordine di data e invece li mette in ordine casuale, saltandone alcuni...

      Elimina
    3. Risolto :) un'altra domanda: è possibile ingrandire le miniature?

      Elimina
  6. Sotto alla riga
    .post-evidenza img {
    incolla la riga
    width:100px;

    P.S. Non ho testato ma dovrebbe funzionare
    @#

    RispondiElimina

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