Pubblicato il 05/01/10 - aggiornato il  | 53 commenti :

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

Widget degli Articoli Recenti con miniature per 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




53 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
    2. Non riesco a trovare la guida per inserire il widget dei post recenti, che però mostrano solamente l'immagine che porta al topic...
      E quindi senza titolo e senza riassunto, solo l'immagine. Mi pare che avevi fatto una guida simile ma non la sto trovando più.

      Elimina
    3. @ Dovrebbe essere questo
      http://www.ideepercomputeredinternet.com/2012/03/widget-degli-ultimi-post-con-miniature.html
      Poi uno fa le configurazioni che crede

      Elimina
  33. Buongiorno Ernesto, sai che a me non vengono random le immagini? anche se c'è true...
    cosa può essere?

    RispondiElimina
  34. Ecco, era questo il widget dove vorrei togliere il collegamento con questo post "ibstalla il widget". Poi volevo anche sapere se puoi dirmi come posso ridurre lo spazio tra il bordo di sinistra e la foto, in modo da sfruttare di più lo spazio del widget.

    Grazie

    Dany

    RispondiElimina
    Risposte
    1. @# Probabilmente il widget non è perfetto e per questo non vengono le immagini casuali. Visto che credo tu sia nuova di questo blog ti spiego alcune cose:
      1)Quando presento un widget questo può essere utilizzato gratuitamente senza nessuna limitazione
      2)Talvolta per facilitare la sua diffusione inserisco un link alla fine che rimanda al post con le istruzioni per l'installazione
      3)Se scarichi un widget o un modello da internet vedrai sempre dei link di quel tipo con il "credit", si chiama così, di attribuzione
      4)In alcuni widget con il link metto anche le istruzioni per toglierlo
      5)Se qualcuno toglie il credito di attribuzione non è che gli faccio causa
      5)Mi sembra però quantomai paradossale che si chieda proprio a me come fare per eliminarlo. E' come chiedere a una azienda di produzione di software "Scusa ma come si fa a crakkare il programma per averlo gratis?"

      Elimina
    2. Si ti comprendo Ernesto e sono d'accordo con te, immaginavo che mi avresti detto questo, ma è anche vero che domandare è lecito perché comunque una risposta la ottieni sempre e in base a quella poi ti muovi. Grazie lo stesso, anche con il link va ugualmente bene. Peccato per l'uscita casuale, sarebbe stato splendido.

      Dany

      Elimina
  35. Ciao,

    Sto usando questo script nel mio blog ( http://theroomsofmylife.blogspot.it/p/tutorial.html ) ma ho dei piccoli problemi:

    1: Se imposto il "numposts" ad un valore superiore agli effettivi post non funziona anzi mi si sballa tutto il layout.

    2: Se uso il Js orizzontale e cambio il "tablewidth" non succede nulla le anteprime continuano sempre sulla stessa linea, non andando a capo e invadendo la sidebar.

    Cosa devo modificare nello script?

    Grazie :D

    P.s. ho uppato lo script in un mio spazio cosi da poterlo modificare.

    RispondiElimina
    Risposte
    1. @# Adesso non mi ricordo la struttura del javascript. Per la 1) è normale, d'altra parte perché dovresti impostare un numero superiore agli elementi presenti. Per la 2) guarda se il tag tablewidth fosse presente anche nel javascript oltre che nel codice visibile in questo post. Mi sfugge però dove abbia postato il js orizzontale, forse in un altro post...

      Elimina
    2. Grazie per la celerità :D

      Per la 1 perchè vorrei che li aggiungesse in automatico. Si puo fare ?

      Per la 2 il tag è presente ne javascript ed è per questo che non capisco perchè non manda a capo

      Il java orizzontale l' ho preso da qui esattamente commento 8.

      Elimina
    3. @# Lo script del commento 8 è stato realizzato da un lettore quindi non mi prendo responsabilità di funzionamento

      Elimina
    4. Capisco :D

      Grazie comunque sei stato gentilissimo.

      Elimina
  36. ciao,
    grazie per i tuoi widget. sto provando a usare questo (per pubblicare una minilista di segnalazioni librarie, quindi ultimi post con etichetta "libreria"), ma la visualizzazione delle miniature rimane quella delle foto random. preciso che nei post singoli la foto (che è la cover del libro) è integrata nel testo, in apertura a sinistra. ho provato a agire su

    showRandomImg = false;

    e anche a cancellare fisicamente le righe di script con gli url delle foto. in entrambi i casi non ho ottenuto niente (nel secondo caso bianco al posto delle foto con le palme...).

    mi piacerebbe sapere se se ne puo venire a capo.

    e gia che ci sono anche sapere se si puo impostare il testo accanto alle miniature come formattato a bandiera a partire dal punto in alto a sinistra. (infatti finora il testo è formattato a bandiera ma centrato in orizzontale in altezza)

    grazie se potrai rispondermi e anche se metterai altre cose per blogspot, che per quanto limitato resta sempre un agile strumento.

    per ogni cosa qui il mio sito: mediacalabria.blogspot(.)

    buon lavoro e grazie

    RispondiElimina
  37. @lampadarios
    Prova con quest'altro widget simile
    http://www.ideepercomputeredinternet.com/2011/11/widget-degli-ultimi-articoli-con.html
    Comunque la demo funziona
    @#

    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.