11 agosto 2011

Slideshow degli Ultimi Articoli per Blogger con Easy Slider.

Vado a presentare un interessantissimo widget per Blogger di grande impatto grafico basato su librerie JQuery. Si tratta del celebre effetto Easy Slider, adattato a Blogger, e che mostra lo slideshow delle immagini estratte dagli Ultimi Post con relativo link. In una area della immagine con background scuro è visibile anche il titolo dell'articolo e il suo incipit. Lo scorrimento è automatico ma si arresta dopo un certo periodo di tempo che la pagina è stata aperta. Si può continuare a scorrere gli ultimi post pubblicati attraverso degli strumenti di navigazione. Ho pubblicato questa

Il widget può essere inserito in una sidebar, sopra all'area del post o nel footer. Se si installa nell'header, in alcuni modelli non saranno visibili i titoli dei post ma solo il loro inizio. Il widget è funzionante con Firefox e con Chrome mentre ha delle difficoltà con Internet Explorer ma solo con alcuni modelli.

slideshow easy slider blogger 

Passiamo alla installazione. Si va su Design > Modifica HTML e si salva il modello completo per un eventuale backup di ripristino. Si cerca la riga ]]></b:skin> e, immediatamente sopra, si incolla questo codice

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

<!-- EASY SLIDER INIZIO -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptperilblog/widget-1/EasySlider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<noscript><a href='http://goo.gl/Zpo8Z' target='_blank'><span style='font-size: x-small;'>Easy Slider</span></a></noscript>
<!-- EASY SLIDER FINE -->

Si salva il modello. Si va su Design > Elementi pagina > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si inserisce questo ultimo codice

<div id="slider">
<script style="text/javascript" src="https://sites.google.com/site/scriptperilblog/widget-1/EasySlider-script.js"></script>
<script style="text/javascript">
var numposts_gal = 10;
var numchars_gal = 150;
var random_posts = false;
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://www.ideepercomputeredinternet.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=9999"></script>
</div>

Si salva l'elemento e si posiziona con il mouse. Si inserisce l'URL del blog di cui vogliamo visualizzare gli articoli più recenti e il loro numero (10). Se in un post non ci sono foto si vedrà questa immagine

Oggettivamente è piuttosto scarsa esteticamente ma sto andando di fretta. Chi ci sa fare con la grafica può scaricarsi il file

https://sites.google.com/site/scriptperilblog/widget-1/EasySlider-script.js

e sostituire questa immagine, il cui URL si può ricavare cliccandoci sopra, con un'altra. Osservazioni conclusive. Se ci sono dei problemi con Internet Explorer si può provare a caricare i javascript, che in questo momento sono su Google Sites, cioè il precedente e quest'altro

https://sites.google.com/site/scriptperilblog/widget-1/EasySlider.js

su DropBox per vedere se si riesce a risolvere il problema. Io non posso caricare gli script su DropBox perché altrimenti esaurirei la banda visto che sono in molti che usano i miei widget e per questo ringrazio. Se non vi piace il background scuro, in cui vengono visualizzati i titoli dei post e il loro riassunto, modificate questa immagine di sfondo

 https://lh6.googleusercontent.com/-AcKt7lCF1xo/TkOMth_423I/AAAAAAAAUKg/OsPlufcJBK4/bgscuro.png

con un'altra più adatta ai colori del vostro blog ma sempre trasparente in formato PNG. Si può provare anche a modificare le dimensioni del widget stando attenti a farle rimanere coerenti tra di loro. Nel CSS ho colorato di rosso i parametri più facilmente modificabili.




34 commenti :

  1. ciao, scusa ma ho provato ad inserirlo sul mio blog, ma non mi funziona, ho seguito passo passo la tua guida già due volte...e nulla da fare, da premettere che uso google chrome quindi non dovrei aver difficoltà a visualizzare lo slide.
    puoi aiutarmi?
    Grazie mille in anticipo...
    dimenticavo sei un grande grazie a te
    ho reso il mio blog molto professionale...ma manca uno slideeee ;-)

    RispondiElimina
  2. @Zone ...
    Prova a caricare il javascript su DropBox

    RispondiElimina
  3. Ciao Ernesto...ti ringrazio per la celere risposta, io ho dropbox gia' installato sul pc, ora tu mi dici di caricare ii javascript su dropbox, ma dropbox non serve a condividere i file? scusa l'ignoranza ma il javascript che mi dici di caricare dove lo prendo? e poi una volta caricato io dovrei vedere lo slide funzionare? scusa per le domande...ma questo slide mi tornerebbe utile visto che ho un sito sul modellismo...grazie

    RispondiElimina
  4. @Zone ...
    Si tratta di un tentativo che molte volte va a buon fine. I javascript da caricare sono questi
    https://sites.google.com/site/scriptperilblog/widget-1/EasySlider-script.js
    https://sites.google.com/site/scriptperilblog/widget-1/EasySlider.js
    Se tu incolli gli indirizzi nel browser e clicchi su Invio ti si scaricano automaticamente.
    Questi file vanno caricati su Dropox seguendo questo tutorial
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html
    Vanno caricati nella cartella Public e ne va acquisito il collegamento diretto andando su Copy public link.
    Gli indirizzi vanno poi sostituiti al posto di quelli che hai incollato nel browser e che fanno parte del codice dello slide.

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

    RispondiElimina
  6. Ciao! Ho un problema con lo slider :( Funziona tutto bene, solo che l'ho ingrandito (in lunghezza), ma le immagini rimangono delle dimensioni originarie e nel codice non trovo a cosa corrisponde, ho provato ad aggiungere widht e height in tutte le zone del CSS ma nulla :( purtroppo me la cavicchio con HTML/CSS ma non sono un'esperta. come potrei fare? (ti lascio l'indirizzo del blog: rosemoments.blogspot.it)

    grazie :)

    RispondiElimina
    Risposte
    1. @RossellaSEnaldi
      Se hai già provato a modificare i parametri width e height dei CSS mi sa che c'è poco da fare. Prova a aprire questo file
      https://sites.google.com/site/scriptperilblog/widget-1/EasySlider.js
      con Notepad++ per vedere se si può modificare qualcosa ma a prima vista non mi sembra.

      Elimina
  7. Ho capito. Adesso vedo se riportarlo alle misure originarie e accentrarlo, oppure se cercarne uno che sia maggiormente modificabile. Grazie :)

    RispondiElimina
  8. Funziona a meraviglia, ho un solo problema.
    Quando apro il post e clicco su una immagine per vederla ingrandita mi appare comunque lo slideshow di Easy Slider e la cosa da molto fastidio.
    Come posso rimuove l'inconveniente?

    Grazie

    RispondiElimina
    Risposte
    1. @MarcoRinaldi
      Temo di non aver ben compreso. Cliccando su una qualunque immagine del blog ti appare lo slideshow di Easy Slider? Se fosse così sarebbe cosa strana. Sei sicuro che non sia il Lightbox nativo di Blogger?

      Elimina
  9. Mi sono spiegato male. Lo slideshow di Easy Slider si vede nel Lighbox nativo di Blogger.
    Si può risolvere il problema?

    Grazie anche per la risposta immediata

    RispondiElimina
    Risposte
    1. @MarcoRinaldi
      Forse tenerli tutti e due sembrerebbe non compatibile nel tuo modello. Il Lightbox nativo di Blogger si può sempre disabilitare andando su Impostazioni > Post e commenti > Mostra immagini con Lightbox e selezionando il NO.

      Elimina
  10. Peccato era una soluzione perfetta. Non posso disabilitare il Lightbox, il mio blog è ricco di immagini di progetti di architettura e uno dei motivi delle visite sono proprio le immigini. Non si potrebbe mettere il widget Easy Slider soltanto nella home?
    Forse chiedo una cosa assura, grazie comunque

    RispondiElimina
    Risposte
    1. Scusa no lo avevo specificato, io lo ho inserito in una delle due colonne sopra i post

      Elimina
    2. @MarcoRinaldi
      Sì, si può fare. Devi inserire gli stessi tag condizionali all'inizio e alla fine del codice inserito nel modello e nel widget in cui lo hai inserito
      http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html
      Ovviamente scegli il tag condizionale per mostrarlo solo in homepage
      Per inserire i tag nel widget occorre individuarlo e scorrerlo fino a trovare le righe
      b:includable id='main'
      e
      /b:includable

      Elimina
  11. Domattina provo e ti faccio sapere se così funziona.
    Ti ringrazio delle tua disponibilità e competenza.

    RispondiElimina
  12. Non trovo
    b:includable id='main'
    e
    /b:includable

    Ho provato anche ad inserire b:if cond='data:blog.url == data:blog.homepageUrl' prima del widget e alla fine /b:if ma si vede ugualmente e quando seleziono un post lo slideshow si blocca e le immagini non scorrono più.

    RispondiElimina
    Risposte
    1. @MarcoRinaldi
      Quella riga c'è in tutti i widget. Se non la trovi è perché non hai messo la flag (o spunta) a Espandi i modelli widget che si trova subito sopra al codice del template

      Elimina
  13. Macchè, anche espandendo i modelli widget non riesco a trovarla in questo, la trovo in altri widget.
    Le righe sono uguali ai codici di questo post, anche tu puoi vedere che non si trova.

    RispondiElimina
    Risposte
    1. @MarcoRinaldi
      Se non sei in grado di riconoscere il widget prova a inserire un titolo che poi cancellerai. Ho analizzato il codice con Firebug e si tratta del gadget con questo ID

      id='HTML9'

      Basta che incolli la stringa precedente nel campo che si apre cliccando su F3 o Ctrl+F per trovare le righe in questione

      Elimina
  14. Ora si vede solo in home e non si vede nemmeno nel Lightbox.
    Mi crea un problema, probabilmente c'era anche prima?!?, si vede soltanto l'immagine di un post (sto provando la nuova grafica su un blog di prova) e degli altri mette l'immagine di default con il titolo giusto e con questo testo: Normal 0 14 false false false MicrosoftInternetExplorer4 st1\:*{behavior:url(#ieooui) } /* Style Definitions */ ...
    Non so se si può risolvere il problema, comunque grazie mille.

    RispondiElimina
  15. Salve, intanto complimenti per il sito vi ho trovato moltissimi consigli utili, la contatto per un problema legato a questo slider, lo uso da qualche mese, ora, cambiato il template, lo slider funziona tutto tranne il fatto che le immagini non si aggiornano più con gli ultimi post.
    p.s.
    i link ai feed li ho modificati a dovere ma niente. se le occorre qualche dettagli sul template sono a sua disposizione. grazie per l'attenzione

    RispondiElimina
    Risposte
    1. @# Prova a incollare l'URL dei tuoi feed nella barra del browser. Ho l'impressione che ci sarà un redirect a FeedBurner e che Feedburner abbia smesso di funzionare per questa ragione
      http://www.ideepercomputeredinternet.com/2012/11/feedburner-blogger-elenco-lettura.html

      Elimina
    2. Grazie, sono riuscito a farlo funzionare!
      Complimenti ancora per l'ottimo lavoro che svolgi

      Elimina
  16. Ciao Ernesto. Questo widget mi piace moltissimo e lo sto provando per utilizzarlo. Sto facendo tutte le modifiche su un blog di prova. Il mio problema è che l' immagine all' interno della slide non viene adattata al riquadro. Tipo così http://prova6313.blogspot.it/. Sapresti darmi qualche consiglio? Ti ringrazio

    RispondiElimina
    Risposte
    1. @# Il problema purtroppo è quello che nei post metti delle immagini grandi mentre lo slideshow è molto più piccolo quindi non c'è ridimensionamento ma si vede solo una parte della foto. Questo widget è più adatto per una pagina statica o per essere messo sopra all'area del post in modo da poter mantenere le proporzioni originali.

      Elimina
  17. Si sicuramente c'è un problema di dimensioni delle immagini ma credevo ci fosse il trucchetto dato che avevo visto che si poteva risolvere come in questo blog http://www.vanessaziletti.com/2013/05/hot-pink-yellow.html ....mmmm ora tento di capirci un altro poco ;)

    RispondiElimina
    Risposte
    1. @# Quello è un altro effetto sempre con JQuery ripreso da uno di questi 15
      http://visionwidget.com/responsive-jquery-slideshow.html

      Elimina
    2. Ora provo a studiare un poco j Query. Mi aspettavo che mi tagliasse le immagini del post (essendo dimensioni diverse). L' avevo calcolato ma che me le distorce proprio, mi sballa le proporzioni comunque ora scavo e vedo che riesco a fare. Grazie

      Elimina
  18. CIao ascolta ho un probelma anche se metto i tag condizionali quando clikko su un post lo slideshow mi rimane... cm lo tolgo?

    RispondiElimina
  19. @# Sì toglie con i tag condizionali. Se non ti funzionano significa che li hai inseriti male. Ricordati di usare l'url canonico. com

    RispondiElimina
  20. Ciao sto modificando un html e non sono espertissima come ben saprai! Il mio template ha gia' una slideshow, in che modo la si puo' rendere autoaggiornante? Mi spiego meglio si puo' modificare quella che ho e non ricorrere continuamente all'aggiornamento manuale delle foto e dei links? Grazie mille.

    RispondiElimina
    Risposte
    1. Sono due cose diverse. Uno slideshow semplice diverso da uno che mostra anche i contenuti in automatico come potrebbero essere gli ultimi post pubblicati. In questo post c'è un esempio di questa seconda possibilità
      @#

      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.