Pubblicato il 06/06/09 - aggiornato il  | 35 commenti :

Come inserire in modo orizzontale il widget degli ultimi articoli con miniature nell’header del blog.

In un precedente articolo ho presentato un widget che inserisce le miniature degli ultimi post nella sidebar del blog e mette i titoli degli articoli sulla destra delle miniature delle immagini. Le ultime due righe del codice ricordo che erano queste
</script>
<script src="http://tinyurl.com/pntst6" type="text/javascript"></script>
Per quanto riguarda la possibilità di personalizzazioni vi rimando all’articolo citato. Su precisa richiesta di un commento riporto anche il codice per inserire il widget in modo orizzontale sotto l’header del blog o anche al posto dell’header. Basta sostituire l’URL della ultima riga del codice dello script colorato di rosso con quest’altro URL
http://tinyurl.com/ovhkxw
Eventualmente si può intervenire anche sulla dimensione delle immagini mettendo imgwidth = 120 e imgheight = 90. In numposts si deve scegliere il numero che è più adatto al nostro layout.



Se il widget si inserisce in una tabella  il codice cambia un po’. Per farlo si va su Layout > Aggiungi un gadget > HTML/Javascript e si può anche tralasciare di inserire il titolo. In Sezioni del sito si incolla
<table style="background-color: #ffffff;">
<tr>
<td style="margin-left: 20px; margin-top: 10px;" align="left"><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 = 900;
cellspacing = 7;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 113;
imgheight = 100;

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

text = "comments";
showPostDate = true;
summaryPost = 0;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = "  ";

numposts =6;
home_page = "http://miosito.blogspot.com/";
</script>
<script src="http://sites.google.com/site/ideepercomputeredinternet/script-1/scriptminiatureorizzontalisommario.js" type="text/javascript"></script>
</td>
</tr>
</table>
<div style="font-size:70%;text-align:right"><p> <a href="http://is.gd/22ilw">Install widget</a> </p></div>


In questo caso il risultato è più compatto. I dati in rosso devono essere modificati a seconda delle esigenze del nostro modello.


  • 900 è la larghezza del widget
  • 113 e 100 sono la larghezza e l’altezza delle miniature
  • 6 è il numero di post che si vuole mostrare
  • #ffffff è il colore dello sfondo, in questo caso bianco
  • 7 è lo spazio in pixel tra le varie miniature
Per vedere come è il risultato in questo caso date uno sguardo al mio blog cavia Photosvideosandmore.
Se volete visualizzare solo le immagini senza titolo del post e sommario sostituite l'URL
http://sites.google.com/site/ideepercomputeredinternet/script-1/scriptminiatureorizzontalisommario.js 
con il seguente

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


35 commenti :

  1. Ciao Ernesto,
    ho fatto la modifica, ma, mi sembra un po' pesante (almeno il carico della pagina), provo a tenerlo un paio di giorni e vedo le visite come vanno, altrimenti, mio malgrado lo toglierò...

    Ciao e grazie

    RispondiElimina
  2. @Mr Nessuno
    Di niente. Fammi sapere. Ciao

    RispondiElimina
  3. @ parsifal32
    sembra si stia integrando bene, ed inoltre, ho ricevuto diversi feedback positivi dai lettori, quindi, vedo di tenerlo e magari alleggerisco il carico lavorando sul numero dei post e i widget sulla home del blog.

    Ciao Ernesto, e grazie ancora :)

    RispondiElimina
  4. @Carlo
    Ho visto il tuo blog Out of The Way e devo dire che ha il widget dà un colpo d'occhio notevole. Non mi sembra poi neppure tanto pesante. Forse pesa più il mio header :)

    RispondiElimina
  5. Riprendo questo tuo vecchio articolo nella speranza di scoprirti "aggiornato". Innanzitutto ti ringrazio per questa idea poi invece ti vorrei chiedere se sai come fare a visualizzare SOLO le immagini degli ultimi post perché non mi interessano sommari e nemmeno i titoli. Il mio blog si occupa di fornire film ed altro materiale scaricabile per cui dalla locandina si capisce subito di che genere di film si parla. Che ne dici? Si può fare? Ho provato ad aprire il file del programma e a modificare le variabili (è normale che se vado sul link tinyurl mi scarichi il file txt? Non dovrebbe essere .js?) e a cancellare la var postTitle ma l'unico risultato è stato di non visualizzare più il Widget...tu che dici?

    RispondiElimina
  6. @takicardia
    Per mettere solo le immagini occorre modificare lo script in modo sensibile. Senza impegno vedo cosa si può fare. Il javascript l'ho caricato su un file di Google Sites come testo quindi è normale che si scarichi in txt. Era un espediente che usavo in passato.
    Adesso questo metodo non lo uso più perché si possono caricare anche i file .js se si va su Schedario.
    Oltre a eliminare var postTitle occorrerebbe togliere tutto il (document write) dopo la parte che inserisce l'immagine.
    Ciao

    RispondiElimina
  7. Grazie, io ci provo ma se vedi un fungo atomico provenire dalla romagna sappi che è il mio cervello o il mio computer (a scelta) che è esploso XD Se ce la fai prima tu fammi un fischio. Grazie di nuovo.

    RispondiElimina
  8. @takicardia
    Ho già fatto. Se adesso copi lo stesso codice con l'altro URL che ho inserito nel post vedrai che vedi solo le miniature.
    Dovrebbe funzionare. Fammi sapere

    RispondiElimina
  9. Grazie per la rapidità ma non funziona...non so se sbaglio io oppure se davvero non va, non vorrei fare spam ma se vuoi dare un'occhiata al mio blog per vedere come ho risolto x ora l'indirizzo è downloadtaky.blogspot....
    Per ora ho "settato" i colori dei caratteri come quello di sfondo così si confondono e non si vedono ma temo in una maggiore penalizzazione di Google per il testo nascosto. Non so, dovrò inventare qualche cosa di nuovo, tu che dici?
    Grazie di nuovo!

    RispondiElimina
  10. @takycardia
    Sorry, avevo ricaricato lo stesso script :-))Speriamo che sia la primavera :-) e non l'arteriosclerosi
    Adesso dovrebbe funzionare.
    Ciao

    RispondiElimina
  11. Sei un grande! Se passi dalla romagna pizza, caffé ammazza caffe ecc ecc sono d'obbligo! Visto che ci sono ( e dirai...che 2 xxxx) Mi visualizza anche un bordino piccolo ma cè sotto l'immagine, come lo elimino? Tradotto dentro ogni riquadro dell'immagine (le celle della tabella) c'è l'immaginina (mamma mia quante ripetizioni) e un bordino di..non so, 5px...Come lo faccio fuori? Ho già settato le dimensioni dei caratteri a 0 e le immagini le ho fatte quadrate sperando che sparisse...

    RispondiElimina
  12. @takicardia
    E' una cosa veramente minima che non si nota e credo dipenda dal tuo template, cioè dalle impostazioni dei fogli di stile sull'hover dei link, perché nel test che ho fatto su un mio blog non compare

    RispondiElimina
  13. caro parsifal, ti riscrivo perche un problema non riesco a risolverlo. salto i complimenti e vado sul punto. ho un blog su template ComicPress (adattato da wordpress) e molto personalizzato (vu.vu.vu edicoladipinuccio punto net). il tuo widget per gli ultimi post in orizzontale mi risolve (rebbe) ogni problema. cosi lo installo e per un po (a volte) funziona, tanto che lo customizzo (colori larghezza ecc) ma poi niente piu da fare. lo stesso widget lo ho ho installato su un blog di prova basato sullo stesso template, e ... funziona...
    sono disperato.
    come risolvere la cosa? spero possa aiutarmi. grazie din d'ora

    RispondiElimina
  14. @la rassegna...

    Prova a sostituire questo URL
    http://sites.google.com/site/ideepercomputeredinternet/script-1/scriptminiatureorizzontalisommario.js
    con quest'altro
    https://sites.google.com/site/scriptperilblog/widget-1/scriptminiatureorizzontalisommario.js
    ma in questi casi può dipendere dal fatto che hai più di un widget basato su JSON che prende gli stessi feed relativi agli ultimi post.

    RispondiElimina
  15. Ciao, volevo chiederti se è possibile centrarlo. Al momento si allinea a sinistra.

    RispondiElimina
    Risposte
    1. @GiancarloChieco
      Non ne sono sicuro ma essendo una tabella prova a inserire
      <center> all'inizio del codice e </center> alla fine
      Mi riferisco ovviamente al codice dentro Sezioni del sito del gadget HTML/Javascript

      Elimina
  16. Ciao parsifal, il tuo blog è una manna. Vorrei chiderti però un aiuto. Ho inserito il widget di questo articolo ma non ho capito come fare per le immagini, se devo sostituirle io manualmente ogni volta o se c'è un modo per automatizzarle, perchè mi vengono fuori delle immagini preimpostate. Scusa la domanda idiota ma sono alle prime armi :D
    Grazie,
    Max!!

    RispondiElimina
    Risposte
    1. @HulkSpakk
      Se vedi le immagini di default invece di quelle presenti nel tuo post ci possono essere varie cause
      1)Hai impostato i feed fino all'intervallo del Read More e le immagini sono nella seconda parte.
      2)Hai impostato i feed con la opzione Breve invece che completa
      3)Stai postando con Windows Live Writer
      4)Usi Feedburner con l'opzione Summary
      In sostanza c'è un problema di feed che non vengono acquisiti integralmente e correttamente.

      Elimina
    2. Ciao, continuo a non riuscire.
      Ho preso il codice che hai postato in questa pagina e l'ho inserito seguendo "Layout > Aggiungi un gadget > HTML/Javascript" e salvando (ovviamente ho messo il nome del mio blog lì dove richiesto.

      Non credo di utilizzare "feedburner", magari mi potresti dirmi come controllare questo e anche se utilizzo "windows live writer"...

      Elimina
  17. Scusami Parsifal
    ma non mi è chiaro come inserire il testo sotto le miniature invece che a destra?

    RispondiElimina
    Risposte
    1. Il titolo del post si dovrebbe vedere sotto la miniatura e non a destra. Prova a diminuire questo valore imgheight = 100;
      @#

      Elimina
    2. Come non detto,
      chiedo scusa.
      Mi riferivo all'articolo con la disposizione in verticale e non orizzontale:
      Come inserire il widget degli ultimi articoli corredati da miniature delle immagini in un blog su Blogger.
      dove devo disporre il tutto in una colonna non gigantesca,
      risultante con le immagini a sinistra e i Titoli e il testo a destra
      che sforano dalla colonna stessa !
      Grazie e ciao
      Daniele

      Elimina
  18. Come fare di mettere articoli da un altro sito non da blogger...

    RispondiElimina
    Risposte
    1. Un widget con gli ultimi articoli di un altro blog non di Blogger? Bisogna avere l'URL del blog ma non credo possa funzionare questo gadget. Potresti provare con qualche widget in cui sia sufficiente l'URL dei feed
      @#

      Elimina
  19. buonasera Ernesto. Ho usato il codice e visualizzo gli ultimi post solo che non riesco a metterli in orizzontali. Non ho capito dove inserire il codice che riporti in questo articolo
    grazi mille soprattutto per il lavoro che fa.

    RispondiElimina
    Risposte
    1. Dipende dal modello che si è scelto. Per visualizzarlo in orizzontale, l'elemento HTML/Javascript dovrebbe essere trascinato in Layout nella zona sotto l'Intestazione. Però ci sono Temi in cui questo non è fattibile. Considera che il codice di questo post è del 2009, di undici anni fa!
      @#

      Elimina
    2. infatti, Ernesto, sto impazzendo alla ricerca di un gadget simile. Vorrei solo mettere una griglia post o delle icone degli ultimi post in orizzontale. Io curo un blog dove racconto del mio paesello in Calabria e volevo renderlo più carino. Il blog è il seguente: https://ilpaesediplati.blogspot.com

      Elimina
    3. Prova questo codice che è più recente
      https://www.ideepercomputeredinternet.com/2015/10/widget-orizzontale-miniature-ultimi-post-blogger.html
      e spiega anche il posizionamento del widget. In alternativa prova questo
      https://www.ideepercomputeredinternet.com/2012/12/widget-ultimi-post-miniature.html
      @#

      Elimina
  20. buongiorno Ernesto, solo avvisarti che questo funziona benissimo: https://www.ideepercomputeredinternet.com/2012/12/widget-ultimi-post-miniature.html

    l'unica cosa non riesco a centrarlo
    intanto grazie

    RispondiElimina
    Risposte
    1. Ho provato a centrarlo ma non ci sono riuscito :(
      L'unica è quella di ridimensionare le miniature per prendere tutta la larghezza del layout
      @#

      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