Pubblicato il 15/02/11 - aggiornato il  | 28 commenti :

Slideshow di miniature e riassunto con link ai post.

In Blogger esiste lo splendido widget dello slideshow degli ultimi post che mostra gli ultimi articoli in verticale, ottimo per essere inserito in una sidebar. Mi è stato più volte chiesto se esisteva un analogo gadget in orizzontale. Al momento non mi risulta che qualche sviluppatore si sia cimentato con successo in questa realizzazione. Quello che presenterò adesso è un widget di uno slideshow con collegamento ai post, non ai più recenti acquisiti dai feed, ma solo ad alcuni particolarmente interessanti che vogliamo porre in primo piano.
In realtà non si tratta neppure di uno slideshow ma di una rotazione di articoli con effetto slide. Come è mia abitudine ho pubblicato una
Il gadget è visibile nella sidebar in alto a destra e mostra a rotazione gli articoli linkati con effetto scorrimento
slideshow miniature blogger
E' visibile la scritta Leggere tutto… per aprire l'articolo collegato. Può essere utilizzato pe richiamare alcuni post del blog che vogliamo porre all'evidenza dei lettori e dei motori di ricerca. Ricordo che ai fini SEO è particolarmente importante linkare un post in Home Page per favorirlo nel posizionamento. L'installazione segue i soliti canoni. Si va su Design > Modifica HTML e si cerca la riga </head>. Subito sopra si incolla questo codice
<!--Galleria Slideshow Inizio-->
<style type='text/css'>
#thumbslide { width: 200px; height: 220px; border: 1px solid #dddddd; background-color: #ffffff; }
#thumbslide a {margin-right:6px; background: #CCCCCC; color:#333333;
float:right; font-size:12px; margin-top:6px; padding:2px;
}
#thumbslide a:hover {text-decoration: none; background: #C4C4C4;}
#thumbslide div { color:#333333; font-size:12px; height:210px; padding:8px; text-align:left; width:190px; margin-top:0px; font-family:Arial,helvetica,sans-serif;}
thumbtitle{font-family:Arial,helvetica,sans-serif; font-size:13px; font-weight: bold;}
#thumbslide div img { background:#FFFFFF; border:1px solid #F4F4F4; float:left;
height:80px; margin:2px 8px 0 0; padding:3px; width:80px;}
#IPCEIbck{background: #f2f2f2; padding-left: 4px; width: 80px;
#thumbslide div { top: 0; left: 0 }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js' type='text/javascript'/>
<script type='text/javascript'>
$(&#39;#thumbslide&#39;).cycle({
fx: &#39;scrollLeft&#39;,
timeout: 6000,
delay: -3000
});
</script>
<!--Galleria Slideshow Fine - www.ideepercomputeredinternet.com-->
e si Salva il modello. I parametri evidenziati di rosso possono essere personalizzati in funzione del layout del blog e dei nostri gusti personali. Non sto ad analizzare ogni singola possibile modifica, ricordo solo il significato di alcuni parametri e attributi
  1. width è la larghezza mentre height è l'altezza. Il loro valore si misura in pixel (px) come lo spessore dei bordi (border)
  2. #thumbslide a { rappresenta lo stile della parte interna dell'elemento mentre #thumbslide { quello della parte esterna. #thumbslide a:hover { denota lo stile quando viene puntato con il mouse.
  3. I colori sono rappresentati da codici esadecimali come questo #F4F4F4; e possono essere variati a piacere. Si possono usare anche i loro nomi in lingua inglese; background rappresenta lo sfondo dell'elemento
  4. margin e padding sono la distanza rispettivamente esterna e interna cui sono vincolati gli elementi. Se ci sono più numeri, il primo rappresenta la distanza della parte alta quindi, gli altri, la distanza delle altre direzioni in senso orario
  5. family-font sono le famiglie di caratteri mentre font-size la loro dimensione sempre in pixel.
  6. solid rappresenta lo stile del bordo
Per l'inserimento del widget vero e proprio si va su Design > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla il seguente codice
<div id="thumbslide"><div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>
<div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>
<div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>
<div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>
<!-- Tutti gli altri post che vogliamo -->
</div><div id="IPCEIbck"><a href="http://goo.gl/MwGeE"><img src="http://goo.gl/LKyZA" /></a></div>
dove si inseriscono i dati delle miniature e dei post che vogliamo visualizzare con questo meccanismo:
  1. In URL IMMAGINE si incollano gli URL delle immagini che abbiano precedentemente caricato su Picasa, SkyDrive o DropBox 
  2. In TITOLO POST mettiamo il titolo dell'articolo mentre in RIASSUNTO inseriamo poche righe di sommario. Non può essere troppo lungo e in ogni caso dipende dalle dimensioni che abbiamo scelto per il widget
  3. In URL ARTICOLO mettiamo l'indirizzo del post che vogliamo linkare
  4. Leggi tutto può essere sostituito da una espressione analoga
Si possono inserire tutte le immagini e tutti i collegamenti che vogliamo incollando altre righe con questa sintassi
<div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>

sempre però prima della linea finale </div><div id="IPCEIbck"><a href="http…


28 commenti :

  1. uff una cosa del genere ma a miniature affiancate sarebbe perfetta per me :)

    RispondiElimina
  2. Come direbbe Galeazzi: sei veramente mitico. Solo che ci fai venire voglia di cambiare spesso look al blog!!!!

    RispondiElimina
  3. @Dea
    Il widget dello slideshow orizzontale non è ancora disponibile. Se qualcuno in qualche parte del mondo riesce a realizzarlo credo che lo verrò a sapere e lo riproporrò. Per adesso questo passa il convento...

    @Stefano
    Non esageriamo... anche se ho colto l'ironia :)

    RispondiElimina
  4. Interessante questo widget, penserò se inserirlo anche io. Non sono molto brava con i codici html, tutt'altro. Grazie per l'articolo.

    RispondiElimina
  5. Ciao Parsifal, magari l'ideale sarebbe uno slideshow orizzontale delle news come quello presente sulla homepage di libero...per te nulla è impossibile...;)

    RispondiElimina
  6. Il widget è ok, ma ha un problemino.
    Quando si entra nella pagina questo si apre a rilento, mostrando tutti gli articoli inseriti in verticale... guarda tu stesso. Grazie

    http://www.tifosointerista.com/

    RispondiElimina
  7. @Admin Inter
    Mi sembra tutto OK. La lentezza è fisiologica nelle personalizzazioni di questo genere e dipende anche dagli altri elementi del blog

    RispondiElimina
  8. Come colorare "leggi tutto" il questo Slideshow? Grazie.

    RispondiElimina
  9. @redazione
    Adesso mi metti in difficoltà perché non mi ricordo bene. Prova a cambiare i codici CCCCCC, 333333 e f2f2f2.
    Ciao

    RispondiElimina
  10. @Tobia Alberti
    Si può mostrare solo in homepage attraverso l'utilizzo dei tag condizionali
    http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html
    Scegli l'opzione Solo in Homepage che è la prima riga.
    Per la domanda nel secondo commento in linea di massima leggiti il punto secondo di questo post
    http://www.ideepercomputeredinternet.com/2011/06/linee-guida-su-come-usare-questo-blog.html
    nel concreto però visto che dici che è antiestetico prova a togliere l'ultima riga
    <div id="IPCEIbck"><a href="http://goo.gl/MwGeE"><img src="http://goo.gl/LKyZA" /></a></div>
    però onestamente non mi ricordo bene.

    RispondiElimina
  11. Deduco che un widget simile, ma in orizzontale ancora non sia stato realizzato, vero?

    RispondiElimina
  12. @Alfonso Russo
    Esiste solo questo
    http://www.ideepercomputeredinternet.com/2011/05/slideshow-orizzontale-degli-ultimi.html
    (ch'io sappia ... )

    RispondiElimina
  13. Signor Ernesto volevo ancora una volta ringraziarla per il suo contributo, non ho mai trovato un Sito che spieghi i procedimenti relativi all'installazione in maniera più chiara .

    Se il mio sito ha questa veste grafica, il merito è sopratutto suo ( http://ritmonuevoitaly.blogspot.com/ ) non appena terminerò la parte grafica non esiterò a ringraziarla ufficialmente sul mio Blog.

    La ringrazio ancora e le lancio una sfida :

    data la mia poca dimestichezza con il codice ho provato ad installare questo widget ( http://www.fedeweb.net/tutorial-jquery-pannello-effetto-slide/ ) ma non ci sono riuscito sopratutto a causa della mia ignoranza ma, ritengo, anche delle poca chiarezza nell'esposizione, se lei lo ritiene utile, si potrebbe scrivere un articolo per adattare questo effetto a Blogger ?

    La ringrazio ancora

    Piero

    RispondiElimina
  14. Buongiorno Ernesto, come posso fare per fare in modo che quando cliccano su continua a leggere si apra un altra finestra?

    Grazie mille sei fantastico!!

    RispondiElimina
    Risposte
    1. @# Questo è difficile farlo e poi non mi sembra neppure utile

      Elimina
    2. OK, era un pensiero... grazie del consiglio :)

      Elimina
  15. E invece per differenziare la grandezza dei caratteri del titolo e descrizione, come si fa?

    RispondiElimina
    Risposte
    1. @# I tag che devi modificare sono
      font-size:12px; e
      font-size:13px;
      Il 13 pixel si riferisce al titolo

      Elimina
    2. Scusa Ernesto se ti stresso, siccome mi piace moltissimo questo widget...ho provato a cambiare il colore e ho visto che cambiano tutti e due, non è possibile cambiare il colore differente per il titolo e per la descrizione? fare in grassetto il titolo?

      Grazie in anticipo

      Elimina
    3. @# Il grassetto lo puoi inserire con questo tag
      font-weight:bold;
      ma nel titolo c'è già. Lo puoi mettere anche nella descrizione incollandolo dopo
      font-size:12px;
      Anche i colori possono essere cambiati. Devi modificare color:#333333; mentre per il titolo puoi inserire color:#003366; o altro colore dopo font-family:Arial,helvetica,sans-serif;
      Però questi parametri vengono in genere anche ereditati dal modello e quindi talvolta non prendono. Puoi ovviare inserendo i colori in questo modo color:#003366 !important;

      Elimina
    4. Perfetto!!!! Sei bravissimo!!!
      Senti, qualche giorno fa ho fatto una modifica al mio sito con un tuo "effetto speciale", cioè quello dei post infiniti o pagine infinite, per intenderci praticamente quando scendi i post escono sempre e non terminano mai. Siccome sto registrando il blog al tribunale come testata giornalistica, voglio togliere quella modifica ma non riesco a ritrovare il tuo post dove c'è il codice. Mi puoi aiutare?

      Grazie
      Daniela

      Elimina
    5. @# http://www.ideepercomputeredinternet.com/2013/02/infinite-scrolling.html

      Elimina
  16. Ciao Ernesto, ti chiedo una cortesia, aiutami ti prego :(
    Ho messo il codice in un widget con dimensioni maggiori, 300X..
    Per allargare i margini riesco modificando i valori #thumbslide { width: 200px; height: 220px; border: 1px solid #dddddd; background-color: #ffffff; }

    Ma il testo non riesco a "allargarlo, cioè rimane come se lo spazio fosse ridotto. Quali valori devo modificare?

    Dany

    RispondiElimina
  17. Fatto, scusami ci sono riuscita.
    Grazieeeeeeee :-)

    RispondiElimina
  18. Invece mi interesserebbe capire come posso diminuire lo stazio che c'è tra il titolo e la descrizione...

    Dany

    RispondiElimina

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