PagePeel è un effetto di Blogger che simula lo sfogliare delle pagine.

Effetto PagePeel configurato per blog su Blogger gratuiti o con domini di proprietà.

Mi sono già occupato almeno due altre volte dell'Effetto PageEar realizzato nel 2005 dal sito tedesco WebPicasso. Presento una nuova versione non tanto perché le vecchie non funzionassero ma perché da allora sono intervenute alcune modifiche negli hosting gratuiti quali Google Sites e DropBox. 

I file javascript caricati su Google Sites non funzionano più nei blog con dominio personalizzato mentre Dropbox ha smesso di inserire di default la cartella Public che serve per avere il link diretto ai vari file che vi vengono caricati. Dalla pagina di WebPicasso si può scaricare la versione 1.4 di Page Peel. Si tratta di scompattare il file ZIP con il tool nativo di Windows 7 oppure con un software tipo 7-ZIP.

Sono presenti oltre ai file di testo del copyright e a un file HTML di demo, due file javascript, due immagini e due file SWF. C'è anche un file audio che però non considereremo in questa installazione.

L'Effetto Page Peel comporta che si visualizzi una piccola immagine in un angolo in alto della pagina. Avvicinandoci con il cursore si visualizzerà un'altra immagine più grande con il collegamento a un dato post o pagina. Può essere usato per esempio come invito alla sottoscrizione dei feed

Cliccando nella particolare finestra che si apre saremo reindirizzati alla pagina che abbiamo configurato.

INSTALLAZIONE DI PROVA DI PAGEPEEL

Per verificare che il vostro template sia compatibile con PagePeel è opportuno inserire un codice di test per controllare che funzioni correttamente. Se avete un blog gratuito del tipo nomesito.blogspot.com potete seguire l'installazione direttamente nel vostro sito. Se invece avete un blog con dominio personalizzato allora il test dovrà essere fatto su un blog di prova che abbia lo stesso modello. Si va su Modello > Modifica HTML > Procedi e si cerca la riga </head>. Subito sopra si incolla il codice

<!-- EFFETTO SFOGLIA PAGINA INIZIO --><script language='javascript' src='https://sites.google.com/site/scriptperilblog/effetti/AC_OETags.js'/>
<script src='https://sites.google.com/site/scriptperilblog/effetti/pageear3.js' type='text/javascript'/>
<noscript><a href='http://goo.gl/iHNDi' target='_blank'><span style='font-size: x-small;'>Effetto Sfoglia Pagina</span></a></noscript>
<!-- EFFETTO SFOGLIA PAGINA FINE -->

Si cerca quindi la riga </body> e, subito sopra, si incolla quest'altro codice

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

Si salva il modello e si controlla che l'effetto funzioni. Per personalizzare l'effetto occorre procurarci una immagine quadrata da 500 pixel e una immagine sempre quadrata da 100 pixel. Entrambe devono essere in formato JPG. Bisogna considerare che di entrambe le immagini si vedrà solo l'angolo in alto. Le immagini dovranno essere caricate su Picasa e se ne dovrà ottenere il link diretto. Basta cliccarsi sopra con il destro del mouse e selezionare Copia URL Immagine (OS Windows).

PERSONALIZZAZIONE DI PAGEPEEL PER BLOGSPOT

Se si ha un blog gratuito del tipo Blogspot non occorrerà modificare il primo javascript colorato di viola. Dovremo solo intervenire in quello colorato di rosso. Si incolla nel browser il file

https://sites.google.com/site/scriptperilblog/effetti/pageear3.js

e si clicca su Invio. Si apre quindi il file con il Blocco Note o meglio ancora con Notepad++. Dobbiamo modificare i parametri delle foto in questo modo

 
Gli indirizzi delle foto presi da Picasa vanno inseriti cioè tra le virgolette di

var pagearSmallImg - Immagine piccola
var pagearBigImg    - Immagine grande

Scorrendo il codice si può anche settare di visualizzare l'effetto sulla parte destra di default o sulla parte sinistra. In questo caso occorre sostituire lt a rt in var setDirection = 'rt';. Infine si può inserire la pagina a cui deve puntare quando ci si clicca sopra. Si modifica l'URL di var jumpTo

Lasciando new in var openLink la pagina si aprirà in un'altra scheda del browser. Se vogliamo che si apra nella stessa finestra si sostituisce new con self. Dopo tutte queste operazioni si salva il file e si carica su Google Sites. Se ne ottiene il link diretto cliccando con il destro del mouse sopra Scarica e scegliendo Copia indirizzo link. L'URL così ottenuto va incollato in un file di testo. Ne va eliminata la parte finale a partire dal punto interrogativo compreso

https://sites.google.com/site/scriptperilblog/effetti/pageear2.js?attredirects=0&d=1

Tale file va sostituito a quello colorato di rosso nel codice precedente.

PERSONALIZZAZIONE DI PAGEPEEL PER DOMINI DI PROPRIETA'

Per i domini personalizzati oltre a effettuare le modifiche appena illustrate per i domini gratuiti, occorre crearci un account Dropbox se ancora non lo abbiamo. I file di cui si vuole ottenere l'hotlink devono essere caricati sulla cartella Public di Dropbox. Nei nuovi account Dropbox tale cartella non è più presente di default e quindi deve essere appositamente creata dall'utente.

Dopo aver modificato il file pageear3.js inserendo le nostre immagini, dovranno essere caricati su Dropbox i due file SWF che possono essere trovati nella cartella di PageEar versione 1.4. I nomi di tali file sono pageear_s.swf e pageear_b.swf. Vanno entrambi caricati nella cartella Public di Dropbox e occorre acquisirne il link diretto andando su Copy Public link

Tali URL vanno sostituiti nel javascript in questo modo



rispettivamente in var pagearSmallSwf e var pagearBigSwf. Si salva il file javascript e si carica esso stesso nella cartella Public di DropBox. Si scarica l'altro file js

https://sites.google.com/site/scriptperilblog/effetti/AC_OETags.js

e si carica anch'esso su Public di DropBox. Si va con il destro del mouse su ciascun file quindi su Copy Public link per ottenere il link diretto di entrambi i file



Gli indirizzi dei due javascript vanno sostituiti al codice inserito nel modello che poi dovrà essere nuovamente salvato.