Il widget degli articoli recenti con miniature e sommario per blog su Blogger.

Qualche giorno fa ho presentato il widget degli ultimi articoli con miniature in senso verticale, qualche giorno prima quello degli articoli recenti con miniature in orizzontale, adesso voglio proporre un'alternativa che è personalizzabile più facilmente e si presta a ulteriori sviluppi come vedremo nel post successivo.

Come i due precedenti widget, anche in questo caso non si va a modificare direttamente il modello ma si inserisce soltanto un nuovo elemento pagina, andiamo però per gradi. Occorrerà personalizzare questo 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 = 280;
cellspacing = 1;
borderColor = "#ffffff";
bgTD = "#ffffff";
imgwidth = 120;
imgheight = 120;
fntsize = 12;
acolor = "#191919";
aBold = true;
icon = " • ";
text = "Commenti";
showPostDate = false;
summaryPost = 70;
summaryFontsize = 10;
summaryColor = "#242424";
icon2 = " → ";
numposts = 6;
rc_feedLink = "http://demo-parsifal32.blogspot.com/feeds/posts/default";
</script>
<script src="http://sites.google.com/site/ideepercomputeredinternet/script-1/articolirecenticonminiature1.js" type="text/javascript"></script>



Le personalizzazioni riguardano i seguenti elementi
  1. imgr[0] , imgr[1], ecc rappresentano le immagini casuali che vengono visualizzate come miniature nel caso non ce ne siano nei post. Gli URL inseriti da me sono relativi a immagini di albe e tramonti e possono essere cambiate con altre più attinenti
  2. showRandomImg = true; se si vogliono mostrare le immagini casuali altrimenti sostituire true con false. Nel caso di blog con immagini in tutti i post.
  3. tablewidth = 280; rappresenta la larghezza del widget
  4. cellspacing = 1;  è la distanza tra le celle della tabella verticale
  5. borderColor = "#ffffff";  è il colore del bordo
  6. bgTD = "#ffffff";  è il colore di sfondo del widget
  7. imgwidth = 120;  è la larghezza della miniatura
  8. imgheight = 120;  è l'altezza della miniatura
  9. fntsize = 12;  è la dimensione dei caratteri del Titolo del post
  10. acolor = "#191919";  è il colore del testo del Titolo del post
  11. aBold = true; significa che il titolo è in grassetto, se non si vuole in grassetto bisogna sostituire true con false
  12. icon = " • ";  e icon2 = " → "; rappresentano le icone che si visualizzeranno rispettivamente prima del Titolo e prima del Sommario. Si possono sostituire con altri simboli oppure lasciare lo spazio vuoto se non ci piacciono
  13. text = "Commenti";  è il testo che sarà visualizzato accanto al numero dei commenti. Se non vogliamo nessun testo basta lasciare text = " "; 
  14. summaryPost = 70;  rappresenta il numero dei caratteri del sommario del post
  15. summaryFontsize = 10;  è la dimensione dei caratteri del sommario
  16. summaryColor = "#242424";  è il colore del testo del Sommario dell'articolo
  17. numposts = 6;  è il numero degli articoli che si vogliono visualizzare nel widget
  18. rc_feedLink = "http://demo-parsifal32.blogspot.com/feeds/posts/default"; qui dovete inserire l'URL dei feed del vostro blog. Se avete un blog su Blogger basterà sostituire la parte evidenziata di verde
Dopo aver fatto tutte le modifiche andate su Layout > Elementi pagina > Aggiungi un gadget > HTML/Javascript e incollate il codice in Sezioni del sito, mettete come titolo una cosa tipo "ULTIMI ARTICOLI" o "ARTICOLI RECENTI" e cliccate su Salva.


articoli-recenti


Per vedere questo gadget in azione potete andare nella pagina dedicata agli "articoli recenti con miniature e sommario" del mio blog di prova.


Importante: Se avete un dominio personalizzato cioè del tipo www.miodominio.com, il widget non funzionerà. Dovrete scaricare il javascript con l'URL colorato di blu e caricalo nella cartella Public di Dropbox.


Aggiornamento n° 1: Per non inserire il numero dei commenti consultate questo post



40 commenti:

  1. Sempre utilissimi i tuoi consigli,
    Grazie.
    Seguendo questo tutorial, e poi
    andando a sbirciare nel tuo blog prova ho notato che sulla parte in alto a destra c'è una fascia rossa in diagonale con la scritta "I LOVE PARSIFAL32".
    Ho fatto un giro nel tuo blog ma non sono riuscito a trovarlo, potresti darmi le cordinate per raggiungre l'obiettivo.
    Ciao, e ancora Grazie.
    CS

    RispondiElimina
  2. @CS
    Ti riferisci a come inserire un ribbon nel blog insieme a un textarea con il codice da incollare.
    Il codice relativo al nastro in questione è sotto al nastro stesso. Se invece vuoi creare tu un ribbon da inserire nel tuo sito consulta
    l'articolo
    http://parsifal32.blogspot.com/2009/08/come-creare-una-campagna-di.html
    Ciao

    RispondiElimina
  3. Grazie della dritta, sei sempre disponibile.
    Ciao

    RispondiElimina
  4. Ciao Parsifal. Io sto utilizzando la versione orizzontale, ma volevo provare questa. Purtroppo però non funziona. Ci sono problemi col javascript?

    Grazie Gabriele

    Gabriele Gualco in Viaggio

    RispondiElimina
  5. @G. Gualco
    Può essere che ci sia stato un superamento di banda. Sostituisci l'URL
    http://sites.google.com/site/ideepercomputeredinternet/script-1/articolirecenticonminiature.js con
    http://sites.google.com/site/ideepercomputeredinternet/script-1/articolirecenticonminiature1.js
    Dovrebbe funzionare perché nel mio blog di prova è così.
    Ciao

    RispondiElimina
  6. Ok, grazie sei molto gentile. Complimenti per il blog che è pieno di widgets interessanti e utili.
    Ciao a presto Gabriele

    RispondiElimina
  7. Ho cambiato anche il codice dell'articolo quindi se c'era malfunzionamento per mancanza di larghezza di banda la cosa dovrebbe essere risolta

    RispondiElimina
  8. Ok, questo è il javascript per le etichette (labels) ma orizzontali. Nonostante non ci capisca nulla la modifica è una sciocchezza.

    https://sites.google.com/site/gualco12/postrecentilabels.js?attredirects=0&d=1

    Grazie per i tuoi script di partenza!

    Gabriele

    RispondiElimina
  9. applicato... bellissimo... era ciò che volevo! Grazie. kiss

    RispondiElimina
  10. Ciao Parsi,
    grande articolo come sempre.
    Ho trovato un tutorial per creare un effetto di transizione (con jquery) tra i post recenti: http://www.abu-farhan.com/2009/07/recent-posts-for-blogger-with-thumbnail-and-simple-spy/ che lavora in maniera simile, ma non mostra i sommari, nonostante sia presente la variabile (come nel tuo) summaryPost.
    Hai un'idea del perché? Hai voglia di metterci mano?
    Credo sia una variante interessante!!

    RispondiElimina
  11. nn so dove scriverlo e te lo metto qui... girando tra i vari blog ho trovato questo widget troppo carino... è un gatto che se gli clicchi su miagola e fa le fusa :D installaz facile senza registraz, fa tutto in automatico... ma tu forse già lo conosci kiss :)

    RispondiElimina
  12. @Giorgiogal
    Avevo già visto questo post di Abu Farhan, che tra l'altro mi ha fatto il grande onore di essere un mio follower su Twitter.
    E' veramente molto bello, non ho idea del perché non si veda il sommario. Quando ho un po' di tempo posso provare a tradurlo in italiano.
    Ho visto alla fine del post un commento recente di GiorgioG :-)
    Vediamo cosa risponde Abu Farhan...
    Ciao

    RispondiElimina
  13. odio parsifal che succede al widget degli articoli recenti mobili? C''è uno sfondo con sopra scritto bandwidth exceeded -.-'

    RispondiElimina
  14. @soffio di dea
    Perbacco. Il successo del widget è stato tale che si è superata la larghezza di banda di Google Sites.
    Provvedo immediatamente. Vai all'articolo per il nuovo codice.
    Ciao

    RispondiElimina
  15. ah credevo fosse un problema mio :P a trovarlo l'articolo :D

    RispondiElimina
  16. ps. scusa nn era "odio" ma "oddio"... maledette unghie >.<

    RispondiElimina
  17. @soffio di dea
    L'articolo è qui sotto
    http://parsifal32.blogspot.com/2010/04/slideshow-degli-ultimi-articoli-con.html

    RispondiElimina
  18. Ciau! Ho provato a insallare il widget, mannaggia... sui blog 'di prova' funziona su quello 'ufficiale' dove sarei intenzionata a metterlo no. Hai idea di qualche possibile conflitto con altri script?

    :-(

    Grasssssssssssssssssssssssiee...

    RispondiElimina
  19. @MadiS
    Questo dovresti saperlo tu :) Se avessi il blog di prova con gli stessi widget di quello ufficiale sapresti da quale dipende. Puoi comunque sempre fare delle prove.

    RispondiElimina
  20. @parsifal32

    E' ancora funzionante il presente widget? Ho provato sia l'originale che uno da me personalizzarlo ma non va con nessuno degli script alternativi..

    RispondiElimina
  21. Ciao,
    come il widget "ufficiale" dei Post Recenti di Blogger non funziona bene ho cercato e trovato il widget fatto da te (complimenti). Solo un piccolo problema, tra titolo e sommario compare "undefined". Che stringa devo modificare per eliminarlo?
    Il post di riferimento è questo:
    http://softwarefreeandopensource.blogspot.com/2011/05/utilizzo-essenziale-di-openofficeorg.html
    Grazie

    RispondiElimina
  22. @Hugo
    Tra le parentesi dovrebbe vedersi il numero dei commenti ricevuti dal post. Per qualche strana ragione nel tuo blog lo script non riesce a elaborare questo dato. Prova con gli altri URL dell'aggiornamento.

    RispondiElimina
  23. ciao parsifal
    volevo sapere se ce un modo per fare la stessa cosa su wordpress
    grazie

    RispondiElimina
  24. @denny
    Certo. Vai qui
    http://wordpress.org/extend/plugins/
    fai una ricerca del tipo
    Recent posts with thumbnails
    e ne trovi quanti ne vuoi. Poi scegli quello che ti piace di più. Per l'installazione vai su Bacheca > Plugin > Aggiungi nuovo, digiti il nome del plugin, vai su Cerca quindi su Installa ora.

    RispondiElimina
  25. Ciao, è possibile non visualizzare il numero di commenti affianco alle miniature? Per la scritta commenti non è un problema ma resta sempre il numero e le parentesi! Ho provato anche ad utilizzare il tuo widget più recente ma distorce le immagini. Grazie

    RispondiElimina
  26. @Giuliana
    Tutto è possibile. Bisogna modificare questo file javascript

    http://sites.google.com/site/ideepercomputeredinternet/script-1/articolirecenticonminiature1.js

    eliminando la parte che riguarda parentesi e numero. Non ti prometto niente ma se ho un po' di tempo posso provarci ... senza impegno ;)

    RispondiElimina
  27. Ti ringrazio! Se dovessi trovare il tempo non sarebbe male neanche la possibilità di poter giustificare il testo del sommario dei post! Ciao e grazie ancora

    RispondiElimina
  28. @Giuliana
    Quest'ultima cosa temo sia al di sopra delle mie modeste capacità ;)

    RispondiElimina
  29. Ti ringrazio lo stesso, grazie al tuo lavoro sono riuscita a fare tanto per il mio blog!

    RispondiElimina
  30. non riesco a vederlo ho provato tutti i codici che mi hai dato da cosa può dipendere?

    RispondiElimina
    Risposte
    1. @Caterina
      Prova adesso, dovrebbe andare.

      Elimina
    2. niente da fare non funziona!

      Elimina
  31. niente da fare c'è qualcosa che non va oggi nel blog non riesco ad installare nessuno dei tuoi widget, tu cosa credi possa essere?

    RispondiElimina
    Risposte
    1. @Caterina
      Ho visto che hai un dominio personalizzato e allora in questi casi alcuni widget non funzionano. Devi procedere in questo modo
      1)Scaricare questo file http://sites.google.com/site/ideepercomputeredinternet/script-1/articolirecenticonminiature1.js
      incollando l'indirizzo nel browser
      2)Caricarlo su DropBox nella cartella Public
      http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html
      3)Acquisirne il link diretto andando su Copy Public link e sostituirlo nel codice all'URL del file che hai scaricato.
      Questo vale sempre per chi ha un dominio personalizzato.

      Elimina
    2. ho scaricato dropbox ma il resto non riesco a capire come fare non sono molto brava con inglese e non capisco cosa devo fare dal punto 2 in poi,mi dispiace lascio perdere!

      Elimina
    3. ok ce l'ho fatta sono una testona non so ancora come ma ci sono riuscita a desso provo con gli altri widget, grazie ancora per l'aiuto!

      Elimina
    4. @Caterina #blogger #widget #template
      Visto che il diavolo era meno brutto di come pensassi :)

      Elimina
  32. Ciao, innanzitutto grazie per l'aiuto che dai ed i widget che metti a disposizione, ne sto utilizzando davvero tanti per il mio blog :)

    Volevo chiederti una cosa, è possibile modificare lo sfondo rendendolo trasparente ?
    Oltre a togliere la scritta commenti, e anche possibile rimuoverne la visualizzazione del numero ?
    Grazie mille
    Il mio blog è http://jackdanielreef.blogspot.it/

    RispondiElimina
    Risposte
    1. @danielerusso
      Adesso non mi ricordo tutto il javascript
      http://sites.google.com/site/ideepercomputeredinternet/script-1/articolirecenticonminiature1.js
      però la scritta Commenti puoi toglierla (leggi il punto 13), per lo sfondo viene ereditato quello del blog e per il numero dei commenti bisogna modificare il javascript togliendoli. Non è difficilissimo ma ne non sei pratico te lo sconsiglio.

      Elimina