Come inserire l’effetto Sfoglia-Pagina in un blog su Blogger.

Questo effetto è stato messo a punto dal sito tedesco www.webpicasso.de e l’ho scoperto attraverso il blog di Iole che ha scritto anche un eccellente post. Per iniziare date uno sguardo al blog dell’effetto sfoglia-pagina che ho creato per testare  il funzionamento.
Se andate con il mouse nella parte alta destra, la pagina si sfoglierà mostrando un’altra immagine. Avete quindi bisogno di due immagini, una più piccola da vedere in una posizione normale e una più grande quando la pagina viene sfogliata. 
Ho usato due immagini: la miniatura deve essere di 100x100 pixel e l’immagine che si vede quando si sfoglia la pagina deve avere le dimensioni di 500x500 pixel. Io non l’ho fatto per questioni di tempo ma si potrebbero inserire delle scritte per invitare a cliccare sulla pagina o sulla miniatura. Un’altra considerazione è che si vede di entrambe solo la parte che sta sopra alla diagonale quindi occorre considerare questo fatto quando si inserisce del testo.

Dopo che vi siete procurate le due immagini delle dimensioni appena citate, caricatele nel web, per esempio su SkyDrive e passate alla personalizzazione del file pageear.txt che potete scaricare dal collegamento. Inserite i seguenti dati evidenziati di rosso

/*
*  Konfiguration / Configuration
*/
// URL zum kleinen Bild / URL to small image
var pagearSmallImg = 'URL_Immagine_100pixel';
// URL zu pageear_s.swf / URL to small pageear swf
var pagearSmallSwf = 'http://www.hotlinkfiles.com/files/2780723_eogbc/pageear_s_1.swf';

cioè l’URL della miniatura.

// URL zum großen Bild / URL to big image
var pagearBigImg = 'URL_Immagine_500pixel';
// URL zu pageear_b.swf / URL to big pageear swf
var pagearBigSwf = 'http://www.hotlinkfiles.com/files/2780721_sj4yd/pageear_b_1.swf';

vale a dire l’URL dell’immagine grande

// URL to open on pageear click
var jumpTo = 'URL_Pagina_Collegamento'
// Öffnet den link im neuen Fenster (new) oder im selben (self)
// Browser target  (new) or self (self)
var openLink = 'new';

bisogna cioè inserire l’URL della pagina che si vuole che si apra quando il visitatore clicca sull’immagine sfogliata. Si può anche sostituire new con self se si vuole che il collegamento non si apra in una nuova scheda

// Ecke in der das Pagepeel erscheinen soll (lt: linke obere Ecke | rt: rechte obere Ecke )
// Set direction of pageear in left or right top browser corner (lt: left | rt: right )
var setDirection = 'rt';

sostituire rt con lt se si vuole che la pagina si sfogli sulla sinistra invece che sulla destra. Salviamo questo file di testo nel nostro computer. Rinominiamolo da pageear.txt in pageear.js con il destro del mouse. Carichiamolo sul servizio Hotlink Files che dà i link diretti ai file Javascript. Acquisiamone quindi l’indirizzo.
Adesso andiamo su Layout > Modifica HTML e cerchiamo il tag </head>. Immediatamente sopra incolliamoci il seguente codice

<script language='javascript' src='http://www.hotlinkfiles.com/files/2780722_zhzcz/AC_OETags.js'/>
<script src='URL del file pageear.js' type='text/javascript'/>

dove al posto di URL del file pageear.js inserite l’indirizzo acquisito da Hotlink Files. Adesso cercate il tag </body> e immediatamente prima inserite il seguente codice

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

Salvate il modello e guardate la vostra realizzazione.
Aggiornamento: Il sito HotlinkFiles è andato in tilt quindi ho caricato lo script su un altro hosting, DropBox. Nel caso in cui non funzionasse il codice di questo articolo consultate quest'altro post.