Pubblicato il 10/11/12e aggiornato il

Foglie che cadono nel blog per un effetto autunnale.

Effetto di foglie cadenti da visualizzare nel blog nel periodo autunnale.
Eccomi nuovamente a presentare uno di quei widget stagionale che tanto piacciono specialmente alle lettrici per abbellire i loro blog. Avevo già presentato una cascata di foglie cadenti con la possibilità di scegliere la foglia che più ci piaceva tra le otto disponibili.
 
Con questo nuovo effetto vengono visualizzate quattro tipi di foglie che andranno ad adagiarsi nel fondo del blog. E' facilissimo sostituire le immagini che proporrò con altre che magari vi piacciono di più. E' anche possibile cambiare il tema dell'effetto e al posto delle foglie scegliere per esempio dei fiori per passare immediatamente a un effetto primaverile. Si tratta di un javascript che sfrutta la libreria JQuery e quindi potrebbe essere incompatibile con alcuni modelli che non la supportano
 

Per l'installazione non occorre modificare il modello. Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il seguente codice in Sezioni del sito

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!fogliesecche){var fogliesecche=Array()}if(!flash_urls){var flash_urls=Array()}fogliesecche['leaf1']="https://lh4.googleusercontent.com/-zV9Bw_6R9ZQ/UJ5cNIkp87I/AAAAAAAAcO0/_ag2zqKpk0E/s70/foglia12.png";fogliesecche['leaf2']="https://lh5.googleusercontent.com/-bWhsjXp_awU/UJ5cPQoBO9I/AAAAAAAAcO8/sQBNcliY3tM/s70/foglia22.png";fogliesecche['leaf3']="https://lh4.googleusercontent.com/-KQFkoRHuMGw/UJ5cSOetRUI/AAAAAAAAcPE/3TQ4jDdRL1I/s70/foglia32.png";fogliesecche['leaf4']="https://lh3.googleusercontent.com/-Rel91oaZa0A/UJ5cU_8p6SI/AAAAAAAAcPM/YjPvgepXPlE/s70/foglia42.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','leafDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',fogliesecche['leaf'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('leafDrop').appendTo('#leafDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js>');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'https://lh4.googleusercontent.com/-zV9Bw_6R9ZQ/UJ5cNIkp87I/AAAAAAAAcO0/_ag2zqKpk0E/s70/foglia12.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'#'}).append(a).appendTo('body')});</script>
 
Si salva e si posiziona l'elemento pagina subito sotto l'Header o sopra l'area del post quindi si va su Salva disposizione. Le foglie che ho scelto sono tutte in formato PNG di larghezza 70 pixel

foglia-cadente-1 foglia-cadente-2 foglia-cadente-3 foglia-cadente-4

Se si vogliono cambiare basta sostituire i loro URL colorati di rosso con quelli di altre immagini.




12 commenti :

  1. Queste foglioline sono deliziose, e tu hai proprio un animo sensibile alle esigenze di noi donne, perennemente in cerca (ahimé!) della perfezione estetica.
    Ne approfitto per chiederti se sai dirmi in che pagina posso trovare l'effetto hover che avevi inserito un po' di tempo fa, quello che faceva muovere le icone dei social al passaggio del mouse. L'ho cercato ovunque, ma non riesco più a trovarlo ^^

    RispondiElimina
    Risposte
    1. @ Giuliana
      Mi metti in difficoltà, non posso ricordarmi di tutti i post che ho scritto :)
      Ho trovato questi
      http://www.ideepercomputeredinternet.com/2012/06/come-inserire-i-bottoni-di-condivisione.html
      spero che siano quelli a cui ti riferisci :)

      Elimina
  2. Non sono quelli, ma forse possono supplire, grazie mille ;)
    Ernesto, una curiosità: questo genere di effetti (come l'hover) rallentano un pochino il caricamento del blog o non vi influiscono per niente?

    RispondiElimina
    Risposte
    1. @ Giuliana
      I javascript un po' rallentano però lo fanno certo meno delle molte immagini messe negli articoli :). Nel senso che se i tuoi post sono così pesanti da essere andati fuori banda con FeedBurner non ti devi certo preoccupare di un piccolo javascript con 4 immagini da 70 pixel :D

      Elimina
    2. Aaaaaaaaah!
      Non sono pesanti i miei articoli, constata tu stesso! A parte rarissimi casi (finora un paio) ho in genere un'unica foto piccola all'inizio del post, e gli articoli sono per lo più corti o medio-corti. E' feedburner che è una ciofeca ^^ ehehe
      Grazie Ernesto caro, un salutino :)

      Elimina
    3. @ Giuliana
      Pesanti come kilobyte e non come linguaggio :D

      Elimina
    4. Oh diamine. E - scusa l'ignoranza - come mai sono pesanti in kilobyte pur essendo corti? Da cosa dipende allora la pesantezza di un articolo?

      Elimina
    5. @ Giuliana
      Il limite massimo per la dimensione (o peso) per i Feed di FeedBurner è 512KB. Si può ovviare diminuendo il numero di feed che per default è 25.
      http://support.google.com/feedburner/answer/79626/

      Elimina
    6. Grazie Ernesto, sei superipermegafantasmagorico ;)

      Elimina
    7. Ernesto, volevo solo aggiornarti sul fatto che... funziona!! Dopo aver impostato 3 come numero di feed massimo su feedburner, sono magicamente ricomparsa con il mio ultimo articolo nell'elenco letture! Grazie mille per l'aiuto :)

      Elimina
    8. @ Giuliana
      Hai cambiato le impostazioni su FeedBurner o su Blogger o su tutti e due? Non ci ho mai fatto un post perché non ho mai potuto testare.

      Elimina
    9. Non avevo letto attentamente, ovviamente hai modificato le impostazioni su Feedburner > Edit Feed

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.