Pubblicato il 24/09/12e aggiornato il

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://lh4.googleusercontent.com/-lSyOBHlKR7E/UGBhwpJdv4I/AAAAAAAAa2s/Eblu57D7j50/s30/petalo1.png";petalirosa['rain2']="https://lh4.googleusercontent.com/-cgdi9KpP3ow/UGBhytRdJfI/AAAAAAAAa20/nSqeKxM4jqE/s28/petalo2.png";petalirosa['rain3']="https://lh3.googleusercontent.com/-2fJP-h81jgY/UGBh0uqcvHI/AAAAAAAAa28/Kqsn61aZQHo/s24/petalo3.png";petalirosa['rain4']="https://lh6.googleusercontent.com/-JbkHU5A39u0/UGBh2QoM2dI/AAAAAAAAa3E/0DP2F3DNJv4/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://lh4.googleusercontent.com/-lSyOBHlKR7E/UGBhwpJdv4I/AAAAAAAAa2s/Eblu57D7j50/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.




9 commenti :

  1. Ciao, scusa se vado fuori argomento, ma vorrei sapere come spostare un widget (HTML5) alla fine di un post, cioè: alla fine di ogni post appare un annuncio pubblicitario (che ho inserito modificando il modello), poco fa ho installato il widget di Nrelate (alternativa a LinkWithin) e me la installato sopra l'annuncio, io vorrei spostarlo sotto, come faccio? Grazie.

    RispondiElimina
    Risposte
    1. @GiorgioCorradi
      Non hai incollato l'URL del blog quindi posso esserti di poco aiuto. Prova a andare su Modello > Modifica HTML >Procedi e non espandere i modelli widget. Prova a individuare le due righe dei due widget. Una dovrebbe essere così più o meno
      <b:widget id='HTML5' locked='false' title='NRelate' type='HTML'/>
      Quando li hai individuati entrambi cambia semplicemente di posto alle due righe cioè metti per prima la riga del widget che vuoi visualizzare più in alto. Salva il modello.
      Il template va salvato anche prima di iniziare la procedura. Per aiutarti a trovare il codice puoi pigiare su F3 o Ctrl+F e digitare il nome del widget.

      Elimina
    2. Grazie per la risposta, l'annuncio non è un widget, l'ho inserito sotto la stringa post-footer. Comunque il blog è www.apple-Planet.com, aprendo qualsiasi post trovi i post correlati e il banner. Grazie

      Elimina
    3. @GiorgioCorradi
      E' un banner di Tradedoubler. Lo hai inserito nel modello? Il codice del banner attualmente è sotto alla riga
      div class="post-footer
      spostalo più in alto sotto alla riga
      div class="post-body

      Elimina
    4. Grazie mille! :) CI sono riuscito!

      Elimina
  2. moto carino questo effetto (e utile,dato il tipo di blog che ho)

    RispondiElimina

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.