Effetto sfoglia pagina per blog

Finalmente dopo una lunga attesa ho deciso di pubblicare una guida su come sia possibile inserire un effetto sfoglia pagina all'interno di qualsiasi blog o sito web.

La procedura non è affatto difficile ed è stata ulteriormente semplificata da me.

Prima di iniziare va precisato di cosa sto parlando. Un'effetto sfoglia pagina consiste nel creare, attraverso l'uso di un'animazione in flash e vari script, un effetto che assomigli ad una pagina sfogliata.

Tutto questo comparirà agli angoli della vostra pagina secondo le impostazioni che deciderete di apportare.

Potete trovare l'anteprima di tale effetto nella parte superiore del blog, più precisamente nell'angolo destro.




Per inserire quest'effetto dovrete effettuare delle operazioni alquanto semplici.

Prima di tutto vanno create due immagini in formato JPEG. La prima di dimensioni pari a 500px x 500px (comparirà dopo aver sfogliato la pagina) mentre la seconda di 100px x 100px (comparirà nell'angolino prima di sfogliare la pagina).

Una volta create, dovrete hostarle su un server per riceverne il link diretto.

Avrete cosi completato la prima parte del procedimento.

Ora, inserite queste poche righe subito dopo il tag <head>  della vostra struttura.

<script src='http://j.mp/4GATWV' type='text/javascript'> </script>
<script type='text/javascript'>
var pagearSmallImg = 'indirizzo dell'immagine 100x100 formato jpeg'; 
var pagearBigImg = 'indirizzo dell'immagine 500x500 formato jpeg';
var jumpTo = 'link di destinazione';
var setDirection = 'rt';
</script><script src='http://j.mp/gjEtb' type='text/javascript'></script>


Affinchè tutto funzioni, non dimenticate di editare i campi "var pagearSmallImg", "var pagearBigImg", "var jumpTo", nel modo suggerito.

Il campo "var setDirection" indica la posizione dello script. Inserendo "rt" verrà visualizzato a destra mentre "lt" a sinistra.

Per completare l'operazione, vi basterà inserire lo script qui proposto, subito prima della parte </body>.

<script type='text/javascript'> writeObjects(); </script>

Salvate il tutto ed avrete anche voi uno stupendo effetto sfoglia pagina!

23 commenti:

flid ha detto...

Questa è la prima volta che ti scrivo. Conosco e seguo il tuo blog da quando 8 mesi fa ho creato il mio; ho letto tante cose per addentrarmi in questo mondo. Il mio blog è cambiato tanto in 8 mesi, graficamente; l'effetto sfoglia pagina è una ciliegina che cercavo e ti ringrazio per averla messa a disposizione. Inoltre la tua spiegazione è semplicissima e chiarissima. Le tue spiegazioni sono sempre chiare. Se mi vieni a trovare potrai vedere in che modo ho utilizzato quest'effetto. Mi trovi su http://inostriricordianimati.blogspot.com/.

Ciao e grazie ancora

|rotn3xtg| ha detto...

Complimenti ottimo script!
Lorenzo

Kamy22 ha detto...

Grz mille per i complimenti! :) :)

Carlitos ha detto...

NUFF RESPECT!

Kamy22 ha detto...

@ Carlitos: Prova a contattarmi via mail dato che il codice pubblicato è stato testato più volte e ti assicuro che è perfettamente funzionante.

Nadia ha detto...

Ho appena inserito questo effetto nel mio blog...è venuto benissimo!!! Purtroppo per me passare a blogger al momento è impossibile perchè il materiale già inserito nel blog, con tutti i vari link, è tantissimo e richiederebbe un lavoro enorme, ma i consigli di Kamy22 sono eccellenti anche per me che lavoro con myblog.
Se volete vedere com'è venuto questo effetto guardate http://chaariahospital.myblog.it
Grazie ancora, saluto tutti. Nadia.

Kamy22 ha detto...

@ Nadia: Certo che con la nuova veste grafica non credo che ci sia bisogno di cambiare piattaforma.

A mio avviso è molto carino e soprattutto l'effetto sfoglia pagina aggiunge un tocco di brio!

novalis ha detto...

Grazie per questo script, non è che si possa eliminare la scritta rossa in basso a destra?
Lo so che è giusto pubblicizzarti, ma desidererei farlo in un altro modo.
Grazie :-)

Controtango ha detto...

Ciao Kamy, appoggio anch'io la richiesta di novalis. Peraltro, il tuo blog è già linkato sul mio blog...
Grazie
Controtango

Kamy22 ha detto...

@ novalis & @ Controtango:

Salve, purtroppo non posso levare i credits dallo script soprattutto per il fatto che lo stesso file è usato da una centinaia di persone.

Inoltre questo è un metodo per dare maggiore visibilità al nuovo server che ha necessità di farsi conoscere dai motori di ricerca.

So che potrebbe darvi qualche fastidio ma ho fatto di tutto per rendere i credits piccolissimi e poco ingombranti.

Antoine ha detto...

Noto che chi lo installa si ritrova i crediti "Script by CameraBlog". Strano, io sapevo che lo script fosse di altri. Vediamo se passo la moderazione commenti.

Kamy22 ha detto...

Infatti è palese che lo script non è stato sviluppato da me!

Tuttavia siccome per funzionare ha bisogno di avere un server, viene usato quello della camera dei blog che fa da hosting.

Ecco il perchè di quel "Script by La Camera dei Blog". Sta ad indicare che lo script è distribuito dalla camera dei blog, dove vi sono anche informazioni su come installarlo senza il bisogno di possedere un server proprio.

Per quanto riguarda i credits dello script, ti assicuro che non sono in alcun modo violati dato che rimangono li dove l'autore li ha messi...

Ti basta fare un analisi più attenta per vedere che le parti
/********************************************************************************************
* PageEar advertising CornerAd by Webpicasso Media
* Leave copyright notice.
*
* Lizenzvereinbarung / License agreement
* http://www.webpicasso.de/blog/lizenzvereinbarungen-license-agreements/
*
* @copyright www.webpicasso.de
* @author christian harz
*********************************************************************************************/

sono perfettamente conservate.

Non vedo quindi il perchè di questa critica inutile!

Carlitos ha detto...

NO KAMY.. ERA JAMAICAN SLANG... HEHEHEH

GRANDE RISPETTO PER TE :D..

GIA' TESTATO E FUNZIONA ALLA STRAGRANDE!!!

AL PROSSIMO AGGIORNAMENTO GRAFICO LO CARICO.. ANKORA NUFF RESPECT!

Antoine ha detto...

Ohibo'... Apprendiamo che "Script by" e "Hosted by" pari sono, buono a sapersi. L'analisi approfondita era stata fatta, da dove pensi muova la critica? Comunque guarda, contenti i tuoi fans, contenti tutti. ;-)

Kamy22 ha detto...

@ Antoine: Guarda che se proprio vogliamo metterci a fare i pignoli sta scritto "script by" e non "scripted by"!

Ovviamente è l'unico modo per pubblicizzare lo script senza occupare troppo spazio.

Ti pare che possa scrivere Script distribuito sulla camera dei blog?!?!?

Tanto vale che poi mi prendo tutto la pagina, no?

BodyCold ha detto...

CIAO GENIO
ho provato l' effetto della pagina solo che nel salvare il codice esce fuori sta stringa in rosso:

Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto.
Messaggio di errore XML: The reference to entity "pid" must end with the ';' delimiter.

ho controllato tutto bene ma non mankano ;
:°(

O:O ha detto...

Ho provato in un blog di un mio amico e la pagina si sfglia, lo stesso procedimento sul mio non và, molto strano, secondo te cosa può essere, prova a dare una occhiata al blog

Kamy22 ha detto...

@ O:O: Ciao, controlla di aver inserito bene i link delle immagini... se inseriti in modo errato fanno si che lo script non venga visualizzato.

O:O ha detto...

Perfetto, ora funzia mi sà che sono stato un attimo babbione, grazie sempre per i consigli dato, ho messo il tuo bannerino

Laura ha detto...

ho usato qualche tuo prezioso consiglio
grazie 1000
ho prelevato anche il tuo banner!

LL

Rosadimaggio63 ha detto...

Ciao Kamil,
ho inserito anch'io nel mio blog " lo sfoglia pagina " e ti ringrazio per i tuoi consigli perchè è andato tutto bene :-)
Sinceramente per quel che mi riguarda la "stringhetta rossa" microscopica a me, non dà affatto fastidio...un pò di pubblicità non guasta mai, se poi la pubblicità è fatta bene.-
Grazie e ciao.-
Ps: Ti ho linkato ugualmente, per chi poi, leggendomi, non arrivasse a fine pagina.-

Anonimo ha detto...

ciao genio io sono solo un autodidattico ed gestisto un sito per amici...gradirei sapere come fare ad applicare la stessa cosa su un sito normale poiche uso un piccolo programma WYSIWYG Web Builder 6....grazie per la tua collaborazione...

angela ha detto...

:(( se solo potessi imparare!!!
accidenti quanto è difficile questo linguaggio
Io speriamo che me la cavo
saluti a tutti e complimentissimi per tutte le informazioni che metti a disposizione!!!
angela

Posta un commento

Related Posts with Thumbnails