Effetto "sfoglia pagina" nel blog

Scrivo questo post per rispondere alla richiesta di aiuto di Lorenzo e Giulia su come aggiungere nel proprio blog l'effetto "sfoglia pagina" (l'animazione che compare nell'angolo in alto a destra nel mio blog per intenderci).

Per iniziare scaricate sul vostro computer questo file zip che contiene i seguenti file:

• pageear_s.jpg
  (immagine "piccola" che compare sotto l'angolino in alto a destra)
• pageear_b.jpg
  (immagine "grande" che compare quando si sfoglia la pagina)
• pageear.js
• AC_OETags.js
• pageear_b.swf
• pageear_s.swf

Ovviamente le immagini (pageear_b.jpg e pageear_s.jpg) contenute nello zip sono quelle che ho usato nel mio blog, dovete quindi personalizzarle a vostro piacere!

Vediamo in particolare cosa dovete personalizzare e cosa NO.

Immagine pageear_b.jpg: deve avere dimensioni 500 x 500 pixel e deve avere estensione .jpg.

Immagine pageear_s.jpg: deve avere dimensioni 100 x 100 pixel e deve avere estensione .jpg

I file flash pageear_b.swf e pageear_s.swf non devono essere modificati, così come il file javascript AC_OETags.js.

A questo punto dovete caricare tutti questi file online, utilizzando Windows Live Skydrive, Hotlink Files, Image Shack, ...

Dopo aver caricato i file online, vi serviranno i loro indirizzi da inserire nel file pageear.js.

In particolare ecco cosa dovete cambiare:

// URL zum großen Bild / URL to big image
var pagearBigImg = 'URL DEL FILE pageear_b.jpg';
// URL zu pageear_b.swf / URL to big pageear swf
var pagearBigSwf = 'URL DEL FILE pageear_b.swf';

In questa porzione di codice dovete sostituire 'URL DEL FILE pageear_b.jpg' e 'URL DEL FILE pageear_b.swf' con gli indirizzi dei file pageear_b.jpg e pageear_b.swf caricati online.

// URL zum kleinen Bild / URL to small image
var pagearSmallImg = 'URL DEL FILE pageear_s.jpg';
// URL zu pageear_s.swf / URL to small pageear swf
var pagearSmallSwf = 'URL DEL FILE pageear_s.swf';

In quest'altra porzione di codice dovete sostituire 'URL DEL FILE pageear_s.jpg' e 'URL DEL FILE pageear_s.swf' con gli indirizzi dei file pageear_s.jpg e pageear_s.swf caricati online.

// URL to open on pageear click
var jumpTo = 'URL DELLA PAGINA DA APRIRE'

E infine in questa porzione di codice dovete sostituire 'URL DELLA PAGINA DA APRIRE' con l'indirizzo della pagina che volete venga aperta quando si clicca con il mouse sull'immagine che compare sfogliando la pagina.

Inoltre è possibile impostare altri parametri, quali la posizione dell'angolino: rt ossia right (destra) o lt ossia left (sinistra).

// Set direction of pageear in left or right top browser corner (lt: left | rt: right )
var setDirection = 'rt';

oppure se aprire la pagina in una nuova finestra (new) o in quella corrente (self):

// Browser target (new) or self (self)
var openLink = 'new';

Dopo aver effettuato queste modifiche, occorre salvare il file e caricarlo online. Poi copiate l'indirizzo del file e inserite nel vostro blog (Layout - Modifica HTML):

- questo codice prima del tag </head>:

<script language="javascript" src="URL DEL FILE AC_OETags.js"></script>
<script src="URL DEL FILE pageear.js" type="text/javascript"></script>

sostituendo ovviamente 'URL DEL FILE AC_OETags.js' e 'URL DEL FILE pageear.js' con gli indirizzi dei file che avete caricate online

- e questo codice prima del tag </body>:

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

Resto a disposizione per ogni vostro chiarimento.

Newsletter by follow.it

Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.