Come installare degli effetti speciali per Pasqua in un blog di Blogger.
In occasione delle principali festività sono solito proporre delle personalizzazioni da installare nel blog per ricreare una atmosfera in linea con il periodo dell'anno. Ricordo di aver creato effetti speciali per San Valentino, per Natale, per Capodanno e per Halloween.
In realtà tutti questi effetti sono mutuati dagli stessi script a cui si sostituiscono le immagini in modo che un effetto natalizio possa essere facilmente convertito in uno per San Valentino e viceversa. In occasione della Pasqua passo quindi a presentare delle personalizzazioni che possono essere facilmente installate nelle pagine web in senso lato ma più specificamente nei blog su Blogger. Purtroppo l'iconografia pasquale non offre molto di più delle classiche uova.
ANGELI ANIMATI CHE CADONO DALL'ALTO
Il celebre effetto della nevicata si può convertire in una cascata di angeli animati
In un blog su Blogger si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla questo codice
<script>
if(typeof $pdj=='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.1/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(typeof $pdj=='undefined'){var $pdj=jQuery.noConflict()}if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['angeli']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX7-6Hcowid93PW5YdvpWSYZmk8BwBzJuc7LsPayrNEA5GLh_zD8lwxhVrATMX9VlB-ExzaQ9_qfIsxSNxDO6YiK37bg70qpGhb81GlZt-8_uqxeks3gZD7_-nnyZu6k3rC81CGvUF-Qk/s100/Angelo100.gif";$pdj(document).ready(function(){var c=$pdj(window).width();var d=$pdj(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(8500,10000),function(){$pdj(this).fadeOut('slow',function(){f(a)})})},e(1,9000))};$pdj('<div></div>').attr('id','corazonDiv').css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=15;i++){var g=$pdj('<img/>').attr('src',image_urls['angeli']).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('corazonDrop').appendTo('#corazonDiv');f(g);g=null};var h=0;var j=0;$pdj(window).resize(function(){c=$pdj(window).width();d=$pdj(window).height()})});</script>
if(typeof $pdj=='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.1/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(typeof $pdj=='undefined'){var $pdj=jQuery.noConflict()}if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['angeli']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX7-6Hcowid93PW5YdvpWSYZmk8BwBzJuc7LsPayrNEA5GLh_zD8lwxhVrATMX9VlB-ExzaQ9_qfIsxSNxDO6YiK37bg70qpGhb81GlZt-8_uqxeks3gZD7_-nnyZu6k3rC81CGvUF-Qk/s100/Angelo100.gif";$pdj(document).ready(function(){var c=$pdj(window).width();var d=$pdj(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(8500,10000),function(){$pdj(this).fadeOut('slow',function(){f(a)})})},e(1,9000))};$pdj('<div></div>').attr('id','corazonDiv').css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=15;i++){var g=$pdj('<img/>').attr('src',image_urls['angeli']).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('corazonDrop').appendTo('#corazonDiv');f(g);g=null};var h=0;var j=0;$pdj(window).resize(function(){c=$pdj(window).width();d=$pdj(window).height()})});</script>
Si salva e preferibilmente si posiziona l'elemento sopra all'area del post. L'immagine dell'angelo ha l'URL colorato di rosso che può essere sostituito con quello di un'altra.
OGGETTI PASQUALI CHE CADONO
Si possono creare delle cadute di oggetti personalizzati utilizzando uno script simile. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e in Sezioni del sito si incolla
<script src="https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua1.js" type="text/javascript"/></script>
Dopo aver salvato si posiziona sopra all'area del post. L'immagine cadente avrà questo aspetto 
e per scegliere un altra immagine si deve editare il javascript colorato di rosso caricato su Google Drive. Sostituendo tale l'URL con i seguenti si visualizzeranno le immagini poste a lato
e per scegliere un altra immagine si deve editare il javascript colorato di rosso caricato su Google Drive. Sostituendo tale l'URL con i seguenti si visualizzeranno le immagini poste a lato
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua3.js
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua4.js
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua5.js
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua6.js
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua7.js
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua8.js
Anche di questo effetto ho pubblicato una demo online
TRE IMMAGINI PASQUALI ANIMATE CHE FLUTTUANO NEL BLOG
Con questo effetto si mostrano tre campanelli animati che fluttuano casualmente nell'area del blog.
Per questa personalizzazione, dopo aver salvato il template, si va su Modello > Modifica HTML, si cerca la riga </head> e, subito sopra, si incolla questo codice
<!--Effetto Pasqua Inizio-->
<script src='https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/movimento.js' type='text/javascript'/>
<script type='text/javascript'> var immaginea, immagineb, immaginec
function pagestart(){ immaginea=new ipcj1("immaginea",70,82);
immagineb=new ipcj1("immagineb",50,60);
immaginec=new ipcj1("immaginec",30,40);
idpceinmov3("immaginea");
idpceinmov3("immagineb");
idpceinmov3("immaginec");
} if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementByid)
window.onload=pagestart </script>
<!--Effetto Pasqua Fine -->
<script src='https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/movimento.js' type='text/javascript'/>
<script type='text/javascript'> var immaginea, immagineb, immaginec
function pagestart(){ immaginea=new ipcj1("immaginea",70,82);
immagineb=new ipcj1("immagineb",50,60);
immaginec=new ipcj1("immaginec",30,40);
idpceinmov3("immaginea");
idpceinmov3("immagineb");
idpceinmov3("immaginec");
} if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementByid)
window.onload=pagestart </script>
<!--Effetto Pasqua Fine -->
Si salva il modello. Si va poi su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla questo secondo codice
<div id="immaginea" style="position:absolute; left: -300px; width:70; height:70;">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKnMPSR3g7cZR7MHhub1DqdSBSYI5xCDkusygb-5kQvAh_ud3ylBr5ewsIbIaAtx9brfhIKiDjPNPsfayKCo2NcOtfwT0EzgiLZUCcwfE2eTwj2nJFsQ-14VYIzDX4q0ws53ZAT8YvMRE/" border="0" /></a></div>
<div id="immagineb" style="position:absolute; left: -400px; width:70; height:70;">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUr-umvlK6o7v9ut-XkvPkKmAsN_bPxdqc1tRUSvTFQ-vvhyn2N5aQ2EMw9NJD4HRZI-pF09bKzEIpSjyvYCV4uX6wn9gIlHA10dYsARGoBHqExGcYK98C-TSwf5hFIc2MxORguUTUPJI/" border="0" /></a></div>
<div id="immaginec" style="position:absolute; left: -500px; width:70; height:70;">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAii1agOEsTAAJ_LbB80nQ54spgHPbwu2OqIhRtaX6KKf0AuGpXD81DG21i_vbc5lI73fmx9NJL93GYaCXOchL0F6Si78KDwlu3pgHy0v57rVq1wqMK4laB8ghM5WwtKjaErX5DgVdkk/" border="0" /></a></div>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKnMPSR3g7cZR7MHhub1DqdSBSYI5xCDkusygb-5kQvAh_ud3ylBr5ewsIbIaAtx9brfhIKiDjPNPsfayKCo2NcOtfwT0EzgiLZUCcwfE2eTwj2nJFsQ-14VYIzDX4q0ws53ZAT8YvMRE/" border="0" /></a></div>
<div id="immagineb" style="position:absolute; left: -400px; width:70; height:70;">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUr-umvlK6o7v9ut-XkvPkKmAsN_bPxdqc1tRUSvTFQ-vvhyn2N5aQ2EMw9NJD4HRZI-pF09bKzEIpSjyvYCV4uX6wn9gIlHA10dYsARGoBHqExGcYK98C-TSwf5hFIc2MxORguUTUPJI/" border="0" /></a></div>
<div id="immaginec" style="position:absolute; left: -500px; width:70; height:70;">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAii1agOEsTAAJ_LbB80nQ54spgHPbwu2OqIhRtaX6KKf0AuGpXD81DG21i_vbc5lI73fmx9NJL93GYaCXOchL0F6Si78KDwlu3pgHy0v57rVq1wqMK4laB8ghM5WwtKjaErX5DgVdkk/" border="0" /></a></div>
Si salva e si posiziona a piacere. Le immagini hanno l'URL colorato di rosso che può essere sostituito con un altro mentre al posto dei tre cancelletti ( # ) si può incollare l'URL di una pagina collegata.
EFFETTO DEI CAMPANELLI PASQUALI
Si tratta di una immagine di campanelli pasquali fluttuanti che si muovono nel sito.
In un blog su Blogger si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla questo codice pubblicato su Google Drive
Le immagini dei campanelli animati appaiono nel centro della pagina, volteggiano verso l'alto e verso il basso per poi scomparire. Si può modificare l'URL della immagine flottante.
Grazie, Buona Pasqua a te Ernesto
RispondiElimina