Pubblicato il 26/03/16e aggiornato il

Come personalizzare il blog su Blogger per la Pasqua.

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


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://lh6.googleusercontent.com/-Z-fKDnLDgsg/VRz3dU-QJAI/AAAAAAAAr9E/mmPCNso-lAs/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  uovo-pasqua 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/pasqua2.js  pasqua-uova
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua3.js pasqua-uova
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua4.js pasqua-uova
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua5.js pasqua-uova
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua6.js  pasqua-uova
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua7.js pasqua-uova
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua8.js pasqua-uova

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.

campanelli-fluttuanti

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(&quot;immaginea&quot;,70,82);
immagineb=new ipcj1(&quot;immagineb&quot;,50,60);
immaginec=new ipcj1(&quot;immaginec&quot;,30,40);
idpceinmov3(&quot;immaginea&quot;);
idpceinmov3(&quot;immagineb&quot;);
idpceinmov3(&quot;immaginec&quot;);
} if (window.addEventListener)
window.addEventListener(&quot;load&quot;, pagestart, false)
else if (window.attachEvent)
window.attachEvent(&quot;onload&quot;, 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://lh5.googleusercontent.com/_nT13UtBmmiU/TawosEZcfHI/AAAAAAAAS4w/IqNlh3FWqIM/gif-bell2.gif" border="0" /></a></div>
<div id="immagineb" style="position:absolute; left: -400px; width:70; height:70;">
<a href="#"><img src="https://lh3.googleusercontent.com/_nT13UtBmmiU/Tawov-R_YUI/AAAAAAAAS40/L-IFcNd4xRU/gif-bell3.gif" border="0" /></a></div>
<div id="immaginec" style="position:absolute; left: -500px; width:70; height:70;">
<a href="#"><img src="https://lh6.googleusercontent.com/_nT13UtBmmiU/TawozfGQFNI/AAAAAAAAS44/Qmck2iOXflg/paques-04.gif" 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.

campanelli-pasqua

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.




1 commento :

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.