Pubblicato il 10/10/16 - aggiornato il  | 9 commenti :

Bellissimo slideshow delle immagini degli Ultimi Articoli di Blogger che si aprono a libro.

Come installare in Blogger lo slideshow di immagini Book Flip che si aprono come fossero un libro e che sono estratte dagli ultimi post. Cliccando su una immagine si aprirà l'articolo collegato.
Continuo nel ripristino dei gadget che non sono più funzionanti dopo che Google ha disabilitato il supporto hosting ai file caricati su Google Drive. Il metodo che userò per far funzionare nuovamente i widget è quello di caricare i file esterni direttamente nel modello di Blogger o negli elementi pagina HTML/Javascript.

Il ripristino seguirà necessariamente la regola della segnalazione. Dopo aver pubblicato quasi 6000 articoli di cui circa 700 dedicati ai widget di Blogger non posso ovviamente rimettermi a controllare tutti i post ma lo farò nel momento in cui un lettore mi farà presente che uno di questi gadget ha smesso di funzionare. Cosa che è successa per il gadget di cui presento adesso la nuova versione funzionante.

Il widget è stato creato dal sottoscritto utilizzando lo script Book Flip Slideshow di Dynamic Drive. In un widget HTML/Javascript verrà riprodotto uno slideshow che mostra le immagini degli ultimi post pubblicati nel sito che si aprono uno dopo l'altra come se si sfogliasse un libro

slideshow-bookflip-blogger

Per l'installazione si va su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript quindi, in Sezioni del sito, si incolla questo codice dopo aver opzionalmente digitato anche il titolo

<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 type='text/javascript'>
 //<![CDATA[    
  var showpostthumbnails_gal  = true;
var random_posts       = false;
var numposts_gal = 10;
var Book_Image_Sources=new Array();
function showgalleryposts(json) {
    var numPosts = json.feed.openSearch$totalResults.$t;
    var indexPosts = new Array();
    for (var i = 0; i < numPosts; ++i) {
        indexPosts[i] = i;
    }
if (random_posts == true){
    indexPosts.sort(function() {return 0.5 - Math.random()});
}
    if (numposts_gal > numPosts) {
        numposts_gal = numPosts;
    }
    for (i = 0; i < numposts_gal; ++i) {
        var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal =  entry_gal.title.$t;
        for (var k = 0; k <  entry_gal.link.length; k++) {
            if ( entry_gal.link[k].rel == 'alternate') {
                posturl_gal =  entry_gal.link[k].href;
                break;
            }
        }
if ("content" in entry_gal) {
            var postcontent_gal = entry_gal.content.$t
        }
        s = postcontent_gal;
        a = s.indexOf("<img");
        b = s.indexOf("src=\"", a);
        c = s.indexOf("\"", b + 5);
        d = s.substr(b + 5, c - b - 5);
        if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
            var thumburl_gal = d
        } else var thumburl_gal = 'https://lh5.googleusercontent.com/-kQ9hOC9zX2k/TkOgkY3otuI/AAAAAAAAUK4/zTROUSoVGQo/senza-immagini.jpg';
if (i== 0){
var thumb_ = 0;
var thumb_link = 1;
}
else{
var thumb_ = i * 2;
var thumb_link = thumb_+1;
}
Book_Image_Sources[thumb_]=thumburl_gal;
Book_Image_Sources[thumb_link]=posturl_gal;
    }
}
 //]]>
 </script>
<script type='text/javascript'>
 //<![CDATA[    
 var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);
function ImageBook(){
if(document.getElementById){
for(i=0;i<Book_Image_Sources.length;i+=2){
B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i];
}
Book_Div=document.getElementById("Book");
B_LI=document.createElement("img");Book_Div.appendChild(B_LI);
B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
B_MI=document.createElement("img");Book_Div.appendChild(B_MI);
B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
B_LI.style.left=0+"px";
B_MI.style.top=0+"px";
B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_RI.style.top=0+"px";
B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_LI.style.height=Book_Image_Height+"px";
B_MI.style.height=Book_Image_Height+"px";
B_RI.style.height=Book_Image_Height+"px";
B_LI.style.width=Book_Image_Width+"px";
B_MI.style.width=Book_Image_Width+"px";
B_RI.style.width=Book_Image_Width+"px";
if(Book_Border){
B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
B_LI.style.borderWidth=1+"px";
B_MI.style.borderWidth=1+"px";
B_RI.style.borderWidth=1+"px";
B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
B_LI.src=B_Pre_Img[0].src;
B_LI.lnk=Book_Image_Sources[1];
B_MI.src=B_Pre_Img[2].src;
B_MI.lnk=Book_Image_Sources[3];
B_RI.src=B_Pre_Img[4].src;
B_RI.lnk=Book_Image_Sources[5];
B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
BookImages()}}
function BookImages(){
if(!B_Stppd){
if(Book_Vertical_Turn){
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
B_MI.style.top=MidOffset+"px";
B_MI.style.height=B_MSz+"px"}
else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
B_MI.style.left=MidOffset+"px";
B_MI.style.width=B_MSz+"px"}
B_Angle+=Book_Speed/720*Math.PI;
if(B_Angle>=Math.PI/2&&B_Direction){
B_Direction=0;
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_MI.src=B_Pre_Img[B_CrImg].src;
B_MI.lnk=Book_Image_Sources[B_CrImg+1];
B_CrImg+=2}
if(B_Angle>=Math.PI){
B_Direction=1;
B_TI=B_LI;
B_LI=B_MI;
B_MI=B_TI;
if(Book_Vertical_Turn)B_MI.style.top=0+"px";
else B_MI.style.left=Book_Image_Width+1+"px";
B_MI.src=B_RI.src;
B_MI.lnk=B_RI.lnk;
setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
else setTimeout("BookImages()",50)}
else setTimeout("BookImages()",50)}
function Book_Next_Delay(){
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_RI.src=B_Pre_Img[B_CrImg].src;
B_RI.lnk=Book_Image_Sources[B_CrImg+1];
B_MI.style.zIndex=2;
B_LI.style.zIndex=1;
B_Angle=0;
B_CrImg+=2;
setTimeout("BookImages()",50)}
function B_LdLnk(){if(this.lnk)window.open(this.lnk, '_blank');}
function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
function B_Rstrt(){B_Stppd=false}
 //]]>
 </script>
<div id="Book" style="position:relative">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNmhsd_vXsdO5cKYnwz228e42HJH-vHp8jc7yj-G16pCzkKtlNKOkMCWWk4y4un58j1jDbNPCGhC0zylHlFf2H3bDXO0cDskyIK_Z9C-tachk6OW8_Lyxl-2lxPCchsvvsZUfHl6wrKpo/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 il widget quindi sempre da Layout con il drag & drop del mouse si sposta l'elemento pagina subito sopra all'area del post per poi andare in alto a destra su Salva disposizione.

book-flip-widget-blogger


PERSONALIZZAZIONI DEL WIDGET BOOK FLIP


Per facilitare il lettore ho colorato di rosso i più importanti parametri da personalizzare e accanto a ciascuno ho inserito un commento colorato di verde con le informazioni su cosa configura.
  1. Va inserito il dominio del vostro sito al posto di quello del blog di test che ho usato
  2. La larghezza del widget è di 608 pixel con le immagini 300x300 pixel
  3. L'URL ...senza-immagini.jpg si riferisce a una immagine 300x300 pixel che verrà mostrata qualora non ce ne fosse nessuna nell'articolo
  4. L'URL ...placeholder.gif si riferisce a una immagine che serve da sfondo
  5. Il numero di immagini mostrate è proposto come 10
  6. L'intervallo tra una immagine e l'altra è di 1500 millisecondi
  7. Sostituendo false con true saranno mostrati i post in modo casuale invece che in ordine.
Chi volesse mostrare questo gadget solo nella homepage o solo in una pagina statica dopo il posizionamento può applicare i tag condizionali con il vincolo prescelto.


9 commenti :

  1. Ciao Ernesto,
    vorrei inserire nel mio blog i codici con uno style qualcosa di simile al tuo. Ho visto anche altri con una barra spaziatrice, sfondo di colore, etc etc.
    Sai mica dirmi come posso farlo?
    Grazie e complimenti per il blog

    RispondiElimina
    Risposte
    1. Il mio è un template ufficialer di Blogger a cui ho aggiunto solo questo menù
      http://www.ideepercomputeredinternet.com/2013/06/multilevel-blogger-menu.html
      che poi ho installato anche su mobile
      http://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
      Gli altri widget sono stati aggiunti uno per uno
      @#

      Elimina
    2. Tin ringrazio per la risposta. Magari la mia domanda era un'altra: Quando tu scrivi un codice viene rinchiuso in un riquadro con la scritta codice by Ernesto Tirinanzi. Ho visto altri diversi con la barra scorrevole. Immagino che saranno magari degli script come si fa per esemplo con blockquote o simili. Volevo personalizzare questo. Tutto lì

      Elimina
  2. Segui questo post
    http://www.ideepercomputeredinternet.com/2010/01/come-creare-degli-stili-personalizzati.html
    che, visto che ha quasi 7 anni riprenderò con più info nei prossimi giorni
    @#

    RispondiElimina
  3. Ciao Ernesto, volevo chiederti se ci fosse la possibilità di far estrarre la seconda immagine di un post invece della prima. Grazie

    RispondiElimina
    Risposte
    1. Non credo sia possibile in questo slideshow e anche nelle condivisioni solo in certe situazione lo è
      @#

      Elimina
  4. grazie,è bellissimo adesso vorrei aggiungere i bottoni dei social insieme e non ci riesco,mi puoi aiutare

    RispondiElimina
    Risposte
    1. Non si possono aggiungere i bottoni dei social in questo widget. Li puoi mettere in un altro posizionato sopra o sotto a questo
      @#

      Elimina

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