Pubblicato il 10/08/11 - aggiornato il  | 29 commenti :

Widget di uno slideshow orizzontale con miniature degli Ultimi Post per Blogger.

Sono sicuro che il gadget che vado a presentarvi piacerà a molti lettori e credo che saranno in tanti a istallarlo. Diciamo che va a colmare una lacuna nei widget di Blogger. Per il momento infatti di slideshow orizzontali che mostravano gli ultimi post ce n'era solo uno e con una estetica non proprio straordinaria. La realizzazione di questo widget si basa sulla libreria JQuery CarouFredSel. Si tratta di un plugin che genera degli slideshow  di immagini.

E' opportuno installarlo nella parte principale del layout, magari subito sopra all'area del post. Verranno visualizzate le miniature degli ultimi post in un movimento orizzontale da destra a sinistra. A ciascuna miniatura sarà associato il link al post corrispondente. Il movimento dello slideshow si interromperà quando ci si passerà sopra con il mouse ma solo dopo un lasso di tempo di circa due secondi. Quando si punta una miniatura, si visualizzerà il titolo dell'articolo

slideshow orizzontale ultimi post

Ho anche pubblicato in rete una Demo dello slideshow delle miniature degli articoli recenti. L'installazione non presenta particolari difficoltà e si presta anche a qualche personalizzazione. Se usate ancora la vecchia Bacheca andate su Design > Modifica HTML mentre se usate quella nuova, andate su Modello > Modifica modello. Salvate il modello completo per un eventuale backup di ripristino, cercate la riga ]]></b:skin> e, subito sopra, incollate questo codice

/* CAROSELLO SLIDESHOW */
#carosello ul{
margin:20px 5px;
padding:10px;
width:1070px !important;
height:100px !important;
overflow:hidden;
}
#carosello li{
margin:5px;
list-style:none;
position:relative;
float:left;
}
#carosello img{
width: 80px !important;
height: 80px !important;
border: 1px solid #CCCCCC;
background: #FFFFFF;
padding:5px;
}

Le personalizzazioni riguardano le dimensioni del widget, quelle delle miniature (80 pixel), i margini esterni al widget (margin) e quelli interni (padding). Si può anche configurare lo stile del bordo delle foto e il colore di sfondo (background) tra bordo e miniatura. Lo sfondo del gadget sarà invece ereditato dai colori del blog in cui viene installato. Adesso cercate la riga </body> che si trova quasi in fondo al modello. Subito sopra incollate quest'altro codice 

<!-- CAROSELLO ORIZZONTALE 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/jquery.carouFredSel-4.4.1-packed.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#carosello ul&quot;).carouFredSel({
auto    : {
items : 1,
duration     : 2500,
easing     : &quot;linear&quot;,
pauseDuration    : 0,
pauseOnHover    : true
}
});
});
</script>
<noscript><a href='http://goo.gl/kVY5M' target='_blank'><span style='font-size: x-small;'>Carousel FredSel</span></a></noscript>
<!-- CAROSELLO ORIZZONTALE FINE - www.ideepercomputeredinternet.com -->

Il valore 2500 determina la velocità di scorrimento. A valori più alti corrisponde una velocità più bassa. Tale parametro può essere personalizzato secondo le vostre esigenze. Si salva il modello. Adesso non resta che creare un elemento pagina per mostrare il widget. Si va quindi su Design > Aggiungi un gadget (Layout > Aggiungi un gadget nella nuova Bacheca) e si seleziona HTML/Javascript. In Sezioni del sito si incolla questo nuovo codice

I parametri da modificare sono colorati di rosso e riguardano

  1. L'immagine da visualizzare nel caso non ce ne fossero nel post. Da caricare su Picasa e ottenerne il link diretto, meglio se quadrata.
  2. Il numero dei post da mostrare nello scorrimento orizzontale (20 nel codice proposto)
  3. L'URL del vostro blog da sostituire all'indirizzo di questo sito

Si salva e, con il mouse, si posiziona nel punto desiderato. Si salva nuovamente e si controlla il risultato. Enjoy.



29 commenti :

  1. domandona: si potrebbe fare di un argomento etichetta? Tipo mettere "nail art" come etichetta e far scorrere tutti i post con quella etichetta?
    Sono tornata... più "scocciante" che mai :D

    RispondiElimina
  2. Esiste invece una slide simile che mostra i vecchi post? Perchè tutto sommato quelli nuovi sono già visibili nella homepage, mentre potrebbero esistere vecchi post che possono interessare i lettori ma non sono visibili nell'immediato. Grazie :)

    RispondiElimina
  3. @Soffio di Dea
    Si può inserire l'URL del feed della singola etichetta invece di quello del blog. Per esempio al posto di
    http://www.ideepercomputeredinternet.com/feeds/posts/default
    inserire
    http://www.ideepercomputeredinternet.com/feeds/posts/default/-/etichetta
    dove al posto di "etichetta" metti la categoria che ti interessa. In teoria si potrebbe provare anche a fare due o più slideshow

    @Tamerice
    Anche in questo caso è una questione di feed. Per esempio questo feed
    http://www.ideepercomputeredinternet.com/feeds/posts/default?max-results=20&start-index=501
    mostra 20 post a partire dal 500-esimo che è stato pubblicato. Si possono naturalmente variare i numeri come ci pare.

    RispondiElimina
  4. Grazie,
    veramente bello.
    Io però ho un problema . ho deciso di mettere il widget a piè di pagina ma lo sfondo grigio non è bello a vedersi. Ho provato a cambiarlo ma non ci sono riuscito.
    Mi puoi aiutare?
    Grazie
    Questo è l'url del mio blog
    http://empills.blogspot.com/
    Grazie

    RispondiElimina
  5. @Carlo D'Apuzzo
    Lo sfondo grigio è tipico del tuo modello e si vedrà in tutti i widget che inserirai nella parte bassa (footer). Ho analizzato il tuo codice e il background è dato da questa immagine
    http://www.blogblog.com/1kt/transparent/black50.png
    che è in formato PNG e di 20x20 pixel. Gli arrotondamenti sono dati dai tag border-radius.
    Se questo colore non ti piace, puoi crearti una immagine delle stesse dimensioni ma di un colore diverso, caricarla su Picasa e acquisirne il link diretto. Poi vai su Design > Modifica HTML e espandi i modelli widget. Cerchi l'URL dello sfondo grigio e lo sostituisci con l'altro che hai ricavato da Picasa.

    RispondiElimina
  6. Grazie,
    con le tue indicazioni ho risolto.
    Esiste però un problema i titoli non scorrono con internet explorer , lo stesso succede con l'immagine di sfondo dell'header. Devo rassegnarmi o c'è qualche rimedio?
    Carlo

    PS Lo stesso problema pare darlo opera ma non gli altri browsers
    Ancora grazie

    RispondiElimina
  7. @Carlo D'Apuzzo
    Guarda che con IE praticamente non funziona bene mai niente. Comunque nel tuo caso ho controllato e il widget scorre con IE8 e con IE9. Un po' a scatti ma funziona. Con IE non si vede bene l'header. Anche lì c'è un background trasparente che non va, questo
    http://www.blogblog.com/1kt/transparent/header_gradient_shade.png
    Poi in alto hai una F prima della barra che non c'entra nulla. Probabilmente l'hai lasciata nel codice inavvertitamente. Ciao

    RispondiElimina
  8. Grazie per la risposta.
    Purtroppo nonstante abbia eliminato la F provato a cancelalre o sostituire http://www.blogblog.com/1kt/transparent/header_gradient_shade.png nulla è cambiato
    Io ho IE9 ma i titoli non scorrono
    Il problema che IE è il so più¹ diffuso
    Ciao
    Carlo

    RispondiElimina
  9. ottimo grazie Ernesto... devo aggiustare diverse cose nel blog e questo post capita a fagiolo, merci :)

    RispondiElimina
  10. Se si potesse aggiungere il titolo del post in didascalia come qui: http://www.ideepercomputeredinternet.com/2011/05/slideshow-orizzontale-degli-ultimi.html
    sarebbe il massimo!!!!!
    E' possibile??

    GRAZIE
    Maurizio

    RispondiElimina
  11. Grazie Ernesto, che peccato, sarebbe stato troppo bello!!!...

    Complimenti per gli aiuti che ci dai, davvero mitico.

    Un abbraccio

    Maurizio

    RispondiElimina
  12. ciao parsifal! il post è chiarissimo, infatti ho esguito tutto passo passo senza problemi. l'unico neo è che, pur mostrando lo slide perfettamente, non scorre. ?_? se vuoi guardare, www.buysalento.com. non capisco cosa non vada.

    RispondiElimina
  13. @Nαмi ♥
    Se non scorre è un problema di javascript. Prova a caricare questo file
    https://sites.google.com/site/scriptperilblog/widget-1/jquery.carouFredSel-4.4.1-packed.js
    su DropBox e poi sostituisci l'URL nel codice. Alcune volte funziona perché Google non accetta di fare da deposito per gli script utilizzati in siti di altri. Tu infatti hai un dominio personalizzato.
    Se non sai cosa è dropbox leggiti questo post
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html

    RispondiElimina
  14. ciao parsifal, ho cercato di inserire il secondo css in modelli, l'unico problema è che mi spunta un avviso nel momento in cui salvo il livello, che dice:
    "Spiacenti non ci è stato possibile completare la richiesta... codice di errore bX-mxnini ecc...."

    RispondiElimina
  15. @Simone Riccioli
    Ho appena controllato e salva perfettamente il codice. Eventualmente prova a convertirlo in XML con questo strumento
    http://blogcrowds.com/resources/parse_html.php
    Incolla il codice e clicca su Parse. Inserisci poi nel modello il codice convertito.

    RispondiElimina
  16. Non riesco ad allargare la dimensione da una finestra di 5 a 6 ultimi post.
    Per i titoli, rispondendo a 'ZioBarbero' ho ovviato con un widget a parte di tipo scorrimento testo. A tal proposito, che tu sappia, c'è qualcosa di più elegante, personalizzabile e curato ? Questo è il mio blog : http://bastaprecaricomunemazara.blogspot.com/
    Complimentoni ormai sempre più scontati comunque !
    Daniele Modica (un precario :)

    RispondiElimina
  17. @Daniele Modica
    Per allargare il widget bisogna modificare il dato width:1070px !important; nel primo codice. Poi il numero di post di default è addirittura 20 ma ovviamente non riescono a visualizzarsi tutti.

    RispondiElimina
  18. Avevo già provato con width:1170px !important e con altre misure superiori ma niente (tranne che per quelle inferiori che funzionano!). Pur notando anche che andando nel Designer modelli e in Modifica le larghezze, l'anteprima sottostante corrisponde a meraviglia e che, se può servire da indizio, nella misura: Intero blog sia di 840px e Sidebar destra sia di 280px. Misteri dell'Html !
    Per i gli ultimi titoli scorrevoli da associare "accomodando" al "Widget di uno slideshow orizzontale con miniature degli Ultimi Post" che non supporta i titoli, conosci qualcosa di più carino ed elegante ?
    mio blog: http://www.bastaprecaricomunemazara.blogspot.com/
    Grazie per la precedente risposta gentile e puntuale!
    Daniele Modica

    RispondiElimina
  19. @Daniele Modica
    In questo blog ci sono molti widget. Il concetto di carino e elegante è soggettivo ;)

    RispondiElimina
  20. Rimango comunque oggettvamente demoralizzato con il caso misteriosamente non risolto della impossibilità di modificare la larghezza del widget di uno slideshow orizzontale con miniature degli Ultimi Post. Anche in un blog di prova, http://provabastaprecari.blogspot.com/ stessa cosa. p.s.Come si riazzera tutto in un blog senza avere una copia di backup originaria ? Vorrei partire da zero nel blog di prova per rifare le mie prove, più attendibili, visto che con il tempo probabilmente si è incasinato anche questo. Grazie come sempre cara ancora di salvezza !

    RispondiElimina
  21. @Daniele Modica
    Se non hai fatto il backup del modello non si può riazzerare ma puoi comunque usare un blog di prova per caricare un nuovo modello senza personalizzazioni.

    RispondiElimina
  22. @# Non so che dirti. Le dimensioni delle miniature dovrebbero essere tutte di 80x80 pixel a prescindere da quelle delle immagini presenti nei post.

    RispondiElimina
  23. @# Purtroppo come certo capirai non posso permettermi di farlo per questioni di tempo. Lo faccio solo quando non funziona la demo. Poi si sa ogni modello fa storia a sé.

    RispondiElimina
  24. @# Non posso sapere se è colpa del modello. Però leggiti questo post su JQuery
    http://www.ideepercomputeredinternet.com/2011/10/aggiornare-jquery-per-rendere.html
    può dipendere anche da quello. Comunque se ho capito bene ti funziona ma non riesci a modificarlo. Non sempre è possibile ...

    RispondiElimina
  25. Non funziona le immagini sono fisse!!!:-(

    RispondiElimina
    Risposte
    1. @# Nella demo funziona, questo non significa che debba funzionare in tutti i template, ci possono essere delle incompatibilità soprattutto con JQuery

      Elimina
  26. @# La Demo mi pare che funzioni anche con Chrome. Prova a vedere se hai altre versioni di JQuery nel template
    http://www.ideepercomputeredinternet.com/2011/10/aggiornare-jquery-per-rendere.html

    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