Widget degli Ultimi Articoli di Blogger che si aprono a libro.

Inizio con 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 widget è stato creato 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. Book Flip Slideshow

<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    =350;  // Larghezza
var Book_Image_Height   =350; // 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        = 20;   // 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://lh5.googleusercontent.com/-lBgvpM5Mj-w/Tkt-ISEw69I/AAAAAAAAUOU/y7gkoYhf-6w/s128/placeholder.gif" width="304" height="304" />
</div>
<script src="http://trucchieconsigliperblogger.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.

Leggi anche: Come installare il widget degli articoli correlati con miniature in Blogger. 

Personalizzazione.
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.
Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog:
http://feeds.feedburner.com/blogspot/UzOyu

Trovato questo articolo interessante? Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook o semplicemente premi "+1" per suggerire questo risultato nelle ricerche in Google, Linkedin, Instagram o Pinterest. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie! CONDIVIDI SU!

Ar-themes Logo

Hugo Repetto

Tutti noi crediamo di avere qualcosa da insegnare, tutti noi abbiamo una nostra storia personale che ci rende unici e ineguagliabili.

2 commenti: