Pubblicato il 30/12/12e aggiornato il

Widget delle miniature in orizzontale degli ultimi post.

Come installare il gadget delle Miniature degli Ultimi Post inserite in una tabella orizzontale da mostrare subito sopra o subito sotto l'elemento Post sul blog.
Mostrare un gadget degli Ultimi Articoli è una necessità per tutti i blog perché il lettore deve poter accedere facilmente ai contenuti più freschi che sono stati pubblicati. Ci sono moltissimi widget che hanno questa specifica funzionalità. Si va dal semplice Elenco Verticale degli Ultimi Post al Widget degli Ultimi Articoli con Miniature passando per lo Slideshow Verticale o lo Slideshow con Easy Slider.

Obiettivo di questo articolo è quello di presentare gli Ultimi Articoli attraverso le miniature delle loro immagini o dei loro video di Youtube in una tabella orizzontale che può essere inserita subito sopra l'area del post o subito sotto di essa. Mi baserò su uno script di Blogger Plugins che ho tradotto in italiano così come feci a suo tempo per il gadget degli Articoli Simili con Miniature.

ultimi-post-miniature

Nello screenshot precedente si vede che ho inserito il widget subito sopra l'area del post e che, quando si punta con il mouse una miniatura, viene mostrato il tooltip con il titolo del post a cui è collegata. Per l'installazione di questo widget non occorre modificare il template. Si va semplicemente su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla il seguente codice

<div id='bp_recent'></div>
<script style='text/javascript' src='https://sites.google.com/site/scriptperilblog/javascript-2/tabella-ultimi-post.js'></script>
<script style='text/javascript'>
var numberOfPosts = 6;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 80;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://www.ideepercomputeredinternet.com/feeds/posts/default?max-results=6&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Si clicca su Salva e con il mouse si posiziona sopra o sotto l'elemento Post sul blog

posizionamento-widget

Dopo il drag & drop si deve andare su Salva disposizione. Lo script permette di fare numerose personalizzazioni come mostrare la data, il titolo, lo snippet, il Read More ma se si vuole mantenere l'aspetto della tabella di miniature orizzontali ci si deve limitare a scegliere la dimensione delle miniature delle immagini in funzione della larghezza del nostro layout. 80 pixel è quella proposta. Va inoltre configurato il numero di miniature da visualizzare che deve essere modificato nelle due occorrenze. 6 è quello proposto. Modificando numero e larghezza delle miniature si potrà inserire al meglio la tabella nel layout del nostro blog. Dovrà inoltre essere inserito l'URL del vostro blog.

Osservazioni conclusive
Nei post in cui non sono presenti immagini sarà visualizzata questa immagine di default. Per modificarla occorre scaricare il file javascript

https://sites.google.com/site/scriptperilblog/javascript-2/tabella-ultimi-post.js

modificarlo, caricarlo su Google Sites quindi sostituirne l'URL dopo aver acquisito quello nuovo. Se si possiede un blog con dominio personalizzato come è noto i file caricati su Google Sites non funzioneranno. In questo caso dovrà sempre essere scaricato lo stesso javascript che però dovrà essere caricato su DropBox o su Google Code.

Invece di mostrare tutti gli Ultimi Articoli si può scegliere di visualizzare le miniature relative agli Ultimi Post pubblicati con una data etichetta. Se si sceglie questa opzione basta modificare l'URL dei feed

http://www.ideepercomputeredinternet.com/feeds/posts/default/-/nome-etichetta

dove ovviamente dovrà essere modificato l'indirizzo del sito e il nome della etichetta.




14 commenti :

  1. Molto simile a quello che ho installato da me. :)

    Ciao Parsi.

    LeNny

    RispondiElimina
    Risposte
    1. @LeNny
      Ne ho proposti talmente tanti che trovarne sempre di originali è un'impresa :)

      Elimina
    2. Per quello ti leggiamo... Ci hai abituato all'imprese. :D

      Elimina
  2. ci credi Ernesto se ti dico che nel mio blog, nonostante lo abbia inserito correttamente in un html, questo widget non si vede? :(

    RispondiElimina
    Risposte
    1. @GaiaVincenzi
      Per forza, hai un blog con dominio personalizzato e devi caricare il javascript su Dropbox. Oppure hai un altro widget con il feed dei post e due widget con lo stesso feed sono spesso incompatibili. Potresti provare a disintallarne uno per poi provare con l'altro. Alternativamente mostrare gli ultimi post relativi a una sola etichetta.

      Elimina
  3. una straneza, il widget si vede soltanto sul mio computer, dove faccio le modifiche del template, su altri non si vede. Sai dirmi perchè?
    Premetto che ho installato il widget del ultimi post classico di blogger, ma anche se lo disattivo non si vede su ltri computer.
    Ho provato anche a modificare il feed per una specifica etichetta.
    Grazie, spero che mi possa aiutare come sempre.

    RispondiElimina
    Risposte
    1. @MarcoRinaldi
      E' una cosa strana. Non saprei proprio dirti. Quando ci sono i JSON vale a dire i feed si hanno delle stranezze ma di questa non riesco a dare una spiegazione logica. Dovrei vedere de visu ma ovviamante non si può fare :)

      Elimina
    2. Dopo un pomeriggio di prove ho risolto il problema causato da un errore del javascript.
      Grazie lo stesso.
      PS ti allego questo interessante link http://www.helperblogger.com/2012/04/4-in-1-social-subscribing-slide-out.html per inserire una barra scorrevole verticale con Facebook, Twitter, Google+ e Feed.
      Penso che non debba mancare tra i widget del tuo blog.

      Elimina
  4. Non mi riesce a farlo funzionare per etichetta. Io ho questa url del feed:
    script src='http://www.nomedelblog.com/feeds/posts/default?max-results=6&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'
    Ho provato dopo default a inserire /-/etichetta ma mi sparisce il widget.
    Come devo fare?
    Grazie

    RispondiElimina
    Risposte
    1. @MarcoRinaldi
      Non è che hai sul blog un altro widget con lo stesso URL dei feed e la stessa etichetta? Ricordati anche di postare il javascript su Dropbox se hai un dominio personalizzato.

      Elimina
    2. Ho un dominio personalizzato e modifico il javascript. Sul blog ho solo il widget di blogger post più popolari, nemmeno uno con il feed con la stessa etichetta.
      In ogni caso dovrei soltanto aggiungere /-/etichetta do default e lasciare invariato il resto?

      Elimina
    3. @MarcoRinaldi
      Se hai un dominio personalizzato devi scaricare il javascript e caricarlo su Dropbox o Google Code quindi incollare il vero URL. L'indirizzo dei feed va bene

      Elimina
    4. nel mio caso noto che non si vedono le immagini caricate su dropbox e inserite tramite copia e incolla del link pubblico ... qualcuno sa dirmi come risolvere?

      Elimina
    5. Se il problema è quello carica le immagini su Picasa e prendi il link diretto da lì.
      @#

      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.