15 aprile 2012

PageEar o Effetto Sfoglia Pagina per blog su Blogger.

L'Effetto PageEar altrimenti detto anche PagePeel o Magic Corner e tradotto credo proprio da me per la prima volta in italiano come Effetto Sfoglia Pagina, è stato creato da WebPicasso e può essere scaricato e installato seguendo le istruzioni del sito. Dal Marzo del 2008 gli sviluppatori di PageEar permettono di utilizzarlo con la sola restrizione di lasciare intatte le informazioni sul copyright presenti all'inizio dei javascript.

Nel Gennaio del 2010 avevo estrapolato dai file quelle parti di codice da personalizzare per rendere più facile l'installazione dell'effetto Sfoglia Pagina anche ai meno esperti. Sono stato avvertito però proprio ieri sera che il codice che avevo postato non funzionava più. Non sto a spiegare le ragioni tecniche per cui questo sia avvenuto ma sono subito corso ai ripari rigenerando il codice e rendendolo nuovamente installabile.

L'Effetto Sfoglia Pagina mostra in alto a destra, o in alto a sinistra, una pagina arricciata con una piccola immagine. Se ci si passa sopra con il mouse, la pagina si apre di più e mostra una seconda immagine con un collegamento a una pagina web. Può essere un modo originale per invitare i lettori ad abbonarsi ai feed oppure per pubblicizzare un sito, una pagina, un libro o un altro prodotto.

Ricordo che con l'uso dei tag condizionali tale effetto può essere installato anche in una sola pagina del blog, basta inserire due righe di condizioni rispettivamente all'inizio e alla fine del codice

demo-effetto-sfoglia-pagina

Se siete sufficientemente bravi e volete personalizzare tutti gli aspetti dell'effetto quali la velocità, il numero di secondi di permanenza dell'effetto, la dimensione delle immagini e altri parametri allora scaricate PageEar in formato ZIP e consultate le istruzioni dei creatori dell'effetto.

Se invece non vi sentite così sicuri e vi contentate delle dimensioni di default delle immagini (100 pixel per la piccola e 500 pixel per la grande), seguite la procedura illustrata in questo articolo. Per prima cosa scaricate lo ZIP con i file SWF. Dopo averlo aperto con un software tipo 7-Zip o analogo, dovete caricare i due file presenti, denominati pageear_s.swf e pageear_b.swf, nella cartella Public di Dropbox. Occorrerà anche che acquisiate il loro link diretto andando su Copy Public link.

Come secondo passo vi servono due immagini quadrate rispettivamente da 100 pixel e 500 pixel in formato JPG che saranno quelle visualizzate nell'angolo della pagina del blog. Queste immagini dovranno essere caricate su un hosting quale Picasa e anche in questo caso si dovrà acquisire il link diretto di entrambe. E' giunto il momento di operare sul template. Andate su Modello > Modifica HTML > Procedi e cercate la solita riga </head>. Subito sopra incollate questo 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 -->

dove le parti colorate di rosso devono essere personalizzate in questo modo:
  1. In ' .../pageear_s.swf' va inserito l'URL diretto del file acquisito da Dropbox.
  2. Lo stesso discorso del punto precedente vale per ' ..../pageear_b.swf'  
  3. Nelle due righe successive vanno incollati gli URL delle immagini rispettivamente da 100 e 500 pixel che si sono caricate su Picasa (o su ImageShack, Flickr, ecc)
  4. In var jumpTo  va inserito l'URL della pagina web che volete che si apra quando si clicca sulla immagine grande dopo che si è passati con il cursore sopra alla immagine piccola
  5. Se desiderate visualizzare l'effetto in alto a destra del blog lasciate 'rt'. Se invece optate per la parte sinistra del sito, il che è preferibile per chi ha la Navbar, modificate la riga con 'lt'.
  6. var pageearColor = 'ffffff'; determina il colore di sfondo delle immagini che di default è bianco. I principianti possono leggersi in merito il post sui codici dei colori.
Adesso scorriamo il modello fino quasi alla fine per cercare la riga </body>. Subito sopra va incollato

<!-- PageEar function call -->
<script type="text/javascript"> writeObjects(); </script>

Finalmente si va su Salva Modello per terminare l'installazione dell'Effetto PageEar o Sfoglia Pagina.



34 commenti :

  1. Splendido effetto! Ci sto facendo un pensierino...
    P.S. Bello il pulsante rosso che porta al demo. Bella anche la ragazza che fa capolino dall'angolo del tuo demo ;)

    RispondiElimina
    Risposte
    1. Piccola aggiunta: noto solo adesso che hai tolto Google Adsense. Esperimento? ^^ Tra parentesi, sono fatti proprio bene questi annunci del Giardino dei Libri, e anche il loro sito è molto bello.

      Elimina
    2. Oh, i google adsense sono magicamente ricomparsi.
      Ernesto... non è che sei anche un mago? Non mi stupirei :D

      Elimina
  2. Che cosa si intende per " acquisiate il loro link diretto andando su Copy Public link. "?

    RispondiElimina
  3. @GiulianaMosetti
    Visto che dovevo scegliere una immagine e una valeva l'altra sono andato sul piacevole (per li occhi maschili ...)

    @pier
    "Acquisiate" lo uso come sinonimo di "Copiate" tanto per rendere più ricco il post dal punto di vista filologico. Per conoscere tutti i dettagli del fantastico servizio di Dropbox, leggiti questo post
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html

    RispondiElimina
  4. Grazie mille per averlo ripristinato ;)

    RispondiElimina
  5. Ernesto spero che lo acetterai se passi da me ho una sopresa per te ciaoooo

    RispondiElimina
    Risposte
    1. @edvige
      Fa sempre piacere ricever un premio. Mi trovo però in imbarazzo a rispondere a delle domande inerenti al make-up ^_^

      Elimina
    2. ahahahahaha non so se sei sposato o fidanzato o hai qualche sorella ecc ecc ma oggi anche gli uomini si mettono cremine....o dici niente....oppure puoi citare il tuo dopobarba se lo usi....non avevo pensato a questo ma....te l'avrei dato lo stesso ^-^ ciaooo

      Elimina
    3. @edvige
      Uso da diverso tempo un dopobarba all'essenza di sandalo :)

      Elimina
    4. Favoloso.....è la nota speziata che io personalmente adoro e cerco sempre qualcosa con il fondo di sandalo ma per donna non è facile trovare....dai che vai beneeeeeee ciaoooooo :O))

      Elimina
  6. io non ho capito bene di cosa parla l'articolo..o meglio si ma andando nel demo non vedo nessun angolo che si arriccia...scusatemi

    RispondiElimina
    Risposte
    1. @Domenico...
      Caspita mi avevi fatto impaurire :)
      Funziona, funziona. Metti il mouse in alto a destra accanto ai link della barra di navigazione

      Elimina
  7. Io ho seguito le istruzioni alla lettera e ho perfino caricato il file .js direttamente sul mio account Dropbox, ma l'effetto sfoglia pagina non funziona.
    Può darsi che sia perchè nel modello ho anche un file .js degli ultimi articoli per etichetta e magari i due vanno in conflitto?
    Grazie, Ernesto.

    RispondiElimina
    Risposte
    1. Aggiungo che ho visto che aprendo i file salvati su Dropbox mi compare un messaggio "Copyright non trovato" e l'indicazione di andare direttamente sul sito Webpicasso. Provo a fare così, vediamo se funziona.

      Elimina
    2. Anche scaricando direttamente i file dal sito Webpicasso, il file .js si vede, ma quelli .swf no, continua a comparire la scritta del "Copyright mancante".Eppure sul tuo blog demo continua a funzionare, strano. Sarò io che sbaglio qualcosa.

      Elimina
    3. @GiulianaMosetti
      Non ti saprei dire. Hai caricato i due file SWF nella cartella Public di Dropbox?

      Elimina
    4. Sì, come faccio sempre. Una volta caricati, se provo ad aprirli anzichè comparire i file compare questa schermata rossa del Copyright. Mah.

      Elimina
    5. @Giuliana
      I file SWF non si aprono in DropBox, quello non c'entra nulla. L'iportante è che tu copi correttamente il link diretto cioè devi andare su Copy Public link

      Elimina
    6. No, ma infatti avevo fatto proprio come dici tu, e avevo inserito il public link dei due file dove andava messo.
      Ho provato ad aprirli in Dropbox solo dopo, per curiosità.

      Elimina
  8. Ernesto,
    ti segnalo che l'effetto sfoglia pagina non si vede più nemmeno nel tuo demo.

    RispondiElimina
    Risposte
    1. @GiulianaMosetti
      Sulla mia demo al momento si vede. Credo che sia un problema di Google Code. Non mi permette di entrare. Ho scritto al supporto, speriamo di risolvere al più presto.

      Elimina
  9. Salve! Ho un problema relativo al PageEar e allo slide like box di fb!
    Praticamente se li visualizzo da Mozilla me li fa vedere perfettamente! Mentre da chrome no! Su chrome PageEar non appare completamente però se passo con il mouse non mi fa cliccare ad esempio su "esci" e se seleziono mi fa vedere un quadratino blu selezionato. mentre lo slide box se ci passo si apre ma resta completamente bianco.. Aiuto? :)

    RispondiElimina
    Risposte
    1. @ Samuele
      I problemi relativi ai singoli browser sono difficili da risolvere e variano da modello a modello

      Elimina
  10. Ciao , io ho eseguito tutta la procedura alla lettera , il mio blog è questo , anche cn questa nuova nn succede nulla , xkè?
    http://linkdicastleville.blogspot.it/

    RispondiElimina
    Risposte
    1. http://prntscr.com/oo51h
      http://prntscr.com/oo558
      Ecco qui , credo di aver fatto tutto bene no?

      Elimina
    2. @FrancescaSaccà
      Mi pare che tu abbia installato il codice correttamente. Se non funziona forse c'è una incompatibilità con il tuo modello perché come puoi vedere nella demo va.

      Elimina
    3. Niente.. ho provato anche con un modello semplice, non va.. , che peccato..

      Elimina
    4. @francescasaccà
      La demo continua a funzionare quindi non saprei dirti. Purtroppo non posso caricare i file su un mio spazio su Google Sites perché non funzionerebbe.

      Elimina
    5. Nella Demo che modello hai ? Cioè non vorrei che sia incompatibile con qualcosa che ho io nel blog , anche se nn ho molto , solo un quadretto html con un orologio..

      Elimina
    6. @francescasacca
      Si tratta del template Minima che forse ora non è più disponibile da quando ci sono quelli del Designer Modelli. Ho provato il codice in uno dei nuovi modelli e infatti non funziona. Quando ho un po' di tempo vedo se sia possibile adattare il codice anche ad altri template (senza impegno ...)

      Elimina
    7. ok grazie mille , io ogni tanto daro' un occhiata qui , se trovi la soluzione ti sarei veramente grata se mi fai sapere. Ciauuuuuuuu =)

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.