Pubblicato il 27/01/10 - aggiornato il  | 31 commenti :

Come inserire l'Effetto Sfoglia Pagina in un blog su Blogger in modo semplice.

Effetto Sfoglia Pagina da inserire in modo semplice nei blog su Blogger.
Mi sono già occupato dell'Effetto Sfoglia Pagina però mi sono reso conto che non ha avuto il riscontro che meritava forse perché nell'articolo precedente non avevo semplificato abbastanza la procedura di inserimento. Ho rimediato a questo problema ed ecco un nuovo metodo di installazione che prescinde dalla personalizzazione di file Javascript. Per prima cosa dovete procurarvi due immagini  di dimensioni rispettivamente di 500x500 pixel e di 100x100 pixel. Entrambe devono essere in formato JPG.


Queste immagini devono essere caricate su un vostro hosting tipo Skydrive o ImageShack, quindi ne deve essere acquisito l'indirizzo. Adesso andate su Layout > Modifica HTML e cercate la riga
</head> 
Immediatamente sopra di essa incollate il seguente codice



<!-- EFFETTO SFOGLIA PAGINA INIZIO -->
<script language='javascript' src='https://sites.google.com/site/scriptperilblog/javascript-2/AC_OETags.js'/>
<script type='text/javascript'>
//<![CDATA[ 
var pagearSmallSwf = ' .../pageear_s.swf'; 
var pagearBigSwf = '   ..../pageear_b.swf'; 
var pagearSmallImg = 'URL_IMMAGINE_100_PIXEL'; 
var pagearBigImg = 'URL_IMMAGINE_500_PIXEL'; 
var jumpTo = 'URL_PAGINA_DESTINAZIONE
var setDirection = 'rt'; 
var pageearColor = 'ffffff'
//]]> 
</script> 
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/pageear1.js' type='text/javascript'/>
<noscript><a href='http://goo.gl/xYOad' target='_blank'><span style='font-size: x-small;'>Effetto Sfoglia Pagina</span></a></noscript>
<!-- EFFETTO SFOGLIA PAGINA FINE -->



come mostrato nello screenshot
effetto-sfoglia-pagina
Le personalizzazioni da fare riguardano le seguenti parti di codice

  1. In var pagearSmallImg inserire al posto dell'URL evidenziato di rosso l'indirizzo dell'immagine di 100x100 pixel e che sarà visualizzata in alto
  2. In var pagearBigImg sostituire l'URL evidenziato di rosso con quello della vostra immagine di 500x500 pixel e che sarà vista quando si sfoglierà la pagina
  3. In var jumpTo al posto dell'URL di questo blog inserite l'indirizzo nel quale volete sia inviato chi clicca sopra all'immagine
  4. In var setDirection se lasciate rt l'effetto si vedrà in alto sulla destra mentre se mettete lt si vedrà sempre in alto ma sulla sinistra
  5. In var pageearColor si può inserire il colore di sfondo; se lasciate ffffff rimane il colore bianco.
  6. In  ../pageear_s.swf e    ..../pageear_b.swf vanno inseriti i link diretti ai file scaricati da questo ZIP e successivamente caricati su DropBox.
Adesso andate alla fine del modello e immediatamente prima di </body>, incollate questo blocco di codice



<!-- EFFETTO SFOGLIA PAGINA INIZIO -->
<script type="text/javascript"> writeObjects(); </script>
<!-- EFFETTO SFOGLIA PAGINA FINE -->


come mostrato nello screenshot

effetto-sfoglia-pagina
Salvate il modello.
Per vedere questo effetto all'opera andate nel blog di demo che ho creato appositamente: Effetto Sfoglia Pagina. Se avvicinate il mouse all'immagine in alto a destra, la pagina si aprirà, cliccando sull'immagine visualizzata si andrà in una pagina di questo blog.


Aggiornamento: consultate anche il post aggiornato sull'Effetto Sfoglia Pagina o PageEar.




31 commenti :

  1. Come mai non trovo ne < / body > e ne < body > ?? non riesco a trovarli.. neanche facendo con Ctrl + F

    RispondiElimina
  2. @Samantha.96
    Nei nuovi modelli non c'è il tag < body > ma comunque devi trovare la prima riga che inizi con
    < body expr:class=.....
    mentre < /body > dovrebbe esserci ma no è più nella penultima riga bensì prima di
    < macro:includable ...

    RispondiElimina
  3. @Samantha.96
    Ho guardato il tuo codice che anche tu puoi vedere qui

    view-source:http://modafashionstardoll.blogspot.com/

    incollando la stringa precedente nella barra degli indirizzi del browser e premendo Invio

    Nella penultima riga c'è il tag < /body > prima di < /html >
    Ho dovuto mettere gli spazi altrimenti non mi prendeva il commento.
    L'altro tag lo trovi in questa riga

    < body class='loading' >
    Anche qui ho aggiunto gli spazi dopo il minore e prima del segno di maggiore.
    Ciao

    RispondiElimina
  4. Io fatto tutto secondo le istruzioni non capisco perche' mi funziona solo la prima volta che vedo il blog poi non funziona piu' puoi aiutarmi.
    Ciao Veronica.

    RispondiElimina
  5. @Veronica
    In questo tuo blog
    http://www.donnapiublog.com/
    lo script funziona perfettamente e la pagina si apre corretamente. Solo che non si vedono le immagini che probabilmente non hai inserito bene o non lo hai ancora fatto.
    Se non ti funziona bene potrebbe essere una questione di browser. Ho provato con Chrome e Firefox ed è tutto OK. IE mi rifiuto di usarlo...
    Si vedono solo delle immagini bianche ma forse hai optato proprio per questa soluzione...
    Ciao

    RispondiElimina
  6. Le immagini che io ho usato hanno entrambi uno sfondo bianco...forse e' questo il problema?
    Comme browser io ho Firefox.
    Per il resto credo di aver usato tutte le indicazioni.
    Grazie.

    RispondiElimina
  7. @Veronica
    Le immagini sono in formato JPG? Altrimenti non funziona. Controlla.
    Ciao

    RispondiElimina
  8. Le immagini che ho usato sono JPG. Ho un dubbio pero' quando vado nel sito Image Shack qual'e' l'indirizzo che devo copiare?
    Link,Full size, sites, direct,
    oppure in Thumbnail Size:
    Forums o
    Sites
    Io ho usato Direct.
    Grazie ancora ciao Veronica.

    RispondiElimina
  9. @Veronica
    Vedo che hai un blog su Blogger. Allora perché non usi Picasa? Tutte le immagini del tuo sito vanno qui
    http://picasaweb.google.com/home
    puoi controllare. Per ottenerne il link diretto puoi seguire queste istruzioni
    http://www.ideepercomputeredinternet.com/2010/07/picasa-e-lo-strumento-piu-completo-per.html
    Ciao

    RispondiElimina
  10. Ciao,
    anche io ho seguito passo passo le istruzioni ma nn mi funziona...
    Il codice l'ho inserito subito prima di < /head >
    ma nulla...

    Come mai?
    Thx
    Roberto

    RispondiElimina
  11. @VPF
    Prova a inserire il codice così com'è senza mettere i tuoi dati. Ci sono due possibilità
    1)Si vede l'effetto: vuol dire che hai sbagliato a sostituire l'URL del blog o delle immagini
    2)Non si vede l'effetto: allora c'è incompatibilità con altri javascript presenti nel tuo modello.
    Ciao

    RispondiElimina
  12. ciao grandissimo,
    è possibile "piegare" ancora di piu la pagina per far vedere meglio l'immagine piccola, modificando qualche parametro??

    RispondiElimina
  13. @Mark86
    Tutto è possibile però non è una cosa immediata e credo ci voglia un certo lavoro

    RispondiElimina
  14. ok allora quando hai un pò di tempo non cè fretta, mille grazie ciao

    RispondiElimina
  15. ciao, volevo dirti che il mio blog viene bloccato con chrome in quanto affetto da malware (praticamente questo problema http://www.google.com/support/forum/p/blogger/thread?tid=1d26d5cf7c398ee9&hl=it) non riuscivo a capire cos'era, su ogni post ogni pagina, poi ho tolto l'effetto sfoglia e non ce lo piu, volevo solo segnalartelo ma nn ho capito da cosa dipende

    RispondiElimina
  16. @Mark86
    Il malware deriva da Fileden ed è stato rilevato su molti siti che hanno usato questo hosting per i loro script. Non so se tu hai preso questo effetto da me, se sì può darsi che sia stato un anno fa o anche di più. Quando mi sono accorto che qualcosa non funzionava su Fileden ho caricato gli script su Google Sites come puoi vedere da questo articolo. Questo molto tempo fa. Quindi se lo vuoi reinstallare con il codice di questo post non ci sono sicuramente problemi di questo tipo.

    RispondiElimina
  17. ciao io ho inserito l'effetto e funziona solo che non mi visualizza bene le immagini...potresti dare un occhiata perfavore?le immagini sono entrambe jpeg e una è 100 x 100 e l'altra 500x500

    RispondiElimina
  18. @Alberto Forlenza(http://awkwardalberto.blogspot.com/)
    Funziona perfettamente. Solo che si vedono solo la parte diagonale alta della foto quadrata e della miniatura. Questo non vale solo per te ma in tutti i casi. Si può comunque sempre creare una immagine in modo che tutto quello da vedere sia nella zona giusta.

    RispondiElimina
  19. si grazie by http://www.youpixel.it/

    RispondiElimina
  20. Ciao volevo chiederti se sai come far aprire lo sfoglipagina in una nuova finestra che non sia però un pop-up come è impostato in questo script. questo perchè il blocco pup-up chiude la pagina e disattivarlo ogni volta può essere frustrante alla lunga. grazie

    RispondiElimina
  21. @Auto ...
    Non sono a conoscenza di varianti su questo tema.

    RispondiElimina
  22. I file pageear S/B hanno il collegamento a fileden e sul mio blog a volta non funzionano a causa di quel rilevamento malware. conosci un altro spazio web in grado di supportare sfw? Neanche su Libero mi funzionano più... :(

    RispondiElimina
  23. @Auto ...
    Usa DropBox
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html

    RispondiElimina
  24. fantastico! appena inserito e va alla grande! ;)

    RispondiElimina
  25. ho seguito tutto alla lettera ma nn ho ottenuto niente... ecco il blog http://petrarc.blogspot.it/

    RispondiElimina
    Risposte
    1. @carloi
      Forse non hai fatto attenzione all'ultima riga del post che diceva di consultare un articolo più recente su questo tema. Comunque ho aggiornato il codice che dovrebbe funzionare sui domini non personalizzati come il tuo. In quelli personalizzati vanno caricati su Dropbox i due javascript

      Elimina
    2. ciao , ho seguito tutto alla lettera ma nn funziona , questo è ilmio blog, ho provato con tutte le guide su questo effetto .. http://linkdicastleville.blogspot.it/

      Elimina
    3. @FrancescaSaccà
      Leggi anche questo post che è più recente
      http://www.ideepercomputeredinternet.com/2012/04/pageear-o-effetto-sfoglia-pagina-per.html
      e guarda la sua demo
      http://effetto-sfoglia-pagina.blogspot.it/

      Elimina
  26. Come ricavo l'URL dai file scaricati?

    RispondiElimina
    Risposte
    1. Il problema non è "ricavare l'URL dei file scaricati" ma caricarli su un tuo spazio per poi ottenerne il loro link diretto. Puoi usare la cartella Public di Dropbox
      http://www.ideepercomputeredinternet.com/2012/06/sui-nuovi-account-dropbox-non-ci.html
      oppure usare Google Drive
      http://www.ideepercomputeredinternet.com/2014/07/hotlink-google-drive.html

      @#

      Elimina

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.