Pubblicato il 03/06/09 - aggiornato il  | 18 commenti :

Come inserire il widget degli ultimi articoli corredati da miniature delle immagini in un blog su Blogger.

In questo blog ho già parlato di come aggiungere il widget degli articoli recenti e l’ho pure inserito nella sidebar di destra.
Adesso per coloro che hanno particolarmente a cuore l’aspetto del proprio blog su Blogger e amano i widget colorati presento una diversa opzione che sono sicuro piacerà parecchio specialmente alle donne.
Non occorre minimamente cambiare il modello, dobbiamo solo stare attenti alle dimensioni del nostro template.
Andate su Layout > Aggiungi un gadget > HTML/Javascript ed inserite il codice riportato qui sotto nell’elemento. Mettete pure un titolo del tipo Ultimi Articoli
widget_ultimi_articoli

<script language="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 = 248;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 120;
imgheight = 100;

fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";

text = " ";
showPostDate = false;
summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";

numposts = 5;
home_page ="http://miosito.blogspot.com/";
</script>
<script src="https://sites.google.com/site/ideepercomputeredinternet/script-1/scriptarticolirecentiminiature.js" type="text/javascript"></script>


Posizionate con il mouse l’elemento nel punto che desiderate quindi Salvate il tutto.
Ovviamente prima ci sono le  personalizzazioni da fare
  1. Le righe di codice che vanno da imgr[0]=”URL_immagine”; a imgr[4]=”URL_immagine”; rappresentano le immagini che vengono visualizzate nel caso non ce ne fossero negli articoli del blog. Ho raccolto e caricato 5 immagini di alba e tramonto, quindi ne ho acquisito l’URL, infine l’ho accorciato con TinyURL. Ovviamente potete caricare nel Web le immagini che preferite e sostituire gli URL contrassegnati di rosso con quelli delle vostre immagini
  2. La larghezza e l’altezza delle immagini l’ho scelta width=”120” e height=”100” in pixel. Naturalmente potete adattare le misure al vostro modello
  3. Il numero di post recenti da visualizzare l’ho inserito uguale a cinque e ovviamente si può cambiare numero a seconda delle esigenze
  4. Lo script del widget si trova a questo indirizzo e se volete potete copiarlo e hostarlo su un vostro account
  5. Al posto di miosito.blogspot.com inserite l’indirizzo del vostro blog. Mi raccomando di mantenere la slash (/) finale
  6. In questo caso il Titolo del post viene posto alla destra della Miniatura. Si può anche metterlo sopra o sotto agendo sullo script di cui al punto 4). Se interessa magari posso tornare sull’argomento
  7. Se volete vedere come funziona il widget date uno sguardo ad un mio blog che avevo abbandonato da molto tempo e che mi è servito da cavia – PhotosvideosandmoreIn questo caso non ci sono foto o immagini negli ultimi post quindi  si vedono le miniature di cui al punto 1). Il widget si trova in alto a destra e mostra anche il numero dei commenti per ciascun post. 


Ho testato il widget con Internet Explorer 8, Firefox e Chrome e funziona con tutti e tre. L’unico problema che potreste incontrare è quello delle dimensioni delle miniature ma penso che dovrebbe andare tutto bene. Inoltre c’è da dire che il lavoro per installarlo e, eventualmente, disinstallarlo è davvero piccolo visto che si tratta solo di un gadget e non si opera sul template.
Aggiornamento: In questo nuovo articolo ho illustrato come presentare il widget in modo orizzontale e ho quindi cambiato aspetto al blog Photos and Videos. 





18 commenti :

  1. Ciao Ernesto,
    ho fatto qualche esperimento, ma, devo adattarlo alle mie esigenze (tra le varie modifiche, vorrei metterlo sotto l'header e devo orientarlo da orizzontale a verticale).

    C'è un piccolo errore nel codice: hai dimenticato le "" (le virgolette) su "http://mioblog.blogspot.com";...

    Ciao

    RispondiElimina
  2. E' vero grazie della segnalazione provvedo subito a correggere. Per quanto riguarda le altre personalizzazioni sai che sono un autodidatta ma vedrò quello che si può fare, in fondo si tratta di una tabella e basta spostare gli elementi :-)

    RispondiElimina
  3. Ciao Ernesto,
    sono autodidatta anch'io, mi sono accorto dell'errore (ma è più una svista) provando ad inserire il widget nel blog e non ottenevo che una pagina bianca!!! allora ho iniziato a guardare riga per riga e mi sono accorto, non perchè sono "bravo", ma, quasi per caso...

    Ciao

    RispondiElimina
  4. @Mr. Nessuno
    Guarda che ho riadattato il widget facendolo diventare una tabella orizzontale. Mettendo le dimensioni adatte di dovrebbe andar bene. L'articolo è qui.
    A presto :))

    RispondiElimina
  5. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  6. Ciao,
    sempre ottimo lavoro.
    Questo è proprio il widget che mi serviva.
    Nessun problema per le immagini. Avrei solo bisogno di modificare la larghezza del widget stesso

    RispondiElimina
  7. @Antonio
    Per modificare la larghezza puoi modifcare il numero dei post visibili, adesso sono 5 ma puoi passare a sei o quattro oppurte la larghezza delle miniature adesso è di 120 pixel

    RispondiElimina
  8. ok grazie,
    il widget si è adattato in automatico.
    Appena terminati i lavori mi piacerebbe un tuo parere sul blog. Sei la prima fonte di informazioni per le mie creazioni :)

    RispondiElimina
  9. @Antonio
    Senz'altro, guarda che sono sincero :)

    RispondiElimina
  10. Ciao, rieccomi dopo un po' :P
    E' una cosa che sto cercando da parecchio e non ho mai trovato su internet (per blogger, per wordpress invece si). Mi rifesrisco alla possibilità di visualizzare gli ultimi articoli non in senso generale e cronologico, ma per etichette (categorie).

    Sai se esite un metodo o qualche widget in merito? Grazie come sempre in anticipo :)

    RispondiElimina
  11. @L'Altra Notizia
    Non mi ricordo di aver mai visto un widget di quel tipo. E' possibile creare la sitemap del sito per categorie come vedi anche nel mio blog, ma un widget non credo sia stato ancora messo a punto. Nel caso ti farò sapere, ciao

    RispondiElimina
  12. Ciao Parsifal,
    stamattina mi sono accorta che è cambiata la grafica del mio widget Post recenti... Lo preferivo prima, per cui vorrei provare a personalizzare il tuo.
    Come posso fare in modo che i titoli siano in grassetto?

    RispondiElimina
  13. @Marguerite N.
    Se ti riferisci al widget di questo articolo lasci stare la riga di codice
    aBold = true;
    per i titoli non in grassetto dovrebbe invece diventare
    aBold = false;

    RispondiElimina
  14. Ari-Scusami Parsifal
    ari-eccomi nell'articolo giusto per il mio uso
    con gli articoli disposti in verticale.

    Non mi era chiaro come inserire il testo ed il Titolo
    sotto le miniature invece che a destra,
    visto che la larghezza della mia colonna
    è sufficiente a tenere le immagini
    ma non anche a seguire a destra, i testi degli articoli ?

    Ciao e grazie come sempre
    Daniele.

    RispondiElimina
    Risposte
    1. Si tratta di un articolo di quasi 5 anni fa e non mi ricordo bene :)
      Comunque vai in questa pagina
      https://sites.google.com/site/ideepercomputeredinternet/Home/scriptarticolirecenti.txt
      Scaricherai un file di testo. Aprilo e vedrai un codice javascript. I contenuti sono stati inseriti tramite una tabella che inizia con < table > e finisce con < /table >
      Le righe iniziano con < tr > e terminano con < /tr > mentre le celle, i singoli elementi della tabella sono racchiusi tra < td > e < /td >.
      ll primo elemento è l'immagine che è inserita al primo posto della prima riga. Dovresti provare a inserire la parte del titolo nella seconda riga cioè dopo la chiusura < /tr >.
      Non è cosa semplicissima ma spero di averti dato almeno una idea di come fare. Ti potrebbe essere utile anche questo post
      http://www.ideepercomputeredinternet.com/2011/10/come-inserire-nel-blog-una-tabella-di.html
      in cui c'è un esempio di codice di tabella
      @#

      Elimina
    2. Ti ringrazio !
      ora ci provo...

      Nel frattempo
      se dovessi fare "una brutta fine"
      per caso sai di qualcosa di simile (molto leggero e semplice)
      più aggiornato ?

      Ciao
      Daniele

      Elimina
    3. Effettivamente
      non è un'operazione, per me, da poco conto :(

      Andandoci piano piano a piccoli passi
      e con la pazienza che non basta mai!!

      Forse posso riuscirci con l'aiuto di
      un editore di linguaggi di programmazione
      dove evidenziano meglio, anche ad esempio con i colori e le indentazioni.
      Quale editori mi suggeriresti suggerire ?

      Anche sotto linux,
      ad Esempio con Bluefish non ho ottenuto nessun aiuto cambiamento nel testo.
      Forse dovrei cambiare l'estensione .txt in .html e qualcos'altro ?
      che io amo ed uso ?

      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.