Pubblicato il 17/04/14 - aggiornato il  | 34 commenti :

Widget degli Ultimi Post con Miniature per Blogger completamente personalizzabile.

Il widget più amato di Blogger che mostra gli Ultimi Post con Miniatura e opzionalmente data e numero dei commenti completamentre personalizzabile che si adatta alla misure della sidebar.
Fino a qualche mese fa era possibile installare dei widget di Blogger direttamente cliccando su un link senza inserire alcun codice. Poi Blogger ha modificato le regole con cui accetta i widget di terze parti e è diventato molto più difficile per gli sviluppatori effettuare tutta la procedura affinché un gadget venga accettato. I widget già installati con questo metodo continuano a funzionare ma nel caso in cui si pensasse di disinstallarli per poi inserirli nuovamente smetterebbero di essere visibili.

Non resta quindi che convertire in codice i gadget di questo genere per poter essere installati senza alcun problema attraverso Layout > Aggiungi un gadget > HTML/Javascript. Inizio con un widget che ha avuto un grande successo e che ho tradotto in italiano partendo da un eccellente lavoro di Blogger Plugins che ora credo abbia cessato di occuparsi di piattaforma Blogger.

Il grado di soddisfazione degli utenti di questa personalizzazione per Blogger si misura anche dal fatto che la pagina del blog in cui è pubblicato ha raggiunto Page Rank 3 paragonabile a quella di un blog di una certa qualità. Il javascript relativo l’ho caricato su Google Drive utilizzato come Hosting e quindi il widget dovrebbe funzionare anche se installato su domini personalizzati.

widget-ultimi-post-miniature






Tale widget può mostrare anche il numero dei commenti ricevuti e la data di pubblicazione.



Per la sua installazione come detto si va su Layout > Aggiungi un gadget > HTML/Javascript, si digita un titolo a piacere e, in Sezioni del sito, si incolla il seguente codice

<div id='bp_recent'></div>
<script style='text/javascript' src='https://sites.google.com/site/exdrive32/script/articoli-recenti-miniature.js'></script>
<script style='text/javascript'>
var numberOfPosts = 6;
var showPostDate = true;
var showSummary = true;
var summaryLength = 200;
var titleLength = 100;
var showCommentCount = true;
var showThumbs = true;
var showNoImage = false;
var imgDim = 100;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = true;
var readMore = 'Leggi tutto';
</script>
<script src='http://www.ideepercomputeredinternet.com/feeds/posts/summary?max-results=6&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Si salva e si posiziona con il mouse. Se preferite avere il widget tutto sotto controllo nel vostro spazio scaricate il javascript colorato di viola e caricatelo su Google Drive o DropBox o anche Google Sites ma in quest’ultimo caso solo se avete un dominio del tipo Blogspot. Per configurare gli altri parametri seguite queste semplici istruzioni:
  1. Va inserito l’URL del vostro sito ricordando di mettere il .it e non il .com
  2. Il numero dei post mostrati (6) va modificato in tutte e due le occorrenze
  3. var showPostDate = true; per mostrare la data. Se non si vuole mostrare sostituire true con false. La stessa procedura serve per mostrare o meno il numero dei commenti mediante il parametro showCommentCount.
  4. La stringa var showThumbs = true; serve per mostrare le miniature. Se non volete mostrarle sostituite true con false. Si può anche decidere o meno di mostrare l’immagine di default in showNoImage. Per modificarla dovrete editare il javascript e cercare noimage.png
  5. In var imgDim = 100; si setta la dimensione delle miniature
  6. In imgFloat = 'left'; si posiziona sulla sinistra. Con right va a destra
  7. In myMargin = 5; si definisce il margine tra miniatura e testo
  8. Con mediaThumbsOnly = true; si visualizzeranno anche le miniature di oggetti multimediali come potrebbero essere quelle dei video di Youtube
  9. La condizione showReadMore = true; serve per mostrare il Read More. Se non si vuole inserire basta sostituire true con false come al solito.
  10. var readMore = 'Leggi tutto'; serve per personalizzare l’espressione
  11. var showSummary = true; per mostrare o meno l’incipit del post
  12. var summaryLength = 200; per settare il numero dei caratteri dell’incipit
  13. var titleLength = 100; per la lunghezza massima del titolo.
Aggiornamento del 23-09-2016: A seguito del ritiro del supporto a Google Drive come Hosting il widget aveva smesso di funzionare. L'ho ripristinato caricando lo script colorato di viola su Google Sites. A chi avesse smesso di funzionare può reinstallarlo copiando il nuovo codice. Il widget funzionerà solo nei blog gratuiti del tipo nomesito.blogspot.com. Chi avesse un blog con dominio personalizzato può incollare l'indirizzo viola nell'indirizzo del browser per poi pigiare su Invio. sarà scaricato il file articoli-recenti-miniature.js che dovrà essere caricato su uno spazio proprio o su Dropbox per poi sostituirne il link diretto.

Aggiornamento del 25-09-2016: Ho pubblicato una nuova versione del video funzionante anche con i domini personalizzati che può essere visualizzata in questo post


34 commenti :

  1. Prova a sostituire la stringa
    http://www.ideepercomputeredinternet.com/feeds/posts/summary?max-results=6
    con
    http://www.ideepercomputeredinternet.com/feeds/posts/default/-/blogger?max-results=6
    ovviamente inserendo l'URL del tuo blog e il nome della etichetta al posto di "blogger"
    @#

    RispondiElimina
  2. Purtroppo con JSON non ho ancora trovato il modo di utilizzare per due volte nella pagina lo stesso widget
    @#

    RispondiElimina
  3. E volendo personalizzare anche i colori?

    RispondiElimina
    Risposte
    1. In questo widget i colori sono ereditati dal blog e non ci sono codici da modificare
      @#

      Elimina
  4. Scusami ma dove devo inserire l'URL del mio blog?
    Al posto del tuo sito?....però no perché poi il widget non rimanda a te.....mumble mumble....mi sfugge qualcosa....e quindi? Dove?

    RispondiElimina
    Risposte
    1. Ok ho risolto.....però fammi chiedere un'altra cosa....la parte in viola, si deve eseguire per forza? In realtà a cosa serve? Grazie.
      Vale

      Elimina
    2. ....pensavo di aver finito.....in realtà non modifica il numero dei post.....ne mostra solo e sempre 6...è così o c'è un modo per aumentare?
      A ri grazie!

      Elimina
    3. Ti prego di leggere attentamente il post. Nell'elenco delle personalizzazioni al punto 2) c'èscritto chiaramente che il numero di post deve essere modificato nelle due occorrenze di cui una nellaa penultima riga. La riga colorata di viola è un javascript che sarerbbe meglio tu caricassi sul tuo Google Drive o Google Sites per evitare una eccessiva larghezza di banda. Leggi qui
      http://www.ideepercomputeredinternet.com/2010/05/come-caricare-file-javascript-e-css-su.html
      oppure qui sotto se hai un dominio personalizzato
      http://www.ideepercomputeredinternet.com/2014/07/hotlink-google-drive.html
      @#

      Elimina
  5. purtroppo non riesco a vedere la miniatura dell'immagine, come posso risolvere? grazie

    RispondiElimina
    Risposte
    1. Prova a leggere qui
      http://www.ideepercomputeredinternet.com/2014/11/blogger-miniature-immagini.html
      @#

      Elimina
  6. Ernesto ho trovato questo niente male e funziona l'unica cosa che non va e che ho messo 9 invece mi vengono solo 6 .....
    Ciaooo grazie e buona serata.
    PS. Preferivo l'altro con i bottoni ma bisogna accontentarsi.

    RispondiElimina
    Risposte
    1. Questo widget usa lo stesso script di quello che non funziona più. Ti vengono sempre 6 perché non hai letto attentamente il punto 2). Il numero dei post va modificato in entrambe le occorrenze. Oltre alle prime righe è presente un 6 anche nella penultima :)
      @#

      Elimina
  7. Ciao Ernesto, ho inserito questo widget modificandolo così:
    - in orizzontale su due righe con 10 miniature (5 su una riga e 5 sotto) abbastanza grosse
    - senza alcuna scritta (solo le immagini)
    Tutto perfetto ma sotto alle due righe orizzontali partono le 10 miniature in verticale con le prime righe di descrizione dei post, quanti commenti e la scritta: Leggi tutto.
    In pratica come se non avessi apportato le modifiche.
    Dove ho sbagliato? Ti ringrazio, Lorena

    RispondiElimina
    Risposte
    1. Non è tanto lo sbaglio. Non credo si possa mettere il widget su due righe. Quello che si può personalizzare è indicato nella parte finale del post.
      @#

      Elimina
    2. Ciao Ernesto, si può eccome! Non chiedermi come ho fatto ma ci sono riuscita ed è andato a posto da solo dopo circa mezz'ora. Se ti interessa vedere com'è su due righe, senza scritte, lo trovi sul mio blog di cucina.
      Ciao e grazie, Lorena

      Elimina
  8. Ciao Ernesto, è possibile mettere lo snippet al posto del summary? Se sì in che modo?
    Grazie mille!

    RispondiElimina
    Risposte
    1. No. Viene rilevata la prima parte del post e non il suo riassunto nella Meta Descrizione
      @#

      Elimina
  9. Ciao, ho installato il tuo widget sul mio blog almeno un anno fa, mi piace molto, ma recentemente mi sono accorta che mi crea problemi con google analytics per via di un parametro mancante negli url generati, risulta mancare l'utm_medium...
    Ti metto per esempio l'url che si genera cliccando su una delle immagini del widget e che porta all'ultimo post http://www.inviaggioincucina.it/2016/06/plancton-marino-un-nuovo-ingrediente.html?utm_source=bp_recent&utm-medium=gadget&utm_campaign=bp_recent. L'utm_medium c'è ma è con il trattino "-" anzichè "_". Non me ne intendo, ma forse è questo il problema, si può rimediare? Mi dispiacerebbe eliminare il widget...
    Grazie.

    RispondiElimina
    Risposte
    1. Mi sembra un problema assolutamente marginale. Comunque in un'altra versione del widget ho eliminato la stringa di Google Analytics
      http://www.ideepercomputeredinternet.com/2015/08/recent-posts-widget-blogger-desktop-mobile-thumbnail.html
      Inoltre in questa versione si può installare anche nella versione mobile (opzionalmente). Poi visto che il 31 Agosto cesserà il servizio di hosting di Google Drive il widget con lo script esterno cesserà di funzionare. Quindi reinstallalo secondo le istruzioni del post precedente e scompariranno le stringhe di Analytics
      @#

      Elimina
    2. Grazie mille! Ho seguito le tue indicazioni e ho risolto, buona domenica!

      Elimina
  10. Ciao Ernesto, poco fa mi sono accorta che questo widget non funziona più sul mio sito, ovvero non si vedono le più le miniature. Fino ad ieri invece funzionava tutto. Cosa può essere successo? So che anche altri blogger stanno avendo lo stesso problema. Grazie per il tempo che vorrai dedicarmi.

    RispondiElimina
    Risposte
    1. Ho aggiornato il post. Leggi l'ultimo paragrafo. Se avevi già configurato il widget basta che tu sostituisca l'URL dello script colorato di viola al codice che hai nel blog. Altrimenti puoi ricopiare tutto il codice
      @#

      Elimina
    2. Funziona perfettamente. L'ho appena testato. Il tuo blog è del tipo blogspot vero? Se non ti funziona significa che hai copiato male il codice. Prova a copiarlo così com'è e poi modificalo successivamente. Potrebbe anche dipendere dal fatto che tu hai installato un altro widget simile per mostrare gli ultimi articoli
      @#

      Elimina
    3. Se continua a non funzionare prova questa soluzione
      http://www.ideepercomputeredinternet.com/2015/08/recent-posts-widget-blogger-desktop-mobile-thumbnail.html
      limitatamente alla versione per desktop
      @#

      Elimina
  11. Sì, sono su blogspot, ma ho un dominio personalizzato. Sto provando a scaricare il file del link viola, ma il pc me lo blocca per virus. Che faccio?

    RispondiElimina
    Risposte
    1. Non te lo blocca per virus ma perché essendo un file di estensione .js è ritenuto potenzialmente pericoloso. Scegli l'opzione di scaricarlo comunque. È un file che ho creato io, non ci sono rischi
      @#

      Elimina
  12. Ciao Ernesto, anch'io come tanti altri ho il problema che non si vedono più le miniature. Cosa posso fare?

    RispondiElimina
    Risposte
    1. La risposta è inserita alla fine del post. Leggi Aggiornamento del 25-09-2016
      @#

      Elimina
  13. Grazie!!! Il gadget non funzionava più e, prima di scriverti, sono tornata qui alla ricerca del post. Ho fatto le variazioni che hai segnalato a settembre e ora le mie miniature sono riapparse. Grazie ancora :))))

    RispondiElimina
  14. Salve, c'è un modo per mettere un puntino (o qualsiasi altro segno) prima del titolo dei post? Volevo creare un elenco puntato senza miniature e mi manca solo questo dettaglio. Grazie in anticipo

    RispondiElimina
    Risposte
    1. Puoi trovare il codice completo in questo post
      http://www.ideepercomputeredinternet.com/2016/09/recent-post-widget-with-thumbnails-blogger.html
      però a priva vista non sono riuscito a trovare il punto in cui si possa aggiungere quello che chiedi. Se hai una certa conoscenza di javascript puoi metterti a studiare un po' il codice
      @#

      Elimina
    2. Ci proverò, anche se non sono ferratissimo in materia...questo widget è molto semplice da usare ed ha buone opzioni di personalizzazione, ecco perché mi piace e l'ho inserito sul blog. Grazie per la risposta ;)

      Elimina

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