Widget ultimi post per etichetta con miniature Blogger


Probabilmente avete già visto dei blog che mettono in risalto dei determinati post che hanno in comune la stessa tematica, questo è possibile aggiungendo la stessa etichetta in ciascun post ed utilizzando il widget degli ultimi post per etichetta con miniature per Blogger come spiegato in questo articolo.

Gli ultimi post per etichetta o post in vetrina o contenuti in primo piano possono essere utili per mostrare l'offerta più conveniente, per mettere in rilanciare i nuovi prodotti o gli ultimi aggiornamenti del blog. Tanto per cambiare su Blogger non è presente un widget di questo tipo, per esempio gli ultimi post di tutte le etichette, che è un altro widget per Blogger, è stato possibile implementarlo tramite l'aggiunta di un semplice codice nel modello.

Per installare il widget degli ultimi post per etichetta i codici da aggiungere sono molti di più, però potrebbe diventare un punto di forza se utilizzato al meglio, anche per incrementare le visualizzazioni di pagina, è così utile che spesso lo si può trovare in parecchi template premium per Blogger.

Andate su Modello > Modifica HTML e poi prima del tag ]]></b:skin> dovete inserire questo codice:
.label_with_thumbs {
float: left;
padding: 0px;
}
.label_with_thumbs li {
float: left;
margin-bottom: 20px;
border-bottom: 1px solid #d2d2d2;
padding-bottom: 20px;
}
.label_with_thumbs img {
float: left;
margin-right: 10px;
border: 1px solid #ddd;
}
.label_with_thumbs h2 {
font-size: 16px;
margin: 0px;
font-weight: bold;
}
.label_with_thumbs br {
margin: 0px;
padding: 0px;
}

Adesso cercate il tag </head> ed aggiungete quest'altro codice:
<script>
//<![CDATA[
function labelthumbs(w) {
    document.write('<ul class="label_with_thumbs">');
    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://3.bp.blogspot.com/-DiSuxig0X9k/TZYzqpks56I/AAAAAAAAAWM/sN1GbkQvDUI/s1600/no_image.jpg"
            }
        }
        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] = "Jan";
        h[2] = "Feb";
        h[3] = "Mar";
        h[4] = "Apr";
        h[5] = "May";
        h[6] = "Jun";
        h[7] = "Jul";
        h[8] = "Aug";
        h[9] = "Sep";
        h[10] = "Oct";
        h[11] = "Nov";
        h[12] = "Dec";
        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">More »</a>';
            u = 1
        }
        document.write(A);
        document.write("</li>");
        if (displayseparator == true) {
            if (v != (numposts - 1)) {
                document.write("")
            }
        }
    }
    document.write("</ul>")
};
//]]>
</script>

A questo punto, si è tecnicamente installato tutto e l'unica cosa rimasta è aggiungere il codice per visualizzare il widget. Tutto quello che dovete fare è incollare questo codice dentro un widget laterale o all'interno di un post.

<div class="Scuolissima-Featureposts">
<script type='text/javascript'>
var numposts = 4;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
</div>

In questo codice dovete sostituire il termine "LABEL" con il nome della vostra etichetta. L'ortografia deve essere corretta e dovete rispettare l'uso delle maiuscole (se presenti nella vostra etichetta).

Per esempio, questo è l'url dell'etichetta Facebook:
- http://www.scuolissima.com/search/label/Facebook

In questo caso al posto di "LABEL" vado ad aggiungere Facebook.

Per quando riguarda le personalizzazioni vi basta agire solamente nell'ultimo codice.
var numposts = 4; --> si riferisce al numero di post da mostrare.
var showpostthumbnails = true; --> per mostrare/nascondere le miniature.
var displaymore = false; --> per mostrare/nascondere il link Read More.
var displayseparator = false; --> per mostrare/nascondere il separatore.
var showcommentnum = false; --> per mostrare/nascondere il numero di commenti.
var showpostdate = false; --> per mostrare/nascondere la data.
var showpostsummary = true; --> per mostrare/nascondere la descrizione.
var numchars = 100 --> per mostrare una descrizione lunga al massimo di 100 caratteri,

Dal momento che funziona con jQuery dovete tenere a mente che sarà visibile solo se è abilitato JavaScript. Inoltre se la vostra etichetta è formata da due parole, per esempio "Primi Piatti", va scritta nel seguente modo "Primi%20Piatti".



Nessun commento :

Scrivi un commento

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".