Come inserire nel blog una cascata di petali di rosa.

Come installare l'effetto di una cascata di fiori in un sito di qualsiasi piattaforma.

So bene che siamo già entrati nell'Autunno e un post con questo titolo è decisamente fuori stagione ma in questo periodo forse una certa dose di romanticismo non guasta. Poi nulla vieta di sostituire i petali di rosa con foglie cadenti già a partire dalle prossime settimane.

Magari potrò usare lo stesso javascript per un altro post su questo tema. Non mi dilungo molto nella spiegazione di come installare questo semplice effetto ma ricordo che potrebbe non funzionare in tutti i blog. Essendo basato su JQuery potrebbe esserci un altro script incompatibile oppure JQuery potrebbe già essere installata nel modello però con una versione più vecchia. In questo caso si può aggiornare.

Si va su Layout > Aggiungi un gadget > HTML/Javascript e in Sezioni del sito si incolla questo codice

<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.7.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!petalirosa){var petalirosa=Array()}if(!flash_urls){var flash_urls=Array()}petalirosa['rain1']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLrBjQFZ9ym-vrHX494JjVkydse_nhBYlCbOsAbm0eg5CE6jzcwt20-Wk2XQKzOFo7pi_urPwJVMdLQOFvPIdTX9ADz_NPG7pqwTJLfWwZyumJD2gqWHWxXUc3mpmTmWAXLsiUnKjkwXR3/s30/petalo1.png";petalirosa['rain2']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbfEeNJe7J9crx3EovYqI96ULJEKPH0LI9pqpP1HXffroYvJINy7nsDZNQy554G4rTU-Jw9ItUsOjy2Cdbngb2JJPSk2rW_d4pkWviID26ahGdibRNK8wmU_OQ2IatnZj-TJR4olO0ahWu/s28/petalo2.png";petalirosa['rain3']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhisol6-tq-J5hEknHW2FRmFB80YR-ffIPzkRb-RTziUEvUj0_0VCGTtW0DK0wzK-HPBedYAQI9EVr22JYtOKuLsrQ5HS-7SSOvH29XLIVbigo-5sKMN50iECNQw7UXdcWnheu8Ucj7qZkD/s24/petalo3.png";petalirosa['rain4']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRZkne442WC1EiJw_222QHkNFd2U8S_6603E6OVjbK604iJriKfrUEnLBTG0ElvC2w2-VDaDoRWk5B6BFtI6ISBkwbsx8U1ITfFiYJyri105liL69exZx64FEzwexDuDA9xbetih96DX1A/s27/petalo4.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','rainDiv')
.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',petalirosa['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');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.7.2/jquery.min.js>');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLrBjQFZ9ym-vrHX494JjVkydse_nhBYlCbOsAbm0eg5CE6jzcwt20-Wk2XQKzOFo7pi_urPwJVMdLQOFvPIdTX9ADz_NPG7pqwTJLfWwZyumJD2gqWHWxXUc3mpmTmWAXLsiUnKjkwXR3/s30/petalo1.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 sotto l'header o sopra l'area del post quindi si va nuovamente su Salva disposizione. Gli URL delle immagini dei petali sono stati colorati di rosso. Le immagini hanno un effetto opacità e i petali si adagiano sul fondo della pagina rimanendo visibili per alcuni istanti.