24 aprile 2012

Slideshow degli Ultimi Post con immagini e bottoni di navigazione.

I widget visualizzati sotto forma di slideshow piacciono moltissimo soprattutto alle blogger donne ma anche gli uomini non li disdegnano affatto. Ci sono essenzialmente due diversi tipi di gadget per slideshow. Quelli che mostrano le immagini di alcuni post con i relativi link che si vogliono tenere sempre in primo piano e quelli che invece si aggiornano con nuovi contenuti tutte le volte che ci sono nuove pubblicazioni. Questi ultimi vengono chiamati anche Content Sliders.

Chi ha un blog su Wordpress ha l'imbarazzo della scelta tra una grande quantità di plugin a disposizione. La maggior parte di questi sono creati utilizzando la libreria JQuery. Per gli utenti di Blogger bisogna invece trovare il codice adatto da incollare nel modello e nell'elemento HTML/Javascript.

Vado adesso a illustrare uno slideshow che mostra automaticamente gli Ultimi Articoli pubblicati e che è visibile con Chrome, Firefox, Opera e Internet Explorer 9. Il titolo del post sarà mostrato in un box scuro con effetto trasparenza e il suo colore sarà ereditato dal colore del titolo dei widget del blog in cui viene installato. Tale box sarà visibile in alto a destra della prima immagine inserita nell'articolo

slideshow-ultimi-articoli

Sono anche presenti due frecce di navigazione per spostarsi manualmente nei vari post. Cliccando sull'immagine ovviamente si aprirà l'articolo corrispondente. Di default ci sarà una riproduzione automatica con scorrimento degli ultimi post pubblicati



Andate su Modello > Backup/Ripristino e salvate il modello completo per sicurezza se le modifiche non andassero a buon fine. Ritornate su Modello > Modifica HTML > Procedi e cercate la riga

]]></b:skin>

Si tratta della fine dei CSS del template. Subito sopra incollate questo codice

/* EasySlider for Blogger Start - by http://www.ideepercomputeredinternet.com */
#slide-container {
    height: 360px;
    position: relative;
    width: 480px;
}
#slider {
    height: 360px;
    left: 35px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 480px;
    font-family: calibri;
}
.slide-desc {
    background: transparent url(https://lh4.googleusercontent.com/-wA8VSR8Q6l0/T5atzJQVooI/AAAAAAAAXvg/e-_lnAMmQQE/s5/darkbg.png) repeat scroll 0 0;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 0;
    width: 200px;
    z-index: 99999;
}
.slide-desc h2 {
    display: block;
}
.crosscol .widget-content {
    position: relative;
}
#slider ul, #slider li,
#slider2 ul, #slider2 li {
    margin: 0;
    padding: 0;
    list-style: none;
}
#slider2 {
    margin-top: 1em;
}
#slider li, #slider2 li {
    width: 480px; /* Larghezza e Altezza Area Widget */    height: 360px;
    overflow: hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev {
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    text-indent: -9999px;
    top: 71px;
    z-index: 1000;
}
#nextBtn, #slider1next {
    left: 520px !important; /* Posizionamento frecce */}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
    display: block;
    height: 77px;
    left: 0;
    position: absolute;
    top: 175px;
    width: 30px;
    z-index: 1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a {
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(https://lh5.googleusercontent.com/-2-ZOSRmwDmE/T5auZyj_v4I/AAAAAAAAXvw/os-cKXRcLBU/s77/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a {
    background: url(https://lh3.googleusercontent.com/-thJtQxLma8w/T5auFlEOtLI/AAAAAAAAXvo/3UrK7KogMC0/s77/next.png) no-repeat 0 0;
}  
/* EasySlider for Blogger End */

Le personalizzazioni che si possono fare sono molte. Ne elenco qualcuna:
  1. La larghezza e l'altezza del widget (480 e 360 pixel)
  2. La posizione verticale delle frecce di navigazione top: 175px;
  3. Lo sfondo trasparente dell'incipit del testo che è dato dall'immagine il cui URL è in blu
  4. Gli URL delle altre immagini in viola sono le due frecce di navigazione
  5. Il posizionamento delle frecce di navigazione in orizzontale left: 35px;

Si cerca adesso la riga </body> e, subito sopra, si incolla quest'altro codice

<!-- EasySlider for Blogger Start - by http://www.ideepercomputeredinternet.com -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://www.isoladeifamosi-2009.it/upload/eS.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<!-- EasySlider for Blogger End -->

Finalmente si salva il modello. Si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla quest'ultimo codice

<div id="slider">
<script style="text/javascript" src="http://www.isoladeifamosi-2009.it/upload/eS2.js"></script>
<script style="text/javascript">
var numposts_gal = 8;
var numchars_gal = 180;
var random_posts = false;
</script>
<script src="http://design-prova.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=9999"></script>
</div>

dove devono essere personalizzati i seguenti parametri:
  1. Il numero di articoli da mostrare -  var numposts_gal = 8;
  2. Il numero di caratteri del riassunto del post - var numchars_gal = 180;
  3. Per mostrare articoli a caso sostituire true a false in var random_posts
  4. Sostituire l'URL del vostro blog a quello colorato di rosso.
  5. L'immagine di default che compare quando non ce ne sono nel post può essere modificata scaricando il file .js colorato di blu e inserendovi l''URL di un'altra immagine. Tale javascript dovrà poi essere caricato su Google Code, Google Sites o DropBox.
Si va su Salva e si posiziona il widget a piacere con l'ausilio del cursore. Se si vuole mostrare solo in un post, solo in homepage o in una pagina statica bisogna usare i tag condizionali da incollare all'inizio e alla fine del secondo codice e mettendoli anche nel modello come illustrato nel post appena linkato.

Fonti| Plugin EasySlider di CSS Globe, script di Abu Farhan e la grafica è di Dante Araujo



123 commenti:

  1. Carino, questo slideshow :)
    Certo che sento sempre dire che Wordpress ha un sacco di plugins e che è un passo avanti a Blogger, sempre e comunque.
    Ma Blogger qualcosa di positivo rispetto a Wordpress ce l'ha?... (Della serie: altrimenti che ci stiamo a fare qui? ^^)

    RispondiElimina
    Risposte
    1. @GiulianaMosetti
      Su Blogger molte cose le fa direttamente Google e non dobbiamo preoccuparcene come se fossimo su Wordpress. Il vantaggio (unico) è questo.

      Elimina
    2. non scambiano l'oro (google) con il piombo :D

      Elimina
  2. ho provato ad inserirla e funziona, ma mi va in contrasto con la slide degli ultimi post che ho nella parte in basso del blog, che però si blocca e non scorre più. C'è un modo per farle funionare correttamente entrambe?

    RispondiElimina
    Risposte
    1. @CINETIK
      Il problema è che tutti e due i widget usano lo stesso feed cioè

      http://cinesuggestions.blogspot.com/feeds/posts/default

      per uno dei due dovresti provare a inserire gli ultimi articoli di una etichetta, per esempio

      http://cinesuggestions.blogspot.com/feeds/posts/default/-/etichetta

      Elimina
  3. Ciao Ernesto, scusami ho un pò di problemi con questo widget, come puoi visualizzarlo di prova sotto ai miei post: www.iconadeironchi.com
    come puoi vedere tra l'immagine di un post e l'altra vi è molto spazio, non si visualizzano le frecce ed il testo è visualizzato male sotto ad ogni post...
    che parametri di grandezza, testo e scorrimento hai usato per questa demo?
    http://design-prova.blogspot.it/2012/04/demo-dello-slideshow-degli-ultimi.html

    io devo farlo della stessa grandezza. grazie

    RispondiElimina
    Risposte
    1. @GaiaVincenzi
      Ho visto, non torna nulla. Se hai copiato bene il codice ci devono essere delle grosse incompatibilità con il tuo modello. In questi casi c'è poco da fare. Sarà perché lo hai messo nel footer, prova a metterlo per pochi secondi sopra l'area del post. Prende tutta l'area, non si vede il riassunto dentro l'immagine, insomma non c'è una cosa che va bene :)

      Elimina
  4. ciao, volevo sapere se è possibile rimuovere le frecce.

    RispondiElimina
    Risposte
    1. @Sairos
      Per nascondere le frecce prova in questo modo. Nel codice ci sono due righe di codice che servono per mostrare le frecce, una è questa

      background: url(https://lh5.googleusercontent.com/-2-ZOSRmwDmE/T5auZyj_v4I/AAAAAAAAXvw/os-cKXRcLBU/s77/prev.png) no-repeat 0 0;

      e l'altra è quest'altra

      background: url(https://lh3.googleusercontent.com/-thJtQxLma8w/T5auFlEOtLI/AAAAAAAAXvo/3UrK7KogMC0/s77/next.png) no-repeat 0 0;

      subito sotto a entrambe incolla questa riga

      display:none;

      prima della parentesi graffa di chiusura del CSS

      Elimina
  5. ciao come puoi vedere nel mio blog: sairosmix non si vede più lo slider e non ho modificato l' html.
    quale potrebbe essere il problema?

    RispondiElimina
    Risposte
    1. @Sairos
      C'è stato un problema di hosting. Sostituisci il codice prima di /body e quello del gadget HTML/Javascript.

      Elimina
    2. Con che cosa gli devo sostituire?

      Elimina
    3. @Sairos #blogger
      Con i nuovi codici che ripostato nell'articolo

      Elimina
  6. ma dov'è la scritta il secondo codice body?? non la trovo :(

    RispondiElimina
    Risposte
    1. @Ritamakeup
      Per trovare una riga di codice, con qualsiasi browser, basta pigiare su F3 o su Ctr+F, e incollare la riga che si vuol trovare. Nel tuo blog, la riga /body è in fondo al modello (esattamente la penultima)

      Elimina
  7. ciao,
    nel mio blog non si vedono ne le frecce ma sopratutto le foto! come puoi vedere www.besanaweb.blogspot.com
    come mai??????????????? :(

    RispondiElimina
  8. @besanaweb
    Mi pare che tu abbia inserito questo widget in uno spazio più stretto di quello necessario. Per questo non si vedono le frecce. Poi hai due slideshow e in questi casi ci possono essere delle incompatibilità.

    RispondiElimina
    Risposte
    1. ciao,
      ma non posso trovare alcuna soluzione?
      ad esempio ho eliminato le frecce come puoi vedere ma le foto rimangono ancora deformate e la descrizione non compare del tutto nello slide!
      come posso fare?

      Elimina
    2. @besanaweb
      Prova a modificare le dimensioni delle immagini. Sono quei numeri colorati di rosso, può darsi che trovi la combinazione giusta di larghezza e altezza.

      Elimina
  9. ok, grazie mille gentilissimo....
    un altro problema è che non è allineato con gli altri gadget della pagina
    che faccio?

    RispondiElimina
    Risposte
    1. @besanaweb
      Il posizionamento e quindi l'allineamento sotto certi limiti può anche essere modificato. Può esserti utile questo post
      http://www.ideepercomputeredinternet.com/2011/05/come-diminuire-lo-spazio-tra-post-e.html

      Elimina
  10. Crazie per ottime cognsigle.....

    RispondiElimina
  11. Scusa come faccio a centrare lo SlideShow che ho inserito sotto l'header?
    link: http://ps3gameita.blogspot.it/
    come vedi il widget è tutto spostato a sinistra

    RispondiElimina
    Risposte
    1. @manager
      Prova a mettere (center) al'inizio del codice inserito nell'elemento HTML e (/center) alla fine dove le parentesi devono essere sostituite dai segni di minore e maggiore.

      Elimina
  12. no mi fa visualizzare il widget al centro, vedo solo il widget con sopra come codice di testo (center) ed alla fine del widget compare il codice di testo (/center)

    RispondiElimina
    Risposte
    1. @Manager
      Tu commenti spesso e per questo ti ringrazio. Mi fai anche molte domande e ti rispondo sempre. Ti chiedo però di prestare maggiore attenzione a quello che scrivo. Visto che non si può postare codice HTML nei commenti così com'è ma si deve convertire, ti ho detto i tag da inserire con l'accortezza di sostituire le parentesi con i segni di minore ( < ) e maggiore ( > ). Purtroppo o non sono stato sufficientemente chiaro o tu non hai capito. Questa seconda ipotesi mi pare la più probabile. Comunque per evitare fraintendimenti ti posto il codice HTML così capisci di sicuro.
      Bisogna incollare <center> all'inizio del codice e </center> alla fine del codice.
      P.S. Non ho testato quindi non sono sicuro che funzioni.

      Elimina
    2. Si scusami non ho potuto aggiornare la mia risposta per problemi con il router di casa, comunque, ho provato a scrivere center e /center con i segni di minore e maggiore. Mi si sposta solo lo slide ma le frecce rimangono nella stessa posizione.

      Elimina
  13. Caro Ernesto, complimenti per il blog e per i tuoi preziosi consigli. La slideshow è molto bella. Vorrei chiederti però se si possono modificare questi campi:
    1) Le foto del post si adattano alla grandezza della slideshow ma in questo modo vengono deformate. E' possibile mantenere le dimensioni originali delle foto?
    2) Si può modificare la velocità di scorrimento? Mi sembra troppo veloce.
    3) La slide appare in tutte le pagine, si può mettere solo sulla Home page?
    Grazie mille.

    RispondiElimina
  14. @Cinefili
    1)Se si usa questo widget è opportuno pubblicare la prima foto del post con dimensioni proporzionali a quelle che si sono scelte per il gadget
    2)La velocità di scorrimento con questo codice non si può modificare, bisognerebbe inserire altri parametri
    3)Si può mettere il widget solo nella homepage utilizzando i tag condizionali
    http://www.ideepercomputeredinternet.com/2011/06/come-visualizzare-un-widget-solo-nelle.html
    http://www.ideepercomputeredinternet.com/2012/06/i-tag-condizionali-e-i-domini.html

    RispondiElimina
    Risposte
    1. Ho fatto la prova riducendo l'area del gadget come dici tu ma la foto non si adatta e se ne vede solo la metà. Dove sbaglio?

      Grazie ancora per la pazienza .-)

      Elimina
    2. @Cinefili...
      Non è una questione di sbagliare. Prova a cambiare le dimensioni della finestra che sono di 480 x 360 pixel.

      Elimina
    3. Cambiando il 480x360 si riduce l'area de widget, ma la foto presa dal post(che si era inizialmente adattata ai 480x360) non si adatta più ma viene tagliata.

      Elimina
  15. Intanto grazie infinite per quanto fai in questo blog, il mio sito non sarebbe lo stesso! :-) Volevo segnalare che se si modifica lo script 'http://www.isoladeifamosi-2009.it/upload/eS.js' quinid non lo script "eS2" ma "eS" e lo si carica poi sul proprio server, è possibile cambiare la durata dello slideshow, modificando un semplice parametro "pause:" al suo interno.
    Non sono riuscito a far ridimensionare proporzionalmente le immagini invece. Cmq nel mio blog ora funziona alla grande: http://marcopalladino.blogspot.it
    Grazie ancora!

    RispondiElimina
  16. Ciao, innanzi tutto vorrei dirti grazie per tutte le volte che mi aiuti.
    vorrei chiederti un aiuto.
    io ho questo codice:
    te lo mando via email
    che fa riferimento alla homepage cioè è il codice che fa venire in alto il bottone home.
    si può modificare in modo che al posto della home viene un post?
    il nome lo so gia come cambiare ma il link no.
    grazie mille in anticipo!

    RispondiElimina
    Risposte
    1. @ Sairos
      Confesso di non averci capito nulla. Ti riferisci a questo post? Comunque l'indirizzo generico di un post è questo
      data:post.url
      e il codice che mi hai inviato diventerebbe così
      <li class='current_page_item'><a expr:href='data:post.url' title='Post'>Post</a></li>

      Elimina
    2. Ciao, vedi nel mio blog che in alto nel menù c'è solo home?
      Io vorrei affiancare anche altre categorie.
      Io riesco metterci un altro bottone anche con scritta diversa solo che porta sempre alla home page.
      Non so come cambiare il link di destinazione.
      Grazie!

      Elimina
    3. @ Sairos
      Comincio a capire un po' di più :)
      Basta che nel codice sostituisca questa parte a expr:href='data:post.url' title='Post' con
      a href="URL_DEL_POST"
      dove al posto di URL_DEL_POST inserisca l'indirizzo dell'articolo che vuoi come link.

      Elimina
    4. ho provato ho messo il codice che ti ho mandato ma mi da errore xml con specifications, ">" or "/>".

      Elimina
    5. @ Sairos

      Ti credo che ti dà errore. Prova con questo

      <li class='current_page_item'><a href='http://sairosmix.blogspot.it/2011/09/modulo-per-contattarmi.html'>Nome che vuoi</a></li>

      anche se qui non vedo bottoni ma solo testo

      Elimina
  17. ciao, ho letto come si deve fare a modificare la pausa da marco palladino ma non ho capito.
    Come si fa?
    grazie

    RispondiElimina
    Risposte
    1. @Sairos
      Scarica questo file
      http://www.isoladeifamosi-2009.it/upload/eS.js
      Aprilo con Notepad++
      http://www.ideepercomputeredinternet.com/2011/02/notepad-strumento-indispensabile-per.html

      Al posto di

      pause: 2000,

      metti un altro numero. 2000 significa 2 secondi. Se vuoi aumentare la velocità metti 1000, se vuoi diminuirla metti 3000. Salva il file e caricalo sulla cartella Public di Dropbox quindi sostituisci l'URL nel codice

      http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html

      Elimina
    2. ciao, ho provato ma mi viene tutto bianco.
      Ho visto anche se andava con il link
      http://www.isoladeifamosi-2009.it/upload/eS.js
      ma no va solo con questo.
      http://www.isoladeifamosi-2009.it/upload/eS2.js
      Il link l'ho messo nel html/javascript nel layout.

      Elimina
    3. @Sairos
      Se vuoi fare le cose per bene devi utilizzare DropBox altrimenti è inutile

      Elimina
    4. Non ho capito cosa intendi perché io ho fatto i passi.che mi hai detto di fare.
      Tranne il notepad che ho usato il blocco note.

      Elimina
    5. Allora si vede che il comando per il numero dei secondi non risponde pur essendo presente

      Elimina
    6. Poi sarei curioso di sapere come hai fatto a salvare un file in formato .js usando il Block Notes :)

      Elimina
    7. a ecco io ho salvato in .txt

      Elimina
    8. @Sairos
      Allora ovviamente non ti poteva funzionare :)

      Elimina
  18. è uno slideshow molto bello, ma mi potresti consigliare uno slideshow più simile possibile a quello di iphoneitalia.com? Grazie mille Ernesto ;)

    RispondiElimina
    Risposte
    1. @KevinMaggi
      Se ti interessa quel tema devi passare a Wordpress e informarti sullo Spingblog Theme
      http://s1.iphoneitalia.com/wp-content/themes/spinblog-iphoneitalia/style.css
      Gli slideshow per Blogger che ho presentato io li puoi trovare qui
      http://www.ideepercomputeredinternet.com/search/label/slideshow

      Elimina
    2. Ok, grazie mille per l'informazione. Ho messo tutti e tre i codici, ma le immagini non si vedono... Sai quale potrebbbe essere il problema?

      Elimina
    3. @KevinMaggi
      Prova prima con il codice del post senza modifiche. Se funziona allora vuol dire che hai sbagliato qualcosa nella personalizzazione (solo per blog gratuiti mentre i blog personalizzati debbono caricare i javascript su Dropbox).

      Elimina
    4. Perdonami, ma non capisco cosa vuoi dire...

      Elimina
    5. @KevinMaggi
      Ho visto ora il post di demo e non si vede. Significa che è andato down il sito in cui ho caricato gli script. Riprova quando la Demo si vedrà di nuovo.

      Elimina
  19. Ciao! Grazie per le info sullo slideshow, è difficile trovarne uno così senza problemi per blogger XD
    Comunque, la mia domanda è come farlo vedere solo in homepage :( ho già provato con i metodi che hai segnalato ma niente...
    Non ha le caratteristiche di un widget, ovvero, anche espandendo non trovo (b include ecc)
    Quindi l'ho trattato come un semplice elemento del template, è ho anche messo lo script per rimandare il dominio a quello .com originale, ma ancora niente :(
    Se apro il post vedo comunque la slide solo che è ferma.

    Hai suggerimenti?

    RispondiElimina
    Risposte
    1. @RossellaSenaldi
      Lo slideshow di demo è presente solo in questa pagina del blog
      http://design-prova.blogspot.it/2012/04/demo-dello-slideshow-degli-ultimi.html
      Per farlo vedere in homepage devi inserire i tag condizionali.
      http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html
      Se non riesci a trovare il codice puoi mettere un titolo al widget in modo da poterlo cercare con F3 o Ctrl+F oppure ti sei dimenticata di espandere i modelli widget.

      Elimina
    2. Ho messo il nome al widget, così l'ho trovato, sbagliavo la posizione in cui metterlo, praticamente lo mettevo allo script ^^''
      Grazie mille :)

      Elimina
  20. Ottimo gadget l'ho inserito nel mio blog, fino ad ieri tutto ok ma oggi fa le bizze la pagina si carica lentamente e alla fine al posto del gadget rimane uno spazio bianco.

    RispondiElimina
  21. @Asso+-+-+-+-
    Dipende dall'hosting in cui ho caricato lo script che talvolta è un po' lento. Puoi ovviare scaricando questo file
    http://www.isoladeifamosi-2009.it/upload/eS.js
    in formato .js e caricandolo nella cartella Public di Dropbox quindi modificando l'URL del codice

    RispondiElimina
  22. Ti ringrazio per la risposta, ora però va tutto bene la pagina si carica velocemente. Se si verificherà di nuovo seguirò il tuo consiglio.

    RispondiElimina
  23. Ciao Ernesto,
    scusami se oggi ti stò infastidendo.
    Volevo sapere un piccolo particolare. E' possibile cambiare colore del titolo in un altro modo? Perchè magari se cambio colore del titolo dei post forse cambia pure quello, ma non posso perchè altri colori non ci stanno.
    Se c'è un modo mi faresti un grande favore.

    RispondiElimina
    Risposte
    1. @Paolo58
      Metti questo codice

      .slide-desc h2 {
      display: block;
      color:#FFFFFF !important;
      }

      al posto di questo

      .slide-desc h2 {
      display: block;
      }

      dove ho messo come esempio il colore bianco #FFFFFF ma che puoi sostituire con un altro di tuo gradimento.

      Elimina
  24. Perfetto!! Ti ringrazio Ernesto. Grazie per la pazienza che ci dedichi!
    Alla prossima.

    RispondiElimina
  25. Ciao Ernesto,
    Scusami se ti faccio alcune domande, ma mi sono sorti alcuni problemi:
    1) a. Nello slide ho alcuni problemi con le immagini perchè con le immagini tipo 700x1600 le appiattisce e le allarga invece io voglio far si (anche se rimangono spazi vuoti ai lati) che la rimpicciolisca in modo proporzionale all'altezza tipo 350x500. Dove devo apportare la modifica?
    b. Vorrei che come immagine prendesse quella originale (cioè quella che si vede quando clicchi su di essa) non quella a bassa qualità che si visualizza nei post.

    2)Come fare per vedere il feed dei post dell'ultima settimana invece che gli ultimi post pubblicati?

    Ti Ringrazio anticipatamente!
    Paolo.

    RispondiElimina
    Risposte
    1. @RedazioneR&D
      Il widget è strutturato in questo modo. E' evidente che non è perfetto ma non è che si possa intervenire più di tanto. Se non ti tornano le proporzioni delle foto prova a intervenire sui valori
      height: 360px;
      width: 480px;
      però poi ti potrebbero saltare tutte le distanze tra i vari elementi. Poi si può settare il numer odi post da visualizzare ma non il periodo.

      Elimina
  26. Bellissimo ma pur seguendo tutto passo passo
    non funziona, appare il riquadro dello slide con le due freccette laterali ma non appare nulla, ne le foto, ne del testo. Cliccando sulle frecce non accade nulla...

    RispondiElimina
    Risposte
    1. @FrancescoPerelli
      Prova a caricare i javascript su un dominio tuo o su DropBox. Il mio codice ti funziona? Se è così significa che sbagli qualcosa o forse ancora non hai pubblicato abbastanza post.

      Elimina
  27. Ciao io ho lo stesso problema di Francesco appena sopra, come puoi vedere qui http://www.romanordestinside.com/ mi appare lo slide con le frecce ma il campo è vuoto! Che posso fare?

    Ho conosciuto solo adesso il tuo sito, è piano di ottimi suggerimenti grazie mille!!

    RispondiElimina
    Risposte
    1. @ GiovanniLembo
      Prima di seguire le indicazioni del commento 27.a prova a modificare la privacy dell'album e a renderlo Pubblico

      Elimina
    2. Fatto ma niente, continua a non vedersi...

      Elimina
  28. Ciao. anche io ho il problema di Giovanni Lembo, l'album è pubblico, ma non mi fa vedere le immagini. e si che sono della dimensione giusta e tutto...
    http://virginia82.blogspot.it/

    RispondiElimina
  29. Ciao. l'ho tolto perchè altrimenti mi imbruttivA la pagina un posto vuoto, comunque ecco, come altri prima di me si vedono le frecce, il posto c'è, ma non si vedono le foto, e lo dico io che ho quasi 50 post, di cui gli ultimi tutti cn foto.
    Grazie dell'aiuto se me lo vorrai dare. Ti seguo da qualche giorno e ho fatto un sacco di modifiche soprattutto all'altro blog, quello fotografico, :-)
    V

    RispondiElimina
    Risposte
    1. @ Virginia C.
      Se non si vedono le foto c'è la possibilità che tu le abbia inserite dopo l'Intervallo del Read More vale a dire che le abbia inserite dopo la parte di post che si vede in homepage. Talvolta in alcuni widget vengono visualizzate solo se presenti in quella parte del post.

      Elimina
  30. Ciao Ernesto. Funziona!!!!! le immagini sono sia prima che dopo il read more e si vedono nella slide!!! grande!!!... ora, dilemma, come centro il gadget nella home?

    RispondiElimina
  31. Scusa di nuovo. fatto l'ho centrato ma devo togliere le frecce.... :-) e nn so come fare ovviamente

    RispondiElimina
    Risposte
    1. @# Virginia
      Per togliere le frecce prova a incollare prima di
      /* EasySlider for Blogger End */
      la riga
      #slider1next, #slider1prev, #slider1next a, #slider1prev a {display:none !important}

      Elimina
    2. @# Scusa mi era sfuggito un punto e virgola. La riga da incollare è questa
      #slider1next, #slider1prev, #slider1next a, #slider1prev a {display:none !important;}

      Elimina
  32. Io ho un problema, non credo ci sia soluzione ma te lo chiedo ugualmente, non si sa mai. Seguendo un tuo consiglio, ad ogni articolo aggiungo la stringa:
    script type="text/javascript" ecc...
    Per evitare copie di occasionali navigatori.
    Detto ciò, applicando questo widget la stringa mi appare anche lì, come anteprima sulle immagini degli articoli. Posso ovviare a questa cosa in qualche modo?

    RispondiElimina
    Risposte
    1. @# Francamente non saprei che dirti. Mi stupisco che si veda ma non ne conosco la ragione

      Elimina
    2. L'unico modo sarebbe togliere l'anteprima del testo e lasciare solo le immagini. Quale stringa dovrei eliminare, nel caso?

      Elimina
    3. @# Ma hai provato a condividere post in cui hai inserito la Descrizione tramite le preferenze di ricerca?
      http://www.ideepercomputeredinternet.com/2012/03/come-personalizzare-le-preferenze-di.html
      http://www.ideepercomputeredinternet.com/2012/03/la-descrizione-nelle-preferenze-di.html
      http://www.ideepercomputeredinternet.com/2012/03/le-preferenze-di-ricerca-di-blogger.html
      Se non lo hai fatto ti consiglio di farlo subito e di provare a condividere tali post su Facebook dopo aver eliminato la cache (dati di navigazione). La soluzione potrebbe essere l'uovo di Colombo

      Elimina
    4. Scusami, credo di non essermi spiegata. Se condivido il post (ovunque) quella stringa non mi appare. Mi compare solo negli articolo che ripubblica paperblog (e non mi interessa più di tanto) e in questo particolare widget, quindi in linea di massima non ci sono problemi. Avevo pensato che l'unico modo per ovviare il problema in questo caso specifico fosse non far comparire la miniatura della descrizione ma solo la foto. Quindi ti chiedevo quale stringa di questo widget dovrei togliere per non far comparire la breve descrizione del post, nel caso fosse possibile.

      Elimina
    5. @# Se il problema riguarda la ripubblicazione su Paperblog, il problema sta nei loro server che non riescono a rilevare correttamente la descrizione

      Elimina
  33. Salve Ernesto, è da un pò ormai che seguo i tuoi consigli, tra l'altro sempre efficienti e praticamente non ho avuto mai problemi, purtroppo tranne adesso credo. Sostanzialmente, aumentando la larghezza dello slideshow, le immagini non aumentano e non riesco a capirne il motivo.. Conosci una soluzione?

    RispondiElimina
    Risposte
    1. @# Ci sono vari parametri di larghezza. Hai agito su tutti? Bisogna considerare che in questo widget le dimensioni sono strettamente collegate (container, immagini, frecce, ecc.)

      Elimina
  34. Ma solitamente, quali sono i parametri da aumentare? Io ho modificato questo:
    1)
    width: 648px; /* Larghezza.. Area Widget */ e niente.
    2)
    #slider
    width: 648px; poi ho aggiunto questo e niente
    3)
    #slide-container
    width: 648px;infine ai due ho aggiunto questo terzo valore e niente :(

    RispondiElimina
    Risposte
    1. @# Dovresti provare a modificare anche le dimensioni all'interno dei due javascript
      http://www.isoladeifamosi-2009.it/upload/eS.js
      http://www.isoladeifamosi-2009.it/upload/eS2.js
      ma le modifiche sono tutte collegate le une alle altre

      Elimina
    2. Su "http://www.isoladeifamosi-2009.it/upload/eS2.js" credo di aver trovato i parametri per la modifica della larghezza, quindi ho:
      1)ricopiato il tuo file su Notepad++,
      2)modificato i valori,
      3)salvato il documento.js (e fin qui tutto bene).

      Poi mi sono bloccato perchè ho caricato il file su Dropbox, ma non ho trovato il modo di prendere il link diretto, dato che l'unica cosa spuntatami è stato "https://dl-web.dropbox.com/get/Public/isola%20dei%20famosi%20modificato2.js?w=AAD1xq3IFNNiHLytlyRx8VXOLQwL8P86QhmDJdILD1YuVg" che credo sia parecchio distante da un link diretto! Ora quale altro programma semplice mi consigli?

      Ps: Già il metodo GoogleDrive l'ho provato e non funziona manco quello!

      Elimina
    3. @# Non hai trovato Copy Public link perché non hai caricato correttamente il file .js nella cartella Public. Il nome del file scaricato doveva essere eS2.js e non doveva contenere il nome dell'hosting. Per scaricare un file che si vede nel browser come quelli del commento 35.a devi aprire la scheda del file, cliccare nella pagina con il destro del mouse e selezionare Salva link con nome. Poi i file li modifichi a piacere

      Elimina
    4. Ho da poco letto un tuo post, risalente a quest'estate credo, dove dicevi che Dropbox avrebbe applicato diverse modifiche da agosto 2012 in poi e forse (se non ho capito male) questo lavoro non si poteva fare più. Io infatti ho scaricato dropbox a novembre 2012 e non trovo nessuna cartella Public e lo trovo parecchio diverso da alcuni screen postati da te in alcuni post precedenti. Quindi si può usare sempre Dropbox o devo trovare qualche programma alternativo?
      Grazie in anticipo per la risp

      Elimina
    5. @# Si può usare ancora Dropbox come illustrato nei post risalenti a più di un anno fa. Si deve soltanto creare la cartella Public da soli. Questo pare per ragioni di regolamenti di copyright perché si tratta di contenuti condivisi

      Elimina
    6. Questo commento è stato eliminato dall'autore.

      Elimina
    7. Ehi Ernesto, finalmente ce l'ho fatta!! Grazie mille!!

      Elimina
  35. Lo sfondo trasparente dell'incipit del testo che è dato dall'immagine il cui URL è in blu, dove può essere cambiato visto che è di colore scuro e nasconde parzialmente il titolo anch'esso di colore scuro ?

    RispondiElimina
    Risposte
    1. @# Il colore del testo è dato dal tag color: #FFFFFF; che puoi sostituire con uno a tua scelta

      Elimina
    2. Risolto ! Grazie !
      la risposta era anche nella 24.a
      sostituendo il codice:

      color:#FFFFFF !important;


      Pensavo,
      ora che sto prendendo + coraggio grazie anche a te,
      di utilizzare lo stesso slideshow
      per far visualizzare una categoria di etichette invece degli ultimi post.
      Forse il trucco sta nel modificare il codice del
      gadget > HTML/Javascript in:

      src="http://design-prova.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=9999"

      Se non è possibile
      hai qualche slideshow da consigliare
      simile a quello in questo articolo
      e adatto al caso ?

      Elimina
    3. @# Sostituisci
      http://design-prova.blogspot.com/feeds/posts/default?orderby=published
      con
      http://nomeblog.blogspot.com/feeds/posts/default/-/etichetta?orderby=published
      dove al posto di nomeblog e etichetta ci metti il nome dell'URL del tuo sito e la categoria di cui visualizzare gli ultimi post

      Elimina
    4. RISOLTO !!! !! !

      Un grande GRAZIE
      da parte mia, amministratore del blog Basta Precari
      (sempre che si possa citare)
      e dei precari delle P.A. della Sicilia !

      Elimina
  36. Ciao, ho modificato altezza e larghezza del widget (80*80) il problema è che anche inserendo queste misure le foto ovviamente rimpicciolisce il widget ma l'ombreggiatura prende tutto il quadro e l'immagine non si ridimensiona.. indicativamente che misure dovrei inserire? considera che ci sta uno slide show di quelle dimensioni..

    RispondiElimina
    Risposte
    1. @# Alcuni parametri sono in questo javascript
      http://www.isoladeifamosi-2009.it/upload/eS2.js
      Leggiti i commenti precedenti

      Elimina
  37. Ciao Ernesto e complimenti per il blog!
    Ho inserito questo slide ed è perfetto, solo che non funziona più il drop and down menù che avevo già sul sito. Se provo ad eliminare lo slide torna funziona invece normalmente. Secondo te può essere jquery il problema o altro?

    RispondiElimina
    Risposte
    1. @# Prova a usare la stessa versione di JQuery in entrambi i widget o di eliminare il rigo dello script da uno dei due widget

      Elimina
  38. Sto avendo un piccolo problema con il testo in alto a destra di questo slideshow. In pratica mi riporta sempre la scritta dell'ultimo post, cliccando sull'immagine comunque si apre il post giusto. Da cosa può dipendere, e nel caso è possibile eliminare completamente la stringa del testo?
    Grazie come al solito dell'attenzione e della pazienza che ci dedichi:)

    RispondiElimina
    Risposte
    1. MI spiace ma proprio non saprei perché ti succeda questa cosa decisamente strana
      @#

      Elimina
  39. Questo commento è stato eliminato dall'autore.

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

    RispondiElimina
  41. Ciao Ernesto! ho provato a cercare ]]> nel codice HTML ma non lo trova!! :(
    come faccio?

    RispondiElimina
    Risposte
    1. Un commento è sufficiente. Tre sono sovrabboddanti :)
      Se non trovi il codice significa che non lo cerchi nel modo corretto Leggiti questi due post e guardati anche i video
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      Forse ti basta leggere il primo ma è meglio che leggi anche il secondo
      @#

      Elimina
  42. Io non riesco a trovare le righe, neanche con l'aiuto di f3. come mai?

    RispondiElimina
    Risposte
    1. Perché non si usa più F3 ma Ctrl+F e poi le cose sono diventate più complicate. Leggi e guarda i video
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      @#

      Elimina
  43. ciao Ernesto, ho inserito senza problema questo slide e funziona bene, unico piccolo problema , se vai a vedere nel blog, nella parte sinistra compare questo >, ho controllato se avessi messo due volte nel codice HTML il simbolo ma niente sembra tutto okai!

    RispondiElimina
    Risposte
    1. Il segno > aggiunto si trova in questa riga
      class='widget HTML' id='HTML3'>>
      cerca nel template. Puoi anche cercare questi due caratteri >> e troverai facilmente il punto
      @#

      Elimina
    2. Questo commento è stato eliminato dall'autore.

      Elimina
    3. Ho trovato il problema non era >> ma avendo messo i tag per visualizzarlo solo in home c'erano due lettere in più , tolte ed ho risolto il problema, grazie per il suggerimento!

      Elimina
    4. I due segni >> si vedevano dal sorgente pagina. Nel modello forse dovevano essere stati convertiti in XML e erano così
      &gt;&gt;
      @#

      Elimina
    5. esatto , importante che con il tuo aiuto anche questa volta ho risolto, grazie!!!

      Elimina
  44. Salve, ho inserito tutto il codice da lei indicato. Le slideshow compaiono, ma non sono ben posizionate ed il testo è sparso per conto suo... (questo è il blog http://young-italia.blogspot.it/ )
    come mai? cosa ho sbagliato?

    RispondiElimina
    Risposte
    1. Lo slideshow si vede quindi credo che tu non abbia sbagliato nulla. Sembra che non funzioni il CSS del titolo del post cioè questo

      .slide-desc {
      background: transparent url(https://lh4.googleusercontent.com/-wA8VSR8Q6l0/T5atzJQVooI/AAAAAAAAXvg/e-_lnAMmQQE/s5/darkbg.png) repeat scroll 0 0;
      color: #FFFFFF;
      padding: 10px;
      position: absolute;
      right: 0px;
      text-align: left;
      top: 0;
      width: 200px;
      z-index: 99999;
      }
      .slide-desc h2 {
      display: block;
      }
      però non ti so dire la ragione. Prova a reinstallare o eventualmente a aggiornare JQuery
      http://www.ideepercomputeredinternet.com/2011/10/aggiornare-jquery-per-rendere.html
      Poi saprai che ogni modello fa storia a sé....
      @#

      Elimina
  45. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  46. Ciao! E complimenti per il tuo sito!... Io stavo cercando uno elider che mostrasse gli ultimo post di Blogger, da inserire però in un altro sito fuori da Blogger... Pensi sia possibile? Grazie!

    RispondiElimina
    Risposte
    1. Questo codice funziona solo su Blogger. Un esperto di linguaggio di programmazione potrebbe adattarlo modificando la parte che riguarda JSON, segnatamente la stringa
      alt=json-in-script&
      però in quel caso sarebbe meglio rivolgersi ad altro plugin in funzione della piattaforma scelta
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.