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

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


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.