Pubblicato il 24/03/14e aggiornato il

Come mostrare tutti i post di una data etichetta in un widget o in una pagina statica di Blogger.

Come mostrare tutti gli articoli che sono stati pubblicati con una data etichetta in un widget o in una pagina statica di Blogger.
Recentemente ho pubblicato due articoli su come mostrare tutti i post del blog in un widget e su come invece visualizzarli in una pagina statica. Dai commenti pare che abbiano avuto un certo successo. Alcuni lettori mi hanno chiesto di adattare i due widget per mostrare non tutti gli articoli che sono stati pubblicati ma solo quelli con una determinata etichetta.

Innanzitutto facciamo un po' di chiarezza sulle etichette e sulle pagine relative. In Blogger è possibile creare etichette di una parola, di due o più parole, con lettere minuscole, con lettere maiuscole, con accenti e perfino con apostrofi.  Si tratta di elementi case sensitive nel senso che per esempio l'etichetta Blogger sarà diversa dall'etichetta blogger la quale a sua volta lo sarà da BLOGGER.

Cliccando sul nome di una etichetta nel footer del blog o nell'apposito widget delle etichette verrà aperta una pagina con la struttura nomeblog.blogspot.com/search/label/etichetta. Quando le etichette sono formate da due parole o hanno al loro interno un apostrofo o altri caratteri speciali prima di passare alla lettura del seguito del post occorre scoprire come sia stata modificata l'etichetta. Se questa è formata da una sola parola senza caratteri speciali rimarrà invariata ma se fosse formata da due parole il suo URL sarebbe il seguente

nomeblog.blogspot.com/search/label/due%20parole

mentre se l'etichetta fosse l'articolo il suo URL sarebbe 

nomeblog.blogspot.com/search/label/l%27articolo

TUTTI I POST DI UNA ETICHETTA MOSTRATI IN UN WIDGET



Andate su Layout > Aggiungi un gadget > HTML/Javascript  e incollate questo codice

<style>
#contenitore{border:1px solid #666;width:100%;margin:0 auto}
#el_box{margin:0px}
.elementi{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.elementi img{background:#aaa;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.elementi h6,.elementi h6 a{font-size:14px!important;margin:0;color:#111}
.elementi:hover{background-color:#afe5f3;}
.elementi p{font:12px Georgia; text-align:justify;color:#555;line-height:14px;margin:5px 0}
#caricamento{color:#888;font-family:Georgia;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#262626 url(https://lh5.googleusercontent.com/-0dKuTXHaBgU/Uyn6y4kXYjI/AAAAAAAAmVU/qW-_OdYVqF0/s300-no/ajax_loader.gif) no-repeat 50% 50%;height:470px;border:1px solid #afe5f3;}
#navigazione{border:1px solid #d4d4d4;color:#bbb;font-family:Georgia;font-size:12px;text-align:center;margin:0px}
#navigazione:hover{background-color:#d4d4d4;}
#navigazione a{color:#262626!important;font-family:Georgia!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#navigazione span{padding:5px 10px}
#navigazione .next{float:right}
#navigazione .previous{float:left}
#navigazione .home{text-align:center}
#navigazione a:hover,#navigazione span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://demo-parsifal32.blogspot.com";
var characnumber = 90;
var urlprevious, urlnext;
function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function mostrapost(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://lh5.googleusercontent.com/-CQ9_FmDG2nY/UynxZ68NKBI/AAAAAAAAmVA/WF03wZqixTY/s300-no/no-immagini.jpg";
}
showblogfeed += "<div class='elementi'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,characnumber) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("el_box").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:feed_nav(-1);' class='previous'> Post precedenti</a>";
} else {
showblogfeed += "<span class='noactived previous'> Post precedenti</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:feed_nav(1);' class='next'>Post successivi </a>";
} else {
showblogfeed += "<span class='noactived next'>Post successivi </span>";
}
showblogfeed += "<a href='javascript:feed_nav(0);' class='home'>Inizio</a>";
document.getElementById("navigazione").innerHTML = showblogfeed;
}
function feed_nav(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=mostrapost";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("el_box").innerHTML = "<div id='caricamento'></div>";
document.getElementById("navigazione").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default/-/etichetta"+ parameter;
var el_box = document.createElement('script');
el_box.setAttribute('type', 'text/javascript');
el_box.setAttribute('src', archievefeed);
el_box.setAttribute('id', 'Ip_etichette');
document.getElementsByTagName('head')[0].appendChild(el_box);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("Ip_etichette");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { feed_nav(0); }
//]]>
</script>
<div id="el_box"></div>
<div id="navigazione"></div>

Salvate e posizionate il widget. Le personalizzazioni più importanti sono le seguenti:
  1. Post precedenti, Post successivi e Inizio possono essere sostituiti da altre espressioni
  2. I codici dei colori possono essere adattati al nostro layout. Ricordo che #afe5f3 è il colore di un singolo elemento quando viene puntato dal mouse
  3. La famiglia di font Georgia può essere cambiata in una o in tutte le sue occorrenze
  4. Ci sono due URL di immagini che riguardano la GIF di caricamento e l'indirizzo della immagine di default che viene mostrata quando non ve ne siano nel post.
  5. La miniatura ha dimensioni  height:70px e width:70px che possono essere cambiate
  6. var numfeed = 5; determina il numero di post da mostrare
  7. var urlblog = "http://demo-parsifal32.blogspot.com" è l'URL del blog e rappresenta il parametro più importante. Ricordarsi di usare il .com invece del localizzato .it
  8. var characnumber = 90; configura il numero dei caratteri da mostrare nello snippet.
  9. Al posto di etichetta va inserito il nome della etichetta di cui vogliamo mostrare i post. Nel caso di una etichetta di tipo particolare ricordarsi di quanto detto all'inizio dell'articolo.
 

I POST DI UNA ETICHETTA MOSTRATI IN UNA PAGINA STATICA 


L'aspetto della pagina statica sarà più o meno questo

pagina-statica-etichetta
in cui ho diviso lo screenshot in due parti per mostrarlo per intero. Nella parte finale ci sono i link per navigare tra tutti gli articoli del sito. Per l'installazione di questa Sitemap di una etichetta si clicca su Pagine > Nuova Pagina. Poi si va sulla destra e sotto Opzioni si mette la spunta a quella che impedisce i commenti (opzionale). Si va quindi sulla sinistra su HTML e si incolla questo codice

<style>
#contenitore{border:1px solid #666;width:100%;margin:0 auto}
#el_box{margin:0px}
.elementi{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.elementi img{background:#aaa;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.elementi h6,.elementi h6 a{font-size:14px!important;margin:0;color:#111}
.elementi:hover{background-color:#afe5f3;}
.elementi p{font:12px Georgia; text-align:justify;color:#555;line-height:14px;margin:5px 0}
#caricamento{color:#888;font-family:Georgia;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#262626 url(https://lh5.googleusercontent.com/-0dKuTXHaBgU/Uyn6y4kXYjI/AAAAAAAAmVU/qW-_OdYVqF0/s300-no/ajax_loader.gif) no-repeat 50% 50%;height:950px;border:1px solid #afe5f3;}
#navigazione{border:1px solid #d4d4d4;color:#bbb;font-family:Georgia;font-size:12px;text-align:center;margin:0px}
#navigazione:hover{background-color:#d4d4d4;}
#navigazione a{color:#262626!important;font-family:Georgia!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#navigazione span{padding:5px 10px}
#navigazione .next{float:right}
#navigazione .previous{float:left}
#navigazione .home{text-align:center}
#navigazione a:hover,#navigazione span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 10;
var startfeed = 0;
var urlblog = "http://nuovo-blog-di-prova.blogspot.com";
var characnumber = 200;
var urlprevious, urlnext;
function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function mostrapost(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://lh5.googleusercontent.com/-CQ9_FmDG2nY/UynxZ68NKBI/AAAAAAAAmVA/WF03wZqixTY/s300-no/no-immagini.jpg";
}
showblogfeed += "<div class='elementi'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,characnumber) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("el_box").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:feed_nav(-1);' class='previous'> Post precedenti</a>";
} else {
showblogfeed += "<span class='noactived previous'> Post precedenti</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:feed_nav(1);' class='next'>Post successivi </a>";
} else {
showblogfeed += "<span class='noactived next'>Post successivi </span>";
}
showblogfeed += "<a href='javascript:feed_nav(0);' class='home'>Inizio</a>";
document.getElementById("navigazione").innerHTML = showblogfeed;
}
function feed_nav(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=mostrapost";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("el_box").innerHTML = "<div id='caricamento'></div>";
document.getElementById("navigazione").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default/-/etichetta"+ parameter;
var el_box = document.createElement('script');
el_box.setAttribute('type', 'text/javascript');
el_box.setAttribute('src', archievefeed);
el_box.setAttribute('id', 'Ip_etichette');
document.getElementsByTagName('head')[0].appendChild(el_box);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("Ip_etichette");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { feed_nav(0); }
//]]>
</script>
<div id="el_box"></div>
<div id="navigazione"></div>
Si pubblica senza tornare su Scrivi. La demo seguente è stata realizzata usando i post con l'etichetta blogger di uno dei miei tanti blog di test



Le personalizzazioni più rilevanti sono le seguenti:
  1. Post precedenti, Post successivi e Inizio possono essere sostituiti da altre espressioni
  2. I codici dei colori possono essere adattati al nostro layout. Ricordo che #afe5f3 è il colore di un singolo elemento quando viene puntato dal mouse
  3. La famiglia di font Georgia può essere cambiata in una o in tutte le sue occorrenze
  4. Ci sono due URL di immagini colorati di viola che riguardano la GIF di caricamento e l'indirizzo della immagine di default che viene mostrata quando non ve ne siano nel post.
  5. La miniatura ha dimensioni  height:70px e width:70px che possono essere cambiate
  6. var numfeed = 10; determina il numero di post da mostrare
  7. var urlblog = "http://nuovo-blog-di-prova.blogspot.com" è l'URL del blog e rappresenta il parametro più importante. Ricordarsi di usare il .com invece del localizzato .it
  8. var characnumber = 200; configura il numero dei caratteri da mostrare nello snippet.
  9. height:950px; è stata settata per 10 elementi ed è l'altezza del widget quando si clicca su Post precedenti o Post Successivi. Se si vogliono mostrare più o meno di 10 elementi è opportuno aumentare o diminuire il valore dell'altezza.
  10. Infine al posto di etichetta digitare il nome della etichetta di cui vogliamo mostrare tutti i post. Nel caso di una etichetta formata da due parole o di tipo particolare rileggersi la prima parte del post.




109 commenti :

  1. Grazie mille! Stavo proprio cercando qualcosa di questo genere per i miei progetti a lungo termine!

    RispondiElimina
  2. spettacolare! è proprio utile! grazie!!!!

    RispondiElimina
  3. Ottimo!! però io avrei un piccolo problemino vorrei mettere per ogni etichetta questo widget in una pagina statica, ma ne ho 28 di etichette e su blogger non posso creare non più di 20 pagine.. è possibile aumentare il limite delle pagine statiche? grazieeeee

    RispondiElimina
  4. ciao, questo post è molto interessante...
    ma ti chiedo un consiglio per una cosa diversa: vorrei fare un sommario in una pagina statica, suddiviso per (poche) categorie.
    avevo visto alcuni post in cui insegni a creare tabelle/elenchi utilizzando tutte le etichette.
    come potrei fare per pochi? io ho un blog di cucina, vorrei proprio una pagina tipo sommario di un libro di cucina .
    credo che in molti blog simile al mio la procedura sia, semplicemente, aggiornare tale pagina aggiungendo manualmente titolo e link man mano che si pubblica un nuovo post...
    mi consigli questo, anzichè cercare un modo per avere un aggiornamento automatico?
    grazie. Eleonora

    RispondiElimina
    Risposte
    1. Prova una di queste due soluzioni entrambe valide
      http://www.ideepercomputeredinternet.com/2013/01/blogger-sitemap-etichette.html
      http://www.ideepercomputeredinternet.com/2013/11/elenco-post-etichetta-pagina-statica-blogger.html
      @#

      Elimina
    2. grazie per la risposta così veloce...
      avevo visto questi post. Mi piacciono entrambe le soluzioni.
      però forse non fanno al caso mio...uso abbastanza etichette (relative alla categoria di pietanza, ma anche all' ingrediente principale) mentre vorrei realizzare un sommario suddiviso solo per (poche) categorie.
      comunque, grazie dei link, possono comunque tornarmi utili!!
      ciao! Eleonora

      Elimina
  5. molto bello e funzionante alla perfezione .. ne avevo uno di abufaran che blogger ha smesso di far funzionare etichettandolo come infido ovvero noto per diffondere malware ..

    RispondiElimina
  6. Prima di tutto un complimento: venire ogni giorno nel tuo blog è come entrare in una stanza enorme piena di giochi sapendo che ogni giorno ne trovi uno più bello del precedente.
    Ecco, ora che la ruffianata mi è partita ti chiedo: è possibile creare un elenco filtrato da due etichette e non solo una? Ovvero: è possibile elencare solo i post che rispettano la presenza di due etichette e non una sola?

    RispondiElimina
    Risposte
    1. Veramente???
      Allora la ruffianata è stata utile?!?!

      Scherzi a parte, GRAZIE!

      Elimina
    2. Il post è qui
      http://www.ideepercomputeredinternet.com/2014/03/blogger-widget-due-etichette.html
      Se qualcuno mi propone una cosa fattibile che penso possa avere un interesse generale ci faccio un post ben volentieri nel rispetto del poco tempo che ho
      @#

      Elimina
  7. Fantastico questo widget. Solo che se ne inserisco due con parole chiave diversi il secondo non funziona mentre il primo mostra gli articoli con il tag del secondo. C'è un modo per inserire più widget ma con parole chiave diverse?

    RispondiElimina
    Risposte
    1. Al secondo widget nel codice cambia le 4 occorrenze della funzione maskolisfeed con maskolisfeed2 e prova a installarlo in questo modo. Dovrebbe funzionare. Nel caso ti prego di lasciarmi un commento per avere un riscontro.
      @#

      Elimina
  8. Le occorrenze sono solo due. Con lo smartphone non riesco a contare bene ;-)
    @#

    RispondiElimina
    Risposte
    1. Si infatti sono solo 2. Ho appena provato ma non cambia nulla, il secondo widget non appare, non froma neppure la finestra e il primo widget visualizza con la keyword inserita nel secondo. Se elimino il 2° widget, il 1° visualizza correttamente con la sua keyword. Prima di chiedere avevo provato a cambiare molte occorrenze praticamente tutte le funzioni e qualche variabile ma non sono riuscito a farlo funzionare.
      Comunque ti ringrazio, il tuo blog è molto utile.

      Elimina
    2. Purtroppo non riesco a far apparire due di questi widget,, ne appare sempre e solo uno. Ho provato di tutto anche cambiando il codice. Probabilmente è una questione inerente al "json" che riesce a leggere il feed rss una sola volta. Qualcuno conosce un codice simile a questo ma che consenta di utilizzare più widget sulla stessa pagina?

      Elimina
  9. questo widget é fantastico, pero ho un problema, vorrei aumentare la grandezza delle immagini pero quanto lo faccio le immagini escono fuori dal riquadro come posso risolvere il problema? grazie in anticipo

    RispondiElimina
    Risposte
    1. Se aumenti le dimensioni delle miniature oltre i 70 pixel devi aumentare anche l'altezza dell'elemento. Per esempio passa da height:79px a height:85px nel caso avessi aumentato fino a 74 pixel le dimensioni delle miniature. Dovresti aumentare anche l'altezza totale del widget da 470 pixel a per esempio 500 pixel. In questi casi bisogna procedere per tentativi perché dipende in qualche misura anche dal modello del blog e dai CSS che vengono ereditati nel widget
      @#

      Elimina
  10. Avevo gia risolto pero grazie mille

    RispondiElimina
  11. Esatto è il JSON. Anche con i widget degli ultimi articoli ci sono gli stessi problemi. Non se ne possono mettere due
    @#

    RispondiElimina
  12. Ciao il widget è perfetto! una cosa soltanto quando clicco su Post successivi o Post precedenti la pagina non và in alto ma rimane in basso. è possibile risolvere questo problema? grazie mille

    RispondiElimina
  13. Ho appena installato il widget sul mio blog,ma non so perchè mi da una schermata di caricamento nera e non si sblocca nulla.. Sapresti aiutarmi?

    RispondiElimina
    Risposte
    1. Prova a pubblicare da HTML senza andare su Scrivi e sostituisci il nome del blog con il .com e non con il .it inoltre digita anche il nome della etichetta prescelta considerando che le maiuscole sono diverse dalle minuscole
      @#

      Elimina
  14. Ciao Ernesto, complimenti per i tuoi tutorial, sono veramente interessantissimi. Oggi ho provato ad usare "TUTTI I POST DI UNA ETICHETTA MOSTRATI IN UN WIDGET", ma ho qualche problema. Premetto che uso blogger. Ho creato un gadget html, e inserito il codice da te indicato, modificando il mio url (con e senza http, con e senza la / finale, con .it e .com), il nome dell'etichetta (stando attenta ai caratteri), ma quando pubblico il gadget visualizza solo una rotella in movimento, come a voler caricare, ma nulla più. Mi puoi aiutare?

    RispondiElimina
    Risposte
    1. Il codice funziona. Forse nel tuo modello ci sono dei problemi che non conosco. Prova a usare la seconda opzione quella della pagina statica. Se la sidebar è molto stretta il widget potrebbe non visualizzarsi mentre in una pagina non ci dovrebbero essere problemi
      @#

      Elimina
  15. Ho risolto da sola il problema ...o meglio, solo in parte. Ho inserito nel html, l'url di una immagine di un post. Il problema è che nella home visualizzo solo l'immagine di quel post, e non tutte le altre, come nell'esempio del tuo tutorial. Non si aggiorna in modo automatico quando pubblico i post?

    RispondiElimina
    Risposte
    1. Certo che si aggiorna quando pubblichi i post con la etichetta che hai inserito nel widget
      @#

      Elimina
  16. niente, non riesco proprio. Io ho seguito le istruzioni alla lettera, modificando solo: url delle immagini, nome etichetta , e url del mio blog. tuttavia per l'url delle immagini dei post che dovrei pubblicare, sono in grado, al massimo di individuarne uno solo alla volta (lo prendo dalla bacheca dove carico le immagini per i post), e di conseguenza quando pubblico il gadget, appare solo la miniatura dell'immagine di quel singolo post che io ho inserito. credo che uno dei miei problemi sia nel non capire bene da dove prendere l'url delle immagini da indicare nel codice. Mi potresti aiutare?

    RispondiElimina
    Risposte
    1. Prova a incollare il codice così com'è sostituendo soltanto etichetta con blogger. Se non ti funziona vuol dire che il tuo modello non è compatibile se invece ti funziona significa che sbagli qualcosa nella sostituzione dei dati
      @#

      Elimina
  17. Grazie Ernesto, penso che ci sia qualche passaggio che sbaglio perchè ho provato in tutti i modi e il gadget funziona solo parzialmente. probabilmente ho bisogno di un aiuto più specifico e da principiante, ma non ti rubo altro tempo. Grazie ancora

    RispondiElimina
  18. Ciao Ernesto, scusami ma io me ne intendo poco e spero di essere chiara.

    Sto cercando di inserire una pagina statica sul blog, ne ho già alcune (contact, about me ecc.) ma in questa pagina che chiamerò"Travels" voglio inserire diversi post. Qual è il procedimento da seguire? Io solitamente aprivo "nuova pagina", inserivo titolo e testo e poi l'aggiungevo nel widget pagina.
    Ma in questo caso si tratta di più post all'interno della stessa pagina. Inoltre non voglio che compaiano nella pagina principale del blog, vorrei che apparissero solo se si clicca su Travels. Grazie mille!!!

    RispondiElimina
    Risposte
    1. Non si può fare. Per aggregare dei post non si possono usare le pagine statiche ma le pagine di etichette. Tu basta che metta l'etichetta Travels ai post che ti interessano che poi potrai ritrovare all'indirizzo
      http://nomeblog.blogspot.com/search/label/Travels
      Per non mostrarli nella home è più complicato
      http://www.ideepercomputeredinternet.com/2013/09/nascondere-post-homepage-blogger.html
      e te lo consiglio solo se sei piuttosto esperta
      @#

      Elimina
    2. Ciao Ernesto,

      ho inserito nella pagina Travels il link del primo post su layout, così lo vedo.

      Mettendo solo l'etichetta "travels" nel post, come da te suggerito, non lo visualizzavo all'interno della pagina Travels. Non è che bisogna aggiungere la stessa etichetta anche sulla pagina? Però non c'è l'opzione etichette. Io nella pagina ho inserito solo il titolo "Travels" lasciando vuoto lo spazio per il post. Sbaglio qualcosa? Grazie

      Elimina
    3. Credo di non essermi spiegato. Puoi unire più post solo con l'etichetta e non con le pagine
      @#

      Elimina
    4. Scusami per l'insistenza ma forse non mi sono spiegata io. Allora se guardo il tuo sito, vedo in cima "Home, About, Widget" e via dicendo. Quelle sono le pagine statiche? E se non lo sono, come si chiamano? Ad ogni modo in ognuna di esse sono riuniti più post, ecco io vorrei capire come fare la stessa cosa. Il mio blog è questo (www.laforestaincantatadesign.com), giusto per farti un'idea, e in cima ci ho inserito "home, about, shop ecc.". Grazie ancora!!!

      Elimina
    5. Non sono pagine statiche. Si tratta di un menù. Leggi questa serie di post per vedere se ne trovi uno adatto a te
      http://www.ideepercomputeredinternet.com/search/label/menu
      http://www.ideepercomputeredinternet.com/2011/03/i-migliori-menu-per-blogger.html
      ma ce ne sono molti altri
      @#

      Elimina
    6. Grazie mille !!!!Gentilissimo!

      Elimina
  19. Sig. Ernesto, grazie mille!Ho alleggerito il mio blog e ho ridotto il lavoro! Le volevo fare una domanda: come posso evitare che le immagini diventino sgranate con l'aumento della dimensione? Grazie mille per la sua disponibilità!!

    RispondiElimina
    Risposte
    1. L'unica è postarle con una risoluzione più elevata :)
      @#

      Elimina
    2. L'unica è postarle con una risoluzione più elevata :)
      @#

      Elimina
    3. Grazie mille!!Aumenterò la risoluzione!

      Elimina
    4. Sig. Ernesto le chiedo scusa se abuso della sua pazienza, è possibile creare due colonne affiancate nello stesso widget? Sto cercando di farlo da due gg. ma non ci riesco! Un grazie enorme!

      Elimina
    5. Piuttosto difficile. Prova a leggere questo post
      http://www.ideepercomputeredinternet.com/2013/05/dividere-post-blogger-colonne.html
      per vedere se ti viene quaqlche idea (a me non è venuta)
      @#

      Elimina
    6. Grazie ancora, se riesco, invio tutto!

      Elimina
  20. ciao , ho un blog ma con estensione IT ovvero ho reindirizzato i dns compranto un dominio topname... ho fatto tutto ciò che dice la guida ma non funziona. non carica i post :(

    RispondiElimina
    Risposte
    1. Dici che non funziona questo widget?
      Il tuo sito è questo? http://www.instasicily.it
      In questo caso devi mettere questo stesso indirizzo al posto della riga
      http://nuovo-blog-di-prova.blogspot.com
      senza slash. Può darsi però che non funzioni per altre ragioni indipendenti dall'URL
      @#

      Elimina
  21. Non riesco a farlo funzionare, mi mette comunque e sempre post a caso, come mai?

    RispondiElimina
    Risposte
    1. Cosa intendi per post a caso? La demo funziona benissimo. Il widget mostra gli ultimi post che abbiano una data etichetta. Devi scegliere l'etichetta da sostituirla a "etichetta" colorata di rosso. Per caso lo hai messo in un blog di prova con un numero di post non sufficiente con quella data etichetta? Hai messo il .com invece del .it? Gli errori più comuni sono questi. Altro non ti saprei dire
      @#

      Elimina
  22. Salve, mi sa dire da dove e come migliorare la qualità dell' immagine. Grazie

    RispondiElimina
    Risposte
    1. L'immagine della miniatura? Purtroppo la miniatura di Blogger è di dimensioni di standard (mi pare di circa 50 pixel) ed è data da questo tag
      data:blog.postImageThumbnailUrl
      Essendo in questo widget le dimenisoni settate in 70 pixel si vedono sgranate. Prova a diminuire le dimensioni.
      @#

      Elimina
  23. Ciao! Sto usando il tuo codice, ma ho un problema, ovvero vorrei impostare etichette diverse nelle diverse pagine. Si può fare??

    RispondiElimina
    Risposte
    1. Certo che lo puoi fare, devi però incollare tutto il codice in una singola pagina statica o post. Non lo potresti fare invece con una sidebar
      @#

      Elimina
    2. grazie! sto facendo qualche prova, e in effetti viene proprio bene! Ho un po' modificato colori e immagini. Se ti fa piacere vedere come visita il mio blog nascente dituttoedime.blogspot.it, ho usato il tuo codice per ora nella sezione Cucina. Ciao e grazie ancora!!!

      Elimina
  24. Ciao,
    naturalmente ti ringrazio come tutti per aver condiviso questo post.
    Avrei una domanda: vorrei che il titolo del post venisse visualizzato appena sopra l'immagine e allineare tutto al centro, eventualmente nascondendo il testo del post per risparmiare spazio. Come potrei fare?

    Ho già provato in .elementi img a cambiare float:left con img-align:center ma non funziona

    RispondiElimina
    Risposte
    1. L'unica cosa fattibile è quella di nascondere l'incipit del post mettendo
      var characnumber = 0; al posto di var characnumber = 90;
      @#

      Elimina
    2. Grazie per la risposta. Sono riuscito a nascondere sia il testo del post che il titolo. Rimangono comunque i puntini che visualizzava prima, per i post senza testo. Per quanto riguarda l'immagine non riesco a centrarla. Si può fare?

      Elimina
    3. scusami, niente puntini...l'unica cosa sarebbe centrare le immagini, grazie

      Elimina
    4. Il CSS della immagine ha float:left; e si può mettere float:right ma non center. ;
      Prova a sostituire questa riga
      .elementi img{background:#aaa;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
      con quest'altra
      .elementi img{background:#aaa;padding:4px;height:70px;margin-right:auto; margin-left:auto;width:70px}
      però non garantisco il risultato
      @#

      Elimina
    5. In effetti ci avevo già provato senza ottenere risultati. Nella mia scarsa conoscenza di html pensavo ci fosse qualche altra riga che me lo impedisse. Ho risolto aumentando il margine sinistro, apparentemente l'unico modificabile. Non è molto ortodosso ma da pc dovrebbe andare. Grazie comunque!

      Elimina
  25. sarebbe possibile elencare i post in ordine di data e visualizzare le rispettive date?

    RispondiElimina
    Risposte
    1. Tutto può essere fatto ma non con questo codice :)
      @#

      Elimina
  26. http://pezzettiello.blogspot.it/p/foto-delle-ricette-di-tutti-i-post.html ciao ernesto, io vorrei mettere tutti i miei post di tutte le mie ricette su una pagina statica. Ho trovato questo sul web ma non mi piace. Ho letto qui ma è solo per etichette, io vorrei tutto, proprio tutto in immagini, grazie

    RispondiElimina
    Risposte
    1. Non mi ricordo di aver mai pubblicato un widget come quello che richiedi. Ce ne sono di simili che possono essere personalizzati tipo questo
      http://www.ideepercomputeredinternet.com/2011/10/come-inserire-i-titoli-di-tutti-i-post.html
      o questo
      http://www.ideepercomputeredinternet.com/2014/03/mappa-sito-pagina-statica-blogger.html
      @#

      Elimina
    2. C'è anche questo
      http://www.ideepercomputeredinternet.com/2013/11/blogger-sitemap.html
      che è molto bello e funzionale
      @#

      Elimina
  27. http://www.ideepercomputeredinternet.com/2011/10/come-inserire-i-titoli-di-tutti-i-post.html mi piacae molto ma non riesco a scaricarlo con win zip, e quello che mi rimanda non so perchè non ha il blog e tutte le cose

    RispondiElimina
    Risposte
    1. Devi andare su Scarica quindi cliccarci sopra con il destro del mouse e estrarre il contenuto. WinZip va bene ma puoi usare anche 7Zip che è gratuito
      http://www.ideepercomputeredinternet.com/2014/11/7zip-comprimere-file-zip-rar.html
      @#

      Elimina
    2. Purtroppo però vedo che la demo ha smesso di funzionare :((
      @#

      Elimina
    3. oh e quindi non posso fare nulla?? uffa

      Elimina
  28. Ho un problema, seguo tutti i passi. Funziona, però dopo un pò non carica più nulla. Se lo reinstallo va ma poi si blocca. Soluzioni? Grazie

    RispondiElimina
    Risposte
    1. Si tratta di un comportamento strano che non mi so spiegare. Prova un'altra soluzione
      http://www.ideepercomputeredinternet.com/2015/01/blogger-widget-etichette-pagina-statica.html
      http://www.ideepercomputeredinternet.com/2015/03/mappa-sito-blogger-etichette-miniature.html
      http://www.ideepercomputeredinternet.com/2015/11/sitemap-blogger-tutti-post-ricerca.html
      @#

      Elimina
  29. è possibile replicare questo script anche in pagine che non siano la homepage? perchè ho provato a metterlo in un pagina statica che non è la homepage ma rimane in caricamento e non mostra i post

    RispondiElimina
    Risposte
    1. Dovrebbe funzionare in una pagina statica. Devi incollare su HTML e pubblicare senza tornare su Scrivi altrimenti ti cambia il codice. La Demo funziona poi se nel blog ci sono moltissimi post può darsi che ci siano problemi di lentezza
      @#

      Elimina
    2. giusto hai ragione, grazi eper la risposta. bel blog.
      PS. come faccio a modificare la grandezza del contenitore?

      Elimina
    3. Non c'è l'opzione per la dimensione, prende tutto lo spazio del layout
      @#

      Elimina
    4. perchè vorrei spostare l'immagine del caricamento un po' più sopra così da visualizzarla meglio.

      Elimina
    5. @# Allora ti riferisci alla altezza. In questa prima riga
      #contenitore{border:1px solid #666;width:100%;margin:0 auto}
      prova a cambiare il tag margin in questo modo
      #contenitore{border:1px solid #666;width:100%;margin:30 auto}

      Elimina
    6. Ho risolto, in questa zona
      #caricamento{color:#888;font-family:Georgia;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#262626 url(link.gif) no-repeat 50% 50%;height:500px;border:1px solid #afe5f3;}
      ;height:950px;border:1px solid #afe5f3;}
      ho modificato
      ;height:500px;border:1px solid #afe5f3;} da 950px a 500px

      Elimina
  30. Salve vorrei sapere se in questo codice è possibile aggiungere:
    1- Numeri al posto delle immagini come qui: http://www.ideepercomputeredinternet.com/2014/09/blogger-sitemap-etichette-label-post-widget.html
    2- Inserire la voce "Nuovo!" come qui: http://www.ideepercomputeredinternet.com/2015/03/mappa-sito-blogger-etichette-miniature.html
    3- ordinare gli elementi in ordine alfabetico

    Grazie mille per il lavoro che fate

    RispondiElimina
    Risposte
    1. In teoria tutto è possibile però bisognerebbe riprendere in mano tutto il codice e non è cosa di pochi minuti. Ho presentato diverse opzioni di Mappe del Sito per cercare di venire incontro a tutte le esigenze però purtroppo non si possono realizzare widget à la carte
      @#

      Elimina
  31. Questo widget non si vede se navigo sul blog da cellulare. Si può fare qulcosa? Mi dimentico io qualche passaggio???
    Grazie in anticipo e grazie per la continua fonte di ispirazione!

    RispondiElimina
    Risposte
    1. Se non si vede non credo che si possa fare molto comunque con un cellulare di media funzionalità si può scegliere la visualizzazione da desktop e in quel modo si dovrebbe vedere se lo hai messo in una pagina statica
      @#

      Elimina
  32. Ciao Ernesto era molto tempo che non riuscivo a passare da tè - volevo chiederti una cosa se puoi.
    Io avevo alcune pagine statiche con un codice (non mi ricordo preso dove) che mi rimandava ai link di alcune specifiche etichette e post del blog
    Da un pò non mi funzionano più allora ho provato ad installare questo tuo - la seconda parte del codice quella per la Pagina Statica. Ovviamente ho cambiato l'indirizzo del blog nel posto indicato in rosso in grassetto ed ho aggiunto dove indicato in rosso sempre in grassetto l'ertichetta che mi interessava ma non funziona lo stesso. Ho mimenticato qualche cosa ? Dovevo aggiungere qualche altro dato importante che mi è sfuggito ?

    RispondiElimina
    Risposte
    1. Ho dimenticato qualche cosa ? Se si mi potresti dire che cosa - perchè a mè non funziona ?

      Elimina
    2. Ho messo il codice in una Pagina Statica non in Home page - dovrebbe funzionare ugualmente no ? Invece non mi funziona nulla ..... potresti venire in mio soccorso ?

      Elimina
    3. Hai sbagliato qualcosa ma non so cosa. Il tuo blog è questo?
      http://ilrifugiodeglielfi.blogspot.it/
      Se sì sostituisci
      http://ilrifugiodeglielfi.blogspot.com
      a
      http://nuovo-blog-di-prova.blogspot.com
      NB: Importante il .com al posto del .it
      quindi al posto di "etichetta" metti per esempio
      Blog%20Tour%20SEU
      NB: Devi considerare quello che appare nella barra del browser quando clicchi sulla etichetta. Il risultato è questo
      http://i.imgur.com/CuQCpDE.jpg

      Ho preso una etichetta che ha solo un post :)
      @#
      Ricordati anche di pubblicare da HTML senza tornare mai su Scrivi!!!

      Elimina
    4. Grazie probabilmente ho sbagliato etichetta - ora riprovo !

      Elimina
  33. Avevo già fatto così - ho riprovato un'altra volta con due etichette diverse e sul mio blog non viene nemmeno quello che tu hai fatto - non so bene perchè io ho cambiato il link mettendo quello del blog con finale -com ed ho messo in etichetta quella corretta indicando Maiuscola e minuscola come in etichetta. Ma da mè non funziona. Peccato. Grazie comunque

    RispondiElimina
    Risposte
    1. Ho anche salvato da HTLM senza tornare in sezione normale

      Elimina
  34. Io ho messo

    var urlblog = "http://ilrifugiodeglielfi.blogspot.com";
    e var archievefeed = urlblog + "/feeds/posts/default/-/Draghi"+ parameter;

    Ma non funziona sul mio blog :-) Sigh

    RispondiElimina
    Risposte
    1. Non funziona nemmeno se provo con altra etichetta - corretta

      Elimina
  35. Risposte
    1. Grazie - Buona serata e resto della settimana Ernesto :-)

      Elimina
    2. Funziona perfettamente. Puoi aprire questa pagina del mio blog di prova
      http://test32-a.blogspot.it/p/prova_71.html
      Potrebbe essere un problema del tuo modello. Per essere sicuri che non sbagli a copiare il codice, incolla nel browser questo link
      https://www.dropbox.com/s/p2d5esly49wwfxo/arwen.zip?dl=1
      quindi vai su Invio. Scaricherai un file ZIP da cui dovrai estrarre un file di testo con il codice per il tuo blog con l'etichetta Draghi. Seleziona tutto e incollalo nell'Editor in HTML e poi pubblica da lì senza tornare su Scrivi. Se non funzionasse allora significa che c'è qualche cosa nel tuo template di incompatibile e allora c'è poco da fare
      @#

      Elimina
  36. Proverò ma io avevo fatto il copia ed incolla del tuo codice quindi non credo che ci fossero errori - ma piuttosto qualche incompatibilità rispetto al template del mio blog purtroppo - Ora provo. Grazie !

    RispondiElimina
  37. Fatto come dici ma purtroppo, come pensavo non c'erano errori nel codice
    Non funziona nemmeno quello che mi hai mandato con il File zip. Ci deve essere qualche incompatibilità nel mio Template. Peccato. Grazie del tuo aiuto ! Buona domenica

    RispondiElimina
  38. Gent.mo Ernesto,
    a me non funzionano i link "Post successivi" e "Post precedenti".
    Il link "Inizio" funziona.
    Come posso sistemare?
    Grazie e tanti saluti.
    Giuseppe

    RispondiElimina
    Risposte
    1. Scusa... errore mio... adesso funziona.
      Grazie il lavoro.

      Elimina
  39. Una domanda: Si può visualizzare la data di ogni post?

    RispondiElimina
  40. No. La data non è prevista nello script
    @#

    RispondiElimina
    Risposte
    1. OK Ne approfitto della tua gentilezza.
      Mi esce questo indirizzo (http://incontraregesu.blogspot.it/p/contenitoreborder1px-solid_34.html) di una pagina di etichette.
      Le altre vanno bene, cioè con il nome dell'etichetta.
      Da cosa dipende?
      Saluti.

      Elimina
    2. Perché la prima volta che hai pubblicato la pagina lo hai fatto senza digitare il titolo e allora Blogger come titolo ha messo quello che ha trovato all'inizio del contenuto cioè la prima riga del codice
      @#

      Elimina
    3. Ma adesso il titolo della pagina c'è, come faccio a fare scomparire lo strano indirizzo?

      Elimina
    4. Prova a cancellare completamente la pagina e a crearne un'altra stando bene attento a digitare il titolo che poi diventerà anche l'URL. Non ti assicuro però che funzionerà
      @#

      Elimina
    5. Mi sa che è un problema di cache...

      Elimina
    6. ...infatti... non funziona!
      In effetti il servizio di Blogspot è gratis non si può pretendere tante cose. Ci sono altre limitazioni...

      Elimina

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.