Pubblicato il 25/11/11e aggiornato il

Widget degli Ultimi Articoli con Miniature per Blogger.

In un commento di Giuliana a un post in cui presentavo un widget degli articoli recenti con miniature mi si chiedeva se fosse possibile eliminare il numero dei commenti ricevuti da un singolo post che comparivano a lato del titolo. Ho quindi modificato il javascript per non mostrare questo dato che evidentemente è considerato antiestetico da qualcuno. Ho postato in rete un nuovo widget che può essere visualizzato in alto a destra di questo post


widget ultimi post con miniature

Per la sua installazione non occorre modificare il modello. Basta andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare il seguente codice

<script type="text/javascript">
imgr = new Array();
imgr[0] = "http://tinyurl.com/oj827g";
imgr[1] = "http://tinyurl.com/qzptmk";
imgr[2] = "http://tinyurl.com/ok629f";
imgr[3] = "http://tinyurl.com/omglru";
imgr[4] = "http://tinyurl.com/q4wtpo";
showRandomImg = true;
tablewidth = 190;
cellspacing = 1;
borderColor = "#ffffff";
bgTD = "#ffffff";
imgwidth = 90;
imgheight = 90;
fntsize = 12;
acolor = "#191919";
aBold = true;
icon = "  ";
showPostDate = false;
summaryPost = 60;
summaryFontsize = 10;
summaryColor = "#242424";
icon2 = " ";
numposts = 6;
rc_feedLink = "http://design-prova.blogspot.com/feeds/posts/default";
</script>
<noscript><a href='http://goo.gl/6WUl6' target='_blank'><span style='font-size: x-small;'>Recent Posts With Thumbnails</span></a></noscript>
<script src="https://sites.google.com/site/scriptperilblog/javascript-2/recent-posts-without-comment-number.js" type="text/javascript"></script>

Si clicca su Salva e si posiziona il gadget con il mouse. Le personalizzazioni riguardano:

  1. Gli URL colorati di viola sono delle immagini di default che vengono mostrate come miniatura nel caso non ci siano immagini nel post
  2. La larghezza del widget (190)
  3. La distanza tra le celle nella tabella verticale (1 pixel)
  4. Il colore del bordo #ffffff
  5. Il colore di sfondo #ffffff
  6. La larghezza e l'altezza della miniatura (90 pixel)
  7. La dimensione dei caratteri del titolo (12 pixel)
  8. Il colore del testo del titolo (#191919)
  9. Il grassetto (aBold = true - se non si vuole mettere false)
  10. Il numero degli articoli da visualizzare (6 post)
  11. Tra le virgolette di icon e icon2 si possono inserire delle icone da visualizzare rispettivamente prima del titolo e prima del sommario
  12. Si può mostrare la data inserendo true al posto di false su showPostDate 
  13. La dimensione dei caratteri del sommario (10 pixel)
  14. Il colore dei caratteri del sommario #242424
  15. Il numero dei caratteri del sommario (60)
  16. L'indirizzo del vostro blog da sostituire a design-prova.blogspot.com

Osservazione conclusiva - Se avete un blog con dominio personalizzato, questo widget non sarà visibile. Per renderlo tale occorre scaricare il javascript

https://sites.google.com/site/scriptperilblog/javascript-2/recent-posts-without-comment-number.js

caricarlo su DropBox nella cartella Public, acquisire il link diretto e sostituirlo nel codice.

 





45 commenti :

  1. Vorrei inserirlo ma mi servirebbe sapere come posso mandare a capo il titolo+testo rispetto alla miniatura. forse dovrei inserire un tag BR nel js... ma dove ???

    RispondiElimina
  2. ok ok ce l ho fatta, yuu yuuu!! :D
    era il TR da chiudere e riaprire. Olè!

    RispondiElimina
  3. @Auto ..
    Praticamente hai creato un'altra cella della tabella ;) con un nuovo tr

    RispondiElimina
  4. Il widget funziona ma le immagini sono quelle di default e non quelle dei miei post...

    RispondiElimina
  5. @Tamerice
    Mi sono stupito del tuo commento e allora ho inserito delle immagini negli ultimi post, come vedi vengono visualizzate correttamente
    http://design-prova.blogspot.com/2011/11/demo-degli-ultimi-articoli-con.html
    Se per te non è così forse è perché posti con Windows Live Writer.

    RispondiElimina
  6. Spesso posto con Live Writer, ma non sempre. E' quindi questa la ragione per cui non si vedono le immagini?

    RispondiElimina
  7. @Tamerice
    Sì. WLW ha molti pregi ma Blogger non riesce a acquisire le miniature delle immagini postate. Questo accade non solo per i widget ma anche nei Blog Roll che non mostrano le immagini se gli articoli sono stati postati con WLW.

    RispondiElimina
  8. Grazie per tutte le informazioni :) Allora userò WLW quando ho dei video visto che mi permette di ingrandirne il formato.

    RispondiElimina
  9. Grazie Mille!!!!!!!!!!!!!! Sei sempre gentilissimo

    RispondiElimina
  10. Ciao, su dominio personalizzato non riesco a "filtrare" per etichette...avete idea di come poter risolvere ?

    RispondiElimina
  11. @Nuova Belmonte
    Devi inserire una riga simile a questa

    rc_feedLink = "http://www.ideepercomputeredinternet.com/feeds/posts/default/-/blogger";

    in cui cambiare indirizzo del blog e nome della etichetta. Se non ti funziona devi scaricare il file js come indicato nella Osservazione conclusiva.

    RispondiElimina
  12. purtroppo confermo che una volta installato si vedono i testi dei post ma non le foto peccato perchè io non posto le foto con wlw

    RispondiElimina
    Risposte
    1. @CaterinaPili
      La Demo funziona. Forse utilizzi una metodologia per postare le foto non corretta o forse metti il Read More prima di tutte le foto. In questo caso la miniatura non viene rilevata.

      Elimina
    2. la foto la metto prima del testo ad inizio post e le foto le carico come sempre ho fatto , il dubbio mi viene perchè in passato lo avevo provato e funzionava alla perfezione adesso no pazienza,grazie lo stesso!

      Elimina
  13. Ciao Ernesto, utilizzo questo widget da tempo sia nella versione con tutte le etichette che in quella con una singola etichetta e ha sempre funzionato benissimo!
    Volevo chiederti se fosse possibile utilizzarlo per gli ultimi post relativi a tutte le etichette tranne una! Grazie e a presto

    RispondiElimina
    Risposte
    1. @ La Cucina Imperfetta ...
      Non sono a conoscenza di un modo semplice per creare un feed con tutte le etichette tranne una. Si potrebbero usare i Pipes di Yaooh, quelli del widget dei Top Commentatori ma se ne dovrebbe creare uno apposito per ciascun blog.

      Elimina
    2. Forse è meglio lasciar perdere! Grazie e a presto

      Elimina
  14. Questo widget degli ultimi articoli è fantastico, personalizzabile al massimo e carica tanto più velocemente di quello che avevo prima! Grazie davvero.
    Posso chiederti se esiste un widget per i post più popolari che sia altrettanto personalizzabile, soprattutto nella misura delle fotografie e nella lunghezza del riassunto?
    Inoltre, posso chiederti qual è il widget di cui parla Giuliana de la Cucina Imperfetta due commenti sopra, cioè la versione di questo però personalizzata per etichetta?
    Grazie Ernesto

    RispondiElimina
    Risposte
    1. @ Giuliana
      Per mostrare solo gli ultimi post relativi a una singola etichetta con questo widget basta cambiare l'indirizzo dei feed. Seguendo la falsariga della demo al posto di
      http://design-prova.blogspot.com/feeds/posts/default
      si mette
      http://design-prova.blogspot.com/feeds/posts/default/-/etichetta
      dove al posto di etichetta metti quella che ti pare.
      Il widget dei post più popolari è ufficiale di Blogger e le personalizzazioni sono quelle offerte. Magari potrei fare un post per modificare l'aspetto delle miniature (senza impegno... )

      Elimina
  15. Ernesto,scusa se ti chiedo ancora un'ultima cosa.
    Ho installato alcuni di questi widget per etichetta, e funzionano benissimo. Sarebbe possibile inserire alla fine di ognuno due righe di testo con su scritto "Vedi tutti...", riferiti agli altri articoli con la stessa etichetta (e ovviamente) collegandoli tramite apposito link?
    Grazie.

    RispondiElimina
    Risposte
    1. @ Giuliana
      Basta che tu incolli alla fine del codice un altro codice come questo

      <br/><div style="text-align:center; font-size:14px; font-weight:bold;"><a href="#">Vedi Tutti</a></div>

      dove il /br è un salto di riga e dove puoi personalizzare i parametri dentro style.

      Elimina
    2. e dove al posto del cancelletto ci devi incollare l'URL della etichetta che sarà del tipo
      http://www.dietaedintorni.net/search/label/dieta
      @

      Elimina
    3. Grazie di cuore, se non ci fossi bisognerebbe inventarti ;)

      Elimina
  16. Io proprio non riesco a metterlo! Faccio tutto come descrivi ma non viene! Dannazione

    RispondiElimina
    Risposte
    1. Se hai un blog con dominio personalizzato vale a dire acquistato da Google del tipo www.miodominio.com devi caricare il javascript su DropBox nella cartella Public. Se invece hai un blog gratuito incolla il codice così com'è per vedere se funziona. Se non andasse ci sono delle incompatibilità se invece andasse allora sbagli qualcosa

      Elimina
  17. No ho un mio dominio, e ho già caricato su dropbox ma niente.. noon si vede. E' proprio come se non ci fosse il widget!

    RispondiElimina
  18. Ernesto,
    cosa può significare se nei widgets relativi a questo articolo (il cui file .js è hostato nel mio account dropbox) sono di colpo sparite le immagini dei relativi post e sono comparse quelle di default, cioè quelle che compaiono in caso non ci sia alcuna immagine? Spero di essermi spiegata...

    RispondiElimina
    Risposte
    1. @ Giuliana
      Può essere un javascript su DropBox troppo lento che non è riuscito a rilevare le miniature delle immagini. Delle volte DropBox rallenta repentinamente e un paio di volte è andato down

      Elimina
    2. Ho risolto :)
      Avevo cambiato l'impostazione della visualizzazione dei feed da "completa" a "breve", e in questo modo probabilmente non mi prendeva nemmeno la foto. Ho sostituito da "breve" a "fino all'intervallo", e le foto sono ricomparse.
      Preciso che l'illuminazione mi è venuta leggendo il tuo commento 12.a ;)
      Un bacione!

      Elimina
  19. Ciao Ernesto è possibile fare in modo che questo widget si carichi in modo asincrono?
    Ciao Giuliana

    RispondiElimina
    Risposte
    1. @# Non credo. Prova con Lazy Load
      http://www.ideepercomputeredinternet.com/2012/11/lazy-load-plugin-blogger.html

      Elimina
  20. ciao Ernesto dopo diversi tentativi sono riuscita finalmente a far funzionare questi widget, ne ho inserito uno riguardo gli ultimi post ed altri ultimi post per etichetta, funzionano alla perfezione, avevo solo bisogno di leggere meglio le tue indicazioni e i commenti che hanno risposto ai miei quesiti, me ne rimane solo uno , riguardo al widget ultimi post per etichetta ho messo al fondo : leggi tutte le altre ricette ecc...e mettendo il link mi manda a tutte le ricette , ecco come posso fare in modo che le ricette si vedano in miniatura come nel blog di Giuliana? ti lascio il link così per spiegarmi meglio:http://www.lacucinaimperfetta.com/search/label/Dolci%20e%20dessert#.UbDFQkBM-So
    grazie come sempre per l'aiuto !

    RispondiElimina
    Risposte
    1. @# Nelle etichette si vede la prima parte del post come in Home fino al classico Continua a leggere. L'aspetto dell'incipit degli articoli è dato dal modello che utilizza

      Elimina
  21. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. Questo commento è stato eliminato dall'autore.

      Elimina
  22. se si imposta il numero di post da mostrare maggiore di quelli realmente in archivio per una data etichetta, il blog si "incasina" graficamente. C'è qualcosa che si può cambiare nello script? Grazie!

    RispondiElimina
    Risposte
    1. Così su due piedi non te lo so dire, bisognerebbe controllare questo file
      https://sites.google.com/site/scriptperilblog/javascript-2/recent-posts-without-comment-number.js
      Comunque metti un numero più basso oppure scrivi più post :)
      @#

      Elimina
    2. Utilizzo questi script per creare pagine statiche che raccolgano singoli argomenti, così impostandoli una volta a 500 post non ci pensi più, questo è graficamente il migliore. C'è un'altra soluzione per creare pagine che raccolgano i post solo di una determinata etichetta? Ti ringrazio davvero tanto, i tuoi tutorial sono l'architettura dei miei blog!

      Elimina
    3. Tutti i widget basati sui feed possono essere usati per una singola etichetta modificando l'URL
      @#

      Elimina
  23. Dopo aver cercato di capire dove sbagliavo ,finalmente sono riuscita a mettere questo widget, lo uso sia per gli ultimi post, che per i post per etichetta, non caricando più i post con WLV e mettendo i feed per intero e non parzialmente come avevo impostato prima , direi che sono super contenta, ora se volessimo mettere la ciliegina sulla torta, non mi sgridare però ,posso nascondere :installa widget?
    e se volessi mettere alla fine di ogni riassunto delle miniature :continua a leggere , come posso fare? Grazie

    RispondiElimina
    Risposte
    1. Il link lo aveva messo l'autxore del widget. Dopo averlo tradotto ho messo quello del post del mio blog con le istruzioni per le istruzioni. Per toglierlo procedi in questo modo
      1) Scarica questo file
      https://sites.google.com/site/scriptperilblog/javascript-2/recent-posts-without-comment-number.js
      2) Aprilo con Notepad++ o altro Editor
      3) Scorri fino alle ultime righe e trova questa riga di codice

      document.write('<a href="http://parsifal32.blogspot.com/2010/01/il-widget-degli-articoli-recenti-con.html" style="font-size: 7px; text-decoration:none; color: #dddddd;">Installa il Widget</a>');

      4) Cancellala
      5) Sava il file e caricalo su Google Sites o Google Drive come Hosting
      6) Trova il link diretto del file .js e sostituiscilo nel codice
      7) Se non funzionasse basta eliminare il solo Installa il widget per non vedere più nulla
      8) Per il Continua a leggere lasciamo perdere perché si dovrebbe mettere mano a tutto il file

      Elimina
  24. funziona senza problemi , per il continua a leggere non importa ,va benissimo anche così!

    RispondiElimina

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.