Come inserire l'Effetto Sfoglia Pagina in un blog su Blogger in modo semplice.

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='http://sites.google.com/site/ideepercomputeredinternet/effetti/AC_OETags.js'/>
<script type='text/javascript'>
var pagearSmallImg = &#39;http://fr9oew.blu.livefilestore.com/y1p7tWIDkqETKYk-7igBHccZYxOSiTq1oi3cc2SjViOUi9tzWYLqJHGon-Prtqd_LhbMiLTJYojd3eYcoUphiyjI5n4fLA2SQSW/keeley_hazell_100pixel.jpg&#39;;
var pagearBigImg = &#39;http://fr9oew.blu.livefilestore.com/y1pfODsIwaqu-89QnuZGAp2cKXRw5ZHcD1VP3FGboZNsdDbhQkm4zPLaBYpN-NgPBoA29A5mivfnVGDj4sY8Ag7Lmm_YrB2tOm9/keeley_hazell_500pixel2.jpg&#39;;
var jumpTo = &#39;http://www.ideepercomputeredinternet.com&#39;
var setDirection = &#39;rt&#39;;
var pageearColor = &#39;ffffff&#39;;
</script>
<script src='http://sites.google.com/site/ideepercomputeredinternet/effetti/pageear.js' type='text/javascript'/>
<noscript><a href='http://goo.gl/aaZ24' 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.

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.

---

Tweet

Se trovi interessante il sito puoi Sottoscriverne i feed o Diventare fan su Facebook. Se non sai cosa sono i feed, Leggi qui! Se ti piaciuto il post condividilo su Facebook, Twitter o Google +1.