Pubblicato il 04/02/15e aggiornato il

Widget delle immagini degli ultimi post su Blogger che si aprono come pagine di un libro.

Effetto Book Flip usato per mostrare gli ultimi post di Blogger sotto forma di immagini che si aprono come in un libro.
Il matematico e saggista britannico Sir Bertrand Russel nella sua celeberrima Storia della Filosofia Occidentale riferendosi alle teorie di Plotino scrisse che c'erano filosofie che meritavano di essere studiate perché vere e altre perché belle. Quella di Plotino secondo lui faceva parte di questa seconda categoria. Facendo una giravolta con doppia capriola carpiata con avvitamento e applicando questo tipo di ragionamento anche ai widget per Blogger potremmo dire che ce ne sono di interessanti perché utili ma ce ne sono altri che ci piacerebbe installare solo perché belli.  

È il caso del gadget che vado a presentare che comunque ha una sua utilità visto che mostra le immagini estratte dagli ultimi articoli con il collegamento agli stessi in modo da facilitare l'accesso dei lettori. Le immagini si aprono e si chiudono come pagine di un libro e nel caso in cui in un post non ce ne fossero sarà mostrata una immagine di default che potrà essere personalizzata

book-flip-effect

L'effetto l'ho tratto da Book Flip su Dynamic Drive e l'ho adattato a Blogger. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla questo codice

<script type="text/javascript">
/***********************************************
* Book Flip slideshow script- © Ger Versluis 2003
* Permission granted to DynamicDrive.com to feature script
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var Book_Image_Width    =300// Larghezza
var Book_Image_Height   =300; // Altezza
var Book_Border         = true// bordo immagini
var Book_Border_Color   ="gray";  // Colore bordo
var Book_Speed          =15;
var Book_NextPage_Delay =1500; // 1000 = 1 secondo
var Book_Vertical_Turn  =0; //variabili per i contenuti
var random_posts        = false; // post casuali
var numposts_gal        = 10;   // numero di articoli della galleria
</script>
<script src="https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/bookflip.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/bookflip2.js" type="text/javascript"></script>
<div id="Book" style="position:relative">
<img src="https://lh5.googleusercontent.com/-lBgvpM5Mj-w/Tkt-ISEw69I/AAAAAAAAUOU/y7gkoYhf-6w/s128/placeholder.gif" width="304" height="304" />
</div>
<script src="http://demo-blogger-widget.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
<script type="text/javascript">
ImageBook();
</script>

Si salva l'elemento pagina. Si tratta di immagini 300x300 pixel quindi la larghezza totale del gadget è di 600 pixel. Va quindi posizionato o sopra l'area del post oppure nel footer del layout. I parametri da personalizzare sono affiancati dai commenti sul loro significato e campo di azione. Sono usati i tag true e false per le opzioni su bordo e immagini casuali.  Ho utilizzato due javascript caricati su Google Drive il cui URL è colorato di viola. Nel primo c'è anche l'immagine di default. Può essere editato per inserire una immagine di default di vostro gradimento.  Nel caso in cui modificaste i valori della larghezza e altezza delle immagini ricordatevi anche di modificare le dimensioni del contenitore che debbono essere leggermente più grandi. Nel codice proposto le dimensioni del contenitore sono di 304x304 mentre quelle delle immagini 300x300 pixel.



Ovviamente dovrà essere incollato l'indirizzo del vostro blog al posto di quello di test che ho utilizzato. Ricordarsi di usare nell'URL il .com e non il localizzato .it.

Aggiornamento: A seguito del ritiro del supporto di hosting a Google Drive ho dovuto riproporre questo stesso widget con un nuovo codice. Se siete interessati a questo widget non più funzionante consultate questo nuovo articolo sullo stesso tema:




39 commenti :

  1. appena messo....grande Ernesto :)

    RispondiElimina
  2. Preciso come al solito !!!, http://bit.ly/YS6e8J

    RispondiElimina
  3. bello grazie ma come faccio a centrarlo? :)

    RispondiElimina
    Risposte
    1. La cosa migliore è quella di calcolare la larghezza in modo che sia identica a quella dello spazio in cui inserisci il widget
      @#

      Elimina
  4. Ho provato ma non mi funziona: non visualizza nessuna immagina. Che cosa sbaglio?

    RispondiElimina
    Risposte
    1. Prova a vedere se ti funziona questo codice così com'è senza modificare nulla. Se ti funziona allora sbagli qualcosa, forse hai lasciato il .it al posto del .com, se invece non ti funziona allora può darsi che il tuo modello abbia delle incompatibilità con questi script
      @#

      Elimina
  5. ciao e complimenti per i tuoi suggerimenti. Ho provato a seguire i tuoi suggerimenti e mi da un libro con le tue immegini, sostituiendolo con il mio blog mi da un libro solo con la cornice ma senza foto. grazie mille

    RispondiElimina
    Risposte
    1. Vai su Bacheca > Impostazioni > Altro > Feed sito > Consenti feed blog e imposta Completo nel menù a discesa posto a lato quindi vai su Salva Impostazioni in alto a destra
      @#

      Elimina
    2. Grazie mille ! Funziona ! Grandissimo !

      Elimina
  6. Suggerimenti interessantissimi ! Mi sono iscritta tra i tuoi lettori !

    RispondiElimina
  7. Ciao Ernesto complimenti, questi gadget sono bellissimi ma troppo impegnativi per me. ti chiedo se puoi darmi informazioni su come installare nel mio blog di cucina le miniature dei posti verticali in due file uguali, da tempo ho inserito quelli dei post più popolari di blogger, ma vorrei migliorare il blog.
    Ti ringrazio se potrai aiutarmi.

    RispondiElimina
  8. perbacco che esistono, in pratica sono get widget con immagini di ricette pubblicate denominate post recenti o più popolari o come vuoi, che si trovano nelle pagine dei blog, posizione laterale, in verticale. ci sono più immagini a due file allineate, senza commenti, ma che con il cursore evidenziano la pagina con la ricetta.

    RispondiElimina
    Risposte
    1. Sono su blog con piattaforma Blogger? Puoi chiedere agli autori del sito se ti dicono dove hanno trovato il widget oppure incollare l'indirizzo di un blog che ce l'ha e così guardo un po'
      @#

      Elimina
  9. Ciao Ernesto, c'è un modo per renderlo visibile solo in homepage e non quando si apre il singolo post?

    RispondiElimina
    Risposte
    1. Certamente. Devi usare i tag condizionali specifici.Leggi questo post
      http://www.ideepercomputeredinternet.com/2013/03/tag-condizionali-blogger.html
      e segui la partre del tutortial nella sezione
      COME USARE I TAG CONDIZIONALI NEI WIDGET
      @#

      Elimina
  10. Ciao Ernesto, sicuramente non so in termini tecnici come si chiama il widget, comunque penso sia una piattaforma blogger e il sito è questo: http://www.dolciagogo.it si trova lato dx denominato ultime dalla cucina.
    Grazie per la pazienza.

    RispondiElimina
    Risposte
    1. Il widget lo aveva preso da questo sito in questa pagina
      http://www.ideepercomputeredinternet.com/2012/03/widget-degli-ultimi-post-con-miniature.html
      che si raggiunge cliccando su Get Widget. Ora però quel sistema non funziona più. Ora c'è questa nuova versione
      http://www.ideepercomputeredinternet.com/2014/04/recewnt-posts-with-thumbnails-blogger.html
      Devi però configurare questa parte del codice

      var numberOfPosts = 6;
      var showPostDate = true;
      var showSummary = true;
      var summaryLength = 200;
      var titleLength = 100;
      var showCommentCount = true;
      var showThumbs = true;
      var showNoImage = false;
      var imgDim = 100;
      var imgFloat = 'left';
      var myMargin = 5;
      var mediaThumbsOnly = true;
      var showReadMore = true;
      var readMore = 'Leggi tutto';

      Se ho capitobene vuoi vedere solo le immagini quindi devi fare queste modifiche
      var showPostDate = false;
      var showSummary = false;
      var summaryLength = 0;
      var showCommentCount = false;
      var showThumbs = true;
      var showNoImage = false;
      var imgDim = 100;
      var imgFloat = 'left';
      var myMargin = 5;
      var mediaThumbsOnly = true;
      var showReadMore = false;

      @#

      Elimina
    2. Ciao ernesto questo widget che avevo inserito nel mio blog tempo fa che mi faceva vedere solo le immagini ora non si vede più, esiste qualcosa di nuovo e di simile? Grazie se vorrai aiutarmi.

      Elimina
    3. Questo widget non funziona più per questa ragione
      http://www.ideepercomputeredinternet.com/2015/10/google-drive-hosting-deprecato.html
      Ho salvato il tuo commento. Se avrò tempo lo riproporrò. Però i widget non più funzionanti sono parecchi e non so se potrò ripristinarli tutti :(
      @#

      Elimina
    4. grazie comunque sei sempre puntuale nelle risposte:

      Elimina
    5. Ho aggiornato il widget
      http://www.ideepercomputeredinternet.com/2016/10/slideshow-book-flip-blogger.html
      che adesso funziona
      @#

      Elimina
  11. Ti ringrazio tantissimo appena posso provo poi ti dirò cosa ho combinato.

    RispondiElimina
  12. c'è l'ho fatta... sono perfette, è come volevo. Ti chiedo un' ultima cosa, se non sbaglio le immagini rimangono fisse, se volessi aggiornarle è possibile farlo in automatico?
    grazie ancora.

    RispondiElimina
    Risposte
    1. Le immagini si aggiornano in automatico via via che pubblichi nuovi post. Esce la foto del post più vecchio e entra quella del post appena pubblicato
      @#

      Elimina
  13. Perfetto, ne ne sono accorta ora, grazie mille.

    RispondiElimina
  14. Ciao Ernesto!! ho visto che questo widget scala le immagini anche se hanno dimensioni diverse.. questa funzione può tornare utile anche in altri widget? si può applicare alle immagini in modo che siano scalate senza doverlo fare per ogni immagine con un programma tipo gimp? (mi riferisco ovviamente quando uso altri widget come per esempio questo http://www.ideepercomputeredinternet.com/2015/06/immagini-galleria-effetto-hover-blogger.html) Grazie

    RispondiElimina
    Risposte
    1. No, bisognerebbe riscrivere il codice dall'inizio
      @#

      Elimina
  15. non funziona :(
    ma l'unica cosa che ho modificato e' stato l'id del mio blog ma non si vedono ne' foto ne' bordi.

    RispondiElimina
    Risposte
    1. La Demo funziona quindi significa che probabilmente non hai incollato bene il codice. Prova a incollarlo senza cambiare nulla, neppure l'URL del blog. Solo successivamente sostituisci il tuo indirizzo. Probabilmente hai messo nomeblog.blogspot.it invece di nomeblog.blogspot.com
      @#

      Elimina
    2. scusa ma esattamente in quale riga devo mettere il mio blog www.nomeblog.blogspot.com e soprattutto alle foto ci pensa da solo in maniera random?

      Elimina
    3. Il tuo blog non è www.nomeblog.blogspot.com, ora capisco perché non ti funzionava. Credo che sia
      thatisammore.blogspot.com
      e lo devi sostituire a
      demo-blogger-widget.blogspot.com
      Non puoi sbagliare è colorato di rosso
      @#

      Elimina
    4. hahahahah guarda che lo so bene qual'e' il nome del mio blog!

      Ora si leggono solo scritte :( puoi andare a vedere...

      Elimina
    5. Si legge il codice :))
      Sembrerebbe che tu prima di incollare il codice lo abbia parsato come fosse pubblicità. Ho testato il codice proprio ora e funziona. Cercherò di essere ancora più chiaro. Vai su Layout > Aggiungi un gadget > Base > HTML/Javascript, non mettere il titolo, e incolla il codice così com'è su Sezioni del sito quindi Salva. Successivamente sposti l'elemento sopra all'area del post con il mouse da Layout e modifichi l'URL inserendo quello del tuo sito
      @#

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

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

      Elimina
  16. grazieeeeeeeeee :)

    senti sto cercando anche un calendario (tuti i mesi)per un food blog da mettere appunto nel mio blog, suggerimennti? :)

    RispondiElimina
    Risposte
    1. Mi sono occupato di un calendario al posto della data
      http://www.ideepercomputeredinternet.com/2015/11/blogger-calendario-titolo-post.html
      e di data e ora da mostrare nel sito
      http://www.ideepercomputeredinternet.com/2015/07/orologio-digitale-flottante.html
      Un calendario in sé stesso con accanto a ogni giorno un link a un avvenimento o a un post potrebbe essere una buona idea. Ci penserò e vedrò cosa posso fare (senza impegno)
      @#

      Elimina
  17. Molto bello però se devo proprio trovare una pecca: non si riesce a visualizzare il titolo.
    Grazie e complimenti per il blog

    RispondiElimina

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.