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